## निर्देश

### मुख्य मिशन

पृष्ठभूमि: रचनाकारों (फोटोग्राफर, चित्रकार, डिजाइनर, कलाकार आदि) को अपने काम को प्रदर्शित करने और संभावित ग्राहकों या नियोक्ताओं को आकर्षित करने के लिए एक पेशेवर ऑनलाइन पोर्टफोलियो की आवश्यकता होती है। पारंपरिक पोर्टफोलियो वेबसाइटें महंगी होती हैं, इन्हें बनाने में काफी समय लगता है और व्यक्तिगत सौंदर्यबोध को दर्शाने के लिए इन्हें अनुकूलित करना मुश्किल होता है। इस कौशल का उद्देश्य एक ऐसी पोर्टफोलियो वेबसाइट को तेजी से तैयार करना है जो दृश्य सौंदर्य और कार्यात्मक पूर्णता का संयोजन करती हो।

**विशिष्ट लक्ष्य:**

- काम के प्रदर्शन, श्रेणी फ़िल्टरिंग और काम के विवरण सहित एक संपूर्ण पोर्टफोलियो वेबसाइट बनाएं।

- दृश्य शैली रचनाकार की सौंदर्य संबंधी सोच और कार्यशैली के साथ पूरी तरह से मेल खाती है।

- सहज इंटरैक्टिव अनुभव, जो कई ब्राउज़िंग विधियों (ग्रिड/मेसनरी/कैरोसेल, आदि) का समर्थन करता है।

- डेस्कटॉप और मोबाइल के लिए अनुकूलित रिस्पॉन्सिव डिज़ाइन

- वैकल्पिक: व्यक्तिगत परिचय, संपर्क जानकारी और अन्य सहायक मॉड्यूल शामिल करें

**मुख्य बाधाएँ:**

- सौंदर्यशास्त्र ही मुख्य प्रतिस्पर्धी लाभ है; इसलिए पुराने ढर्रे के, साधारण डिजाइनों से बचना चाहिए।

- कार्य प्रस्तुति के तरीके ऐसे होने चाहिए जो स्वयं कार्य को उजागर करें, और ऐसी अनावश्यक सजावट से बचें जो विषयवस्तु को ढक दे।

लोडिंग स्पीड और ब्राउज़िंग अनुभव सुचारू होना चाहिए।

कार्य शुरू करने से पहले, उपयोगकर्ता से पुष्टि कर लें कि उन्होंने अपने कार्य के नमूने उपलब्ध करा दिए हैं। सामग्री उपलब्ध होने की पुष्टि होने के बाद ही कार्य आगे बढ़ाएं।

### चरण 1: रचनाकार की स्थिति और सौंदर्य संबंधी प्राथमिकताओं को समझें

**लक्ष्य:** निर्माता की शैलीगत स्थिति, लक्षित दर्शकों और सौंदर्य संबंधी प्रवृत्तियों को गहराई से समझना ताकि आगे के डिजाइन के लिए एक स्पष्ट दिशा स्थापित की जा सके।

**कार्यवाही:**

उपयोगकर्ता द्वारा प्रदान किए गए **"{कार्य नमूने}"** (छवि/वीडियो लिंक या फ़ाइलें) का विश्लेषण करें, और दृश्य शैली की विशेषताओं (रंग टोन, संरचना, मनोदशा, विषय वस्तु आदि) की पहचान करें।

उपयोगकर्ता द्वारा प्रदान किए गए **"{सौंदर्य संबंधी पसंद का विवरण}"** को ध्यानपूर्वक पढ़ें और मुख्य शब्दों को निकालें:

- समग्र वातावरण (जैसे, न्यूनतम, विंटेज, अवंत-गार्डे, गर्मजोशी भरा, शांत, कलात्मक, व्यावसायिक, आदि)

- संदर्भ शैलियाँ (जैसे, जापानी फ्रेश फैशन, यूरोपीय/अमेरिकी फैशन, बॉहॉस, फाउविज़्म, साइबरपंक, आदि)

- रंगों की प्रवृत्तियाँ (जैसे, काला/सफेद/ग्रे, मोरांडी रंग, उच्च संतृप्ति, ग्रेडिएंट आदि)

- लेआउट संबंधी प्राथमिकताएं (जैसे, पर्याप्त खाली स्थान, सघन कोलाज, सममित, अनियमित, आदि)

- यदि उपयोगकर्ता **"{संदर्भ वेबसाइट लिंक}"** प्रदान करता है, तो उनकी डिज़ाइन भाषा, इंटरैक्शन विधियों और लेआउट विशेषताओं का विश्लेषण करें।

- लक्षित दर्शकों के प्रकार (संभावित ग्राहक, कला संस्थान, आम प्रशंसक आदि) का व्यापक आकलन करें, और व्यावसायिकता तथा सहजता के बीच संतुलन बिंदु निर्धारित करें।

**आउटपुट:** आंतरिक रूप से एक स्पष्ट "सौंदर्य संबंधी प्रोफ़ाइल" तैयार करें जिसमें 3-5 मुख्य डिज़ाइन कीवर्ड और विशिष्ट दृश्य दिशा विवरण शामिल हों।

आउटपुट पूरा होने के बाद, उपयोगकर्ता से पुष्टि करें कि परिणाम संतोषजनक है या नहीं। यदि संतुष्ट नहीं हैं, तो उपयोगकर्ता की प्रतिक्रिया के आधार पर तब तक सुधार करें जब तक उपयोगकर्ता संतुष्ट न हो जाए।

### चरण 2: पोर्टफोलियो संरचना और अंतःक्रिया विधियों की योजना बनाएं

**लक्ष्य:** कार्य की मात्रा, प्रकार और उपयोगकर्ता की आवश्यकताओं के आधार पर सबसे उपयुक्त सूचना संरचना और ब्राउज़िंग अनुभव को डिज़ाइन करना।

**कार्यवाही:**

- कलाकृतियों की संख्या गिनें और **"{कलाकृति श्रेणियों}"** के अनुसार वर्गीकरण प्रणाली की योजना बनाएं (उदाहरण के लिए, चित्र/परिदृश्य/स्थिर जीवन, या परियोजना/श्रृंखला/वर्ष आदि के अनुसार)।

- होमपेज लेआउट विधि निर्धारित करें:

- **ग्रिड लेआउट:** समान आकार के कार्यों के लिए उपयुक्त, जिनमें व्यवस्थित और सुव्यवस्थित कार्य की आवश्यकता होती है।

- **पत्थर की चिनाई का लेआउट (झरना):** विभिन्न आकारों के कार्यों के लिए उपयुक्त, दृश्य भव्यता पर जोर देता है

- **फुलस्क्रीन कैरोसेल:** कम कार्यों के लिए उपयुक्त, जिनमें से प्रत्येक को इमर्सिव डिस्प्ले की आवश्यकता होती है।

- **हाइब्रिड लेआउट:** कई तरीकों का संयोजन, जैसे हीरो इमेज + नीचे ग्रिड

- श्रेणी फ़िल्टरिंग इंटरैक्शन डिज़ाइन करें:

- श्रेणियों को बदलने के लिए शीर्ष/साइडबार नेविगेशन

- टैग क्लाउड क्लिक फ़िल्टरिंग

- ड्रॉपडाउन मेनू चयन

- कार्य विवरण पृष्ठ प्रदर्शित करने की विधि:

- पेज नेविगेशन के बिना **मोडल ओवरले** डिस्प्ले

- बाएँ/दाएँ नेविगेशन सपोर्ट के साथ **अलग विवरण पृष्ठ**

- निम्नलिखित जानकारी शामिल करें: कार्य का शीर्षक, निर्माण का विवरण, तकनीकी मापदंड (वैकल्पिक), संबंधित कार्य संबंधी अनुशंसाएँ (वैकल्पिक)

- सहायक मॉड्यूल निर्धारित करें:

- **परिचय पृष्ठ:** निर्माता की फोटो, व्यक्तिगत विवरण, अनुभव

- **संपर्क मॉड्यूल:** ईमेल, सोशल मीडिया लिंक, सहयोग संबंधी पूछताछ फॉर्म (वैकल्पिक)

**आउटपुट:** स्पष्ट वेबसाइट संरचना आरेख (पृष्ठ/मॉड्यूल सूची सहित) और अंतःक्रिया प्रवाह विवरण

### चरण 3: दृश्य प्रणाली का डिज़ाइन तैयार करना (मुख्य चरण)

**लक्ष्य:** सौंदर्य संबंधी प्रोफाइल के आधार पर, एक संपूर्ण दृश्य भाषा प्रणाली डिजाइन करना, यह सुनिश्चित करते हुए कि वेबसाइट का प्रत्येक तत्व समग्र सौंदर्यशास्त्र को पूरा करे।

**कार्यवाही:**

**रंग प्रणाली डिजाइन:**

- **"सौंदर्य संबंधी प्राथमिकताओं"** और कार्य के रंग टोन के आधार पर, प्राथमिक रंग, एक्सेंट रंग, पृष्ठभूमि रंग और टेक्स्ट रंग निर्धारित करें।

- यदि कलाकृति स्वयं रंगीन है, तो कलाकृति को उभारने के लिए पृष्ठभूमि में तटस्थ रंगों (सफेद/धूसर/काला) का उपयोग किया जाना चाहिए।

- यदि चित्र काले/सफेद रंग का हो या ठंडे रंगों का हो, तो गहराई जोड़ने के लिए गर्म पृष्ठभूमि रंगों या एक्सेंट रंगों का उपयोग करें।

- विशिष्ट रंग कोड (हेक्स) और उपयोग परिदृश्य विवरण प्रदान करें

**टाइपोग्राफी सिस्टम डिजाइन:**

- शैली से मेल खाने वाले फ़ॉन्ट संयोजन चुनें:

- **शीर्षक का फ़ॉन्ट:** अधिक विशिष्ट हो सकता है, जो शैली के लहजे को दर्शाता है (उदाहरण के लिए, सेरिफ़ फ़ॉन्ट सुंदरता दिखाता है, सैन्स-सेरिफ़ फ़ॉन्ट आधुनिकता दिखाता है, हस्तलिखित फ़ॉन्ट आत्मीयता दिखाता है)।

- **बॉडी फॉन्ट:** पठनीयता को प्राथमिकता दें, आमतौर पर साफ सैन्स-सेरिफ़ फॉन्ट चुनें

- फ़ॉन्ट के सटीक नाम निर्दिष्ट करें (उदाहरण के लिए, Playfair Display, Helvetica Neue, Noto Serif SC, आदि)

- फ़ॉन्ट आकार का क्रम निर्धारित करें (उदाहरण के लिए, शीर्षक 32-48px, उपशीर्षक 18-24px, मुख्य भाग 14-16px)

**लेआउट और व्हाइटस्पेस के सिद्धांत:**

- सौंदर्य संबंधी प्राथमिकताओं के आधार पर रिक्त स्थान अनुपात निर्धारित करें:

- **मिनिमलिस्ट शैली:** पर्याप्त खाली स्थान, प्रति स्क्रीन कम कलाकृतियाँ (2-4)

- **शानदार शैली:** कॉम्पैक्ट व्यवस्था, प्रति स्क्रीन अधिक रचनाएँ (6-12)

- मार्जिन और स्पेसिंग के लिए विशिष्ट मान परिभाषित करें (उदाहरण के लिए, पेज मार्जिन 80px, वर्क स्पेसिंग 24px)

- संरेखण विधि निर्धारित करें (केंद्रित, बाएँ-संरेखित, अनियमित ऑफसेट, आदि)

**दृश्य विवरण डिजाइन:**

- वर्क कार्ड स्टाइल: गोल/नुकीले कोने, शैडो/बिना शैडो, बॉर्डर/बिना बॉर्डर

- होवर प्रभाव: ज़ूम, ओवरले, सूचना का उभरना, रंग परिवर्तन आदि।

- ट्रांज़िशन एनिमेशन: फ़ेड इन/आउट, स्लाइड, स्केल स्पीड और ईज़िंग कर्व्स

नेविगेशन बार स्टाइल: फिक्स्ड/हिडन, ट्रांसपेरेंट/सॉलिड, अंडरलाइन/ब्लॉक हाइलाइट

**समग्र वातावरण निर्माण:**

- **कलात्मक शैली के लिए:** सूक्ष्म बनावट, अनियमित तत्व और रचनात्मक टाइपोग्राफी शामिल करें।

- **यदि व्यावसायिक शैली में काम कर रहे हैं:** संयम, व्यावसायिकता बनाए रखें, काम की गुणवत्ता और जानकारी की स्पष्टता पर जोर दें।

- **यदि व्यक्तिगत शैली पसंद हो:** हाथ से बनाए गए तत्व, अनोखे आइकन और विशिष्ट इंटरैक्टिव ईस्टर एग्स शामिल करें।

**गुणवत्ता मानक:**

- सामंजस्यपूर्ण रंग संयोजन, 4 से अधिक मुख्य रंग नहीं

- फ़ॉन्ट संयोजन 2-3 प्रकारों से अधिक नहीं होने चाहिए, स्पष्ट पदानुक्रम होना चाहिए।

- दृश्य तत्वों को शैली में एकीकृत किया गया है, जिससे असंगतता का आभास नहीं होता।

- समग्र डिजाइन में कुछ "यादगार बिंदु" होने चाहिए, लेकिन वे इतने आकर्षक नहीं होने चाहिए कि सबका ध्यान अपनी ओर खींच लें।

**आउटपुट:** एक विस्तृत "विज़ुअल डिज़ाइन स्पेसिफिकेशन दस्तावेज़" जिसमें रंगों, फ़ॉन्ट, लेआउट और अन्य विवरणों के लिए विशिष्ट पैरामीटर और उपयोग संबंधी निर्देश शामिल हैं।

### चरण 4: कार्य सामग्री और मेटाडेटा को व्यवस्थित करें

**लक्ष्य:** उपयोगकर्ताओं द्वारा प्रदान किए गए कार्य नमूनों को संरचित डेटा में व्यवस्थित करना, वेबसाइट निर्माण के लिए सामग्री तैयार करना।

**कार्यवाही:**

- प्रत्येक कार्य के लिए निम्नलिखित जानकारी निकालें/व्यवस्थित करें:

- **कार्य फ़ाइल:** छवि यूआरएल या वीडियो लिंक ( **"{कार्य नमूने}"** से)

- **कार्य शीर्षक:** यदि उपलब्ध हो तो **"{कार्य शीर्षक सूची}"** का उपयोग करें, अन्यथा संक्षिप्त वर्णनात्मक शीर्षक उत्पन्न करें

- **कार्य श्रेणी:** **"{कार्य श्रेणियां}"** के अनुसार लेबल करें (एकाधिक टैग समर्थित हैं)

- **कार्य विवरण (वैकल्पिक):** यदि उपलब्ध हो तो **"{कार्य विवरण}"** का प्रयोग करें, अन्यथा इसे खाली छोड़ दें या संक्षिप्त विवरण स्वयं बनाएं

- **निर्माण समय/परियोजना जानकारी (वैकल्पिक):** यदि उपयोगकर्ता प्रदान करता है तो जोड़ें

- कृतियों को श्रेणी या कालानुक्रमिक क्रम में व्यवस्थित करें, प्रदर्शन प्राथमिकता निर्धारित करें (कि किन कृतियों को होमपेज पर प्रमुखता से प्रदर्शित किया जाए)

- यदि कार्यों की मात्रा अधिक है (>20 कार्य), तो प्रारंभिक लोडिंग की धीमी गति से बचने के लिए पेजिंग या लेज़ी लोडिंग का सुझाव दें।

- व्यक्तिगत जीवनी की सामग्री तैयार करें:

- निर्माता का नाम/स्टेज का नाम ( **"{व्यक्तिगत जानकारी}"** से)

- व्यक्तिगत विवरण/रचनात्मक दर्शन (व्यक्तिगत परिचय से लिया गया, यदि उपलब्ध न हो तो उपयोगकर्ता द्वारा पूरक जानकारी का सुझाव दें)

- संपर्क जानकारी (ईमेल, इंस्टाग्राम, बेहांस आदि, **"{संपर्क जानकारी}"** से)

**आउटपुट:** सभी आवश्यक फ़ील्ड युक्त संरचित कार्य डेटा सूची (JSON या तालिका प्रारूप)।

---

###

### चरण 5: पोर्टफोलियो वेबसाइट बनाएं

**लक्ष्य:** दृश्य डिजाइन और सामग्री डेटा को एक इंटरैक्टिव वेबसाइट में रूपांतरित करना।

**कार्यवाही:**

- वेबसाइट निर्माण के लिए विस्तृत निर्देश लिखें, जिनमें निम्नलिखित शामिल हों:

- **समग्र संरचना:** पृष्ठ लेआउट (होमपेज, हमारे बारे में, संपर्क आदि) और नेविगेशन विधि

- **दृश्य प्रणाली:** चरण 3 में डिज़ाइन किए गए रंग, फ़ॉन्ट, लेआउट और विवरण मापदंडों का पूर्ण संदर्भ।

- **अंतःक्रियात्मक तर्क:**

- श्रेणी फ़िल्टरिंग लागू की गई (फ़िल्टर करने के लिए टैग पर क्लिक करना काम करता है)

- क्लिक करने के बाद कार्य विवरण प्रदर्शित करने का तरीका (मोडल या नेविगेशन)

- होवर प्रभाव और एनीमेशन विवरण

- प्रतिक्रियाशील अनुकूलन नियम (मोबाइल लेआउट को कैसे समायोजित करता है)

- **सामग्री का उपयोग:** चरण 4 में दिए गए संगठित कार्य डेटा और व्यक्तिगत जानकारी का संदर्भ लें

- **प्रदर्शन अनुकूलन:** इमेज लेज़ी लोडिंग, स्मूथ स्क्रॉलिंग, लोडिंग एनिमेशन आदि।

- निर्देशों में सौंदर्य संबंधी आवश्यकताओं को स्पष्ट रूप से निर्दिष्ट करें, उदाहरण के लिए:

- "समग्र वातावरण में {सौंदर्य संबंधी मुख्य शब्द} झलकने चाहिए, टेम्पलेटेड डिज़ाइन से बचना चाहिए।"

- "वर्क कार्ड पर माउस ले जाने पर दिखने वाले प्रभाव सूक्ष्म और परिष्कृत होने चाहिए, अतिरंजित नहीं।"

- "रंगों का परिवर्तन स्वाभाविक होना चाहिए, एनिमेशन सहज होने चाहिए (300-500 मिलीसेकंड का ईज़िंग समय सुझाया जाता है)"

- generateWebpage टूल को कॉल करें, निम्नलिखित पास करते हुए:

- **निर्देश:** ऊपर दिए गए विस्तृत निर्देश

- **संदर्भ:** यदि संदर्भ शिल्प/सामग्री आईडी उपलब्ध हैं, तो संदर्भ प्रदान करने के लिए उन्हें शामिल करें।

**गुणवत्ता मानक:**

- वेबसाइट सामान्य रूप से लोड होती है और काम करती है।

- दृश्य प्रस्तुति डिजाइन विनिर्देशों के अनुरूप है, कोई स्पष्ट शैलीगत त्रुटि नहीं है।

- कार्य प्रदर्शन पूर्ण है, श्रेणी फ़िल्टरिंग फ़ंक्शन सामान्य रूप से कार्य करता है।

मोबाइल अनुकूलन अच्छा है

**आउटपुट:** पोर्टफोलियो वेबसाइट तैयार की गई (जो बातचीत में स्वचालित रूप से प्रदर्शित होती है)।

---

## आउटपुट विनिर्देश

**प्राप्त होने वाली वस्तुएँ:**

1. **व्यक्तिगत पोर्टफोलियो वेबसाइट (मुख्य परिपूरक):**

- इसमें होमपेज पर काम का प्रदर्शन, श्रेणी फ़िल्टरिंग, काम का विवरण, व्यक्तिगत बायो, संपर्क जानकारी और अन्य मॉड्यूल शामिल हैं।

- दृश्य शैली उपयोगकर्ता की सौंदर्य संबंधी प्राथमिकताओं के साथ पूरी तरह से मेल खाती है।

- सुगम अंतःक्रिया, प्रतिक्रियाशील डिज़ाइन

- सीधे साझा करने योग्य वेबपेज लिंक

2. **दृश्य डिजाइन की व्याख्या (सहायक):**

- डिजाइन थिंकिंग की संक्षिप्त व्याख्या: इन रंगों, फ़ॉन्ट और लेआउट को क्यों चुना गया

- डिजाइन के मुख्य मापदंडों की सूची बनाएं (रंग कोड, फ़ॉन्ट नाम, प्रमुख आयाम)

- यह उपयोगकर्ताओं को डिज़ाइन के तर्क को समझने या भविष्य में समायोजन करने में मदद करता है।

**फॉर्मेट संबंधी आवश्यकताएँ:**

- वेबसाइट एक इंटरैक्टिव HTML पेज है, जो बातचीत के दौरान स्वचालित रूप से प्रदर्शित होता है।

- डिजाइन की व्याख्या संक्षिप्त पाठ प्रारूप में प्रस्तुत की गई है, जिसमें प्रमुख मापदंडों की सूची शामिल हो सकती है।

**गुणवत्ता मानक:**

- **सौंदर्य स्तर:** वेबसाइट पेशेवर, परिष्कृत और यादगार दृश्य प्रभाव प्रस्तुत करती है, जिससे टेम्पलेटेड और साधारणता का एहसास नहीं होता।

- **कार्यात्मक पूर्णता:** कार्य प्रदर्शन, श्रेणी फ़िल्टरिंग, विवरण देखना जैसे मुख्य कार्य सामान्य रूप से संचालित होते हैं।

- **उपयोगकर्ता अनुभव:** सुचारू लोडिंग, स्वाभाविक इंटरैक्शन, मोबाइल पर बेहतर अनुकूलन

- **सामग्री की सटीकता:** सभी रचनाएँ और पाठ्य जानकारी बिना किसी चूक या त्रुटि के सटीक हैं।

---

## शैली और प्रस्तुति (मुख्य भाग)

### सौंदर्य दर्शन

पोर्टफोलियो वेबसाइट डिजाइन में "काम सर्वोपरि है, डिजाइन गौण" के सिद्धांत का पालन करना आवश्यक है। सभी डिजाइन तत्व (रंग, फ़ॉन्ट, लेआउट, एनिमेशन) काम की प्रस्तुति में सहायक होने चाहिए, न कि उसे ढकने वाले। साथ ही, डिजाइन में पर्याप्त सुंदरता और बारीकी होनी चाहिए, जो निर्माता के पेशेवर मानकों को दर्शाती हो।

### दृश्य डिजाइन के मुख्य बिंदु

**रंग लगाने की विधि:**

- पृष्ठभूमि के रंगों में आमतौर पर तटस्थ रंगों (सफेद/हल्का धूसर/गहरा धूसर/काला) का उपयोग किया जाता है, जिससे कार्य के रंग मुख्य भूमिका निभाते हैं।

- बटन, लिंक और हाइलाइट जैसे विशिष्ट रंगों का उपयोग संयमित रूप से किया जाना चाहिए, ताकि वे कार्य के रंग टोन के साथ मेल खाएं।

बहुत चमकीले या आपस में मेल न खाने वाले रंगों के संयोजन से बचें।

- कार्य के प्राथमिक रंगों के आधार पर इंटरफ़ेस के रंगों को गतिशील रूप से समायोजित कर सकता है (उन्नत तकनीक)

**फ़ॉन्ट चयन:**

ऐसे फॉन्ट चुनें जिनमें डिज़ाइन की समझ हो, लेकिन वे अत्यधिक दिखावटी न हों।

- **अंग्रेजी फॉन्ट के लिए सुझाव:** प्लेफेयर डिस्प्ले (सुंदर), मॉन्टसेराट (आधुनिक), लोरा (क्लासिक), रेलवे (साफ-सुथरा)

- **चीनी फ़ॉन्ट सुझाव:** सोर्स हान सेरिफ़ (सुंदर), सोर्स हान सैंस (आधुनिक), एलएक्सजीडब्ल्यू वेनकाई (गर्मजोशी भरा), ज़कूल किंगके हुआंगयू (शक्तिशाली)

फ़ॉन्ट संयोजनों में कंट्रास्ट होना चाहिए (सेरिफ़ + सैन्स-सेरिफ़, या बोल्ड + थिन), लेकिन 3 से अधिक प्रकार के फ़ॉन्ट नहीं होने चाहिए।

**लेआउट की सुंदरता:**

- **मिनिमलिस्ट शैली:** पर्याप्त खाली स्थान, प्रति स्क्रीन 2-4 कलाकृतियाँ, केंद्र में संरेखित, जिससे कार्य करते समय पर्याप्त जगह मिले।

- **पत्रिका शैली:** ग्रिड लेआउट, एकसमान कार्य आकार, साफ-सुथरा और व्यवस्थित, व्यावसायिकता पर जोर।

- **कलात्मक शैली:** अनियमित लेआउट, विभिन्न आकार के कार्य, ग्रिड को तोड़ सकते हैं, रचनात्मकता पर जोर देते हुए

- **इमर्सिव स्टाइल:** फुलस्क्रीन कैरोसेल, एक समय में एक ही कलाकृति प्रदर्शित करना, प्रभाव पर जोर देना

शैली चाहे जो भी हो, दृश्य संतुलन और लय बनाए रखें।

**बातचीत का विवरण:**

- **होवर इफेक्ट्स सूक्ष्म और परिष्कृत होने चाहिए:**

- छवि का हल्का ज़ूम (स्केल: 1.05) + अर्ध-पारदर्शी ओवरले + शीर्षक का फ़ेड-इन

- या: संतृप्ति/चमक में परिवर्तन + बॉर्डर हाइलाइट

- अत्यधिक अतिरंजित एनिमेशन (घूर्णन, पलटना, चमकना) से बचें।

- ट्रांज़िशन एनिमेशन की अवधि 300-500 मिलीसेकंड रखने का सुझाव दिया गया है, जिसमें ईज़-इन-आउट तकनीक का उपयोग किया गया है।

स्क्रॉलिंग का अनुभव सहज होना चाहिए, गहराई दिखाने के लिए पैरेलैक्स प्रभाव जोड़े जा सकते हैं।

लोडिंग एनिमेशन सरल और सुरुचिपूर्ण होने चाहिए, भड़कीले लोडिंग आइकन से बचना चाहिए।

**उत्तरदायी आकार:**

- **डेस्कटॉप:** वाइडस्क्रीन, मल्टी-कॉलम ग्रिड या बड़ी इमेज डिस्प्ले के फायदों का पूरा लाभ उठाएं।

- **टैबलेट:** दृश्य संतुलन बनाए रखते हुए 2-3 कॉलम में समायोजित करें

- **मोबाइल:** सिंगल या डबल कॉलम, टैप एरिया बढ़ाएं, नेविगेशन को सरल बनाएं

सभी उपकरणों पर मुख्य जानकारी (शीर्षक, नेविगेशन, संपर्क) स्पष्ट रूप से दिखाई देनी चाहिए।

### सामान्य शैली संदर्भ

- **मिनिमलिज़्म:** पर्याप्त खाली स्थान, काले/सफेद/ग्रे प्राथमिक रंग, सेन्स-सेरिफ़ फ़ॉन्ट, सरल आइकन, सभी सजावट हटा दें

- **जापानी फ्रेश:** हल्के रंग (ऑफ-व्हाइट, हल्का लकड़ी का रंग, धुंधला नीला), हस्तलिखित फ़ॉन्ट, गर्मजोशी भरे नाजुक विवरण

- **फैशन एडिटोरियल:** हाई कंट्रास्ट, बोल्ड फॉन्ट, असममित लेआउट, ब्लैक एंड व्हाइट फोटोग्राफी शैली

- **विंटेज:** पुरानी बनावट, गर्म पीले रंग, सेरिफ़ फ़ॉन्ट, दानेदार सतह, फ़िल्म जैसी गुणवत्ता

- **तकनीकी/भविष्यवादी:** गहरे रंग की पृष्ठभूमि, फ्लोरोसेंट एक्सेंट रंग, ज्यामितीय आकृतियाँ, गतिशील प्रभाव, साइबरपंक तत्व

- **कला दीर्घा:** शुद्ध सफेद पृष्ठभूमि, अत्यधिक खाली स्थान, केंद्र में प्रदर्शित कलाकृतियाँ, न्यूनतम नेविगेशन, वास्तविक दीर्घा के अनुभव का अनुकरण

### डिजाइन में बचने योग्य कमियां

- ❌ ग्रेडिएंट, शैडो और इफेक्ट्स का अत्यधिक उपयोग, सस्ता दिखना

- ❌ बहुत अधिक या अत्यधिक आकर्षक फ़ॉन्ट का उपयोग, जिससे पठनीयता प्रभावित होती है

- ❌ रंगों का टकराव या अत्यधिक संतृप्ति, आंखों में थकान

- ❌ भीड़भाड़ वाला लेआउट, कलाकृतियों के बीच पर्याप्त जगह का अभाव

- ❌ एनिमेशन बहुत जटिल या धीमे नहीं हैं, जिससे अनुभव प्रभावित होता है

- ❌ मोबाइल पर ठीक से काम न करना, टेक्स्ट का छोटा होना या बटन दबाने में कठिनाई

- ❌ अत्यधिक डिज़ाइन करना, डिज़ाइन को काम से ज़्यादा हावी होने देना