उपयोगकर्ता द्वारा दी गई सामग्री के आधार पर एक वेबपेज बनाएं। वेबपेज की शैली संबंधी आवश्यकताएँ इस प्रकार हैं:

### I. दृश्य शैली निर्धारण - **कलात्मक हस्त-चित्रित शैली**: लाइन आर्ट शैली को अपनाते हुए, आधुनिक डिजिटल डिज़ाइन को पारंपरिक हस्त-चित्रित सौंदर्यशास्त्र के साथ मिश्रित किया गया है। - **रंग योजना**: आधार के रूप में तटस्थ रंगों (हल्का सफेद/हल्का धूसर) का उपयोग, गहरे धूसर मुख्य पाठ के साथ, और दृश्य केंद्र बिंदु के रूप में नारंगी-लाल (एक्सेंट रंग) का उपयोग। - **ब्रांड टोन**: परिष्कृत, कलात्मक और गर्मजोशी भरा, एक समझदार उपयोगकर्ता समूह को लक्षित करते हुए। ### II. लेआउट संरचना सिद्धांत **हीरो सेक्शन (पहली स्क्रीन डिज़ाइन)** - बाएँ-दाएँ कॉलम लेआउट (60:40 गोल्डन रेशियो) - बाएँ ओर: - बड़ा शीर्षक (डिस्प्ले फ़ॉन्ट, 72-96px), गहरा फ़ॉन्ट, प्रभावशाली दृश्य - मुख्य डेटा को एक्सेंट रंग में हाइलाइट किया गया है (उदाहरण के लिए, "15 शहर, 4749 स्थान") - संक्षिप्त और प्रभावशाली उपशीर्षक, जो मुख्य मूल्य प्रस्ताव को बताता है - पर्याप्त खाली जगह, जो उच्च स्तरीय अनुभव प्रदान करती है - दाएँ ओर: - अनुकूलित हाथ से बनाए गए चित्र, जो दृश्य स्थान का 50% भाग घेरते हैं - सुसंगत चित्रण शैली: रेखाचित्र + स्थानीय रंग एक्सेंट - चित्रण सामग्री ब्रांड कहानी के साथ गहराई से एकीकृत - **नेविगेशन बार डिज़ाइन** - न्यूनतम शीर्ष नेविगेशन, निश्चित स्थिति - लोगो + 2-3 मुख्य मेनू आइटम - दाएँ ओर आइकन समूह (खोज/पसंदीदा/मेनू) - सूक्ष्म छाया के साथ पारदर्शी या शुद्ध सफेद पृष्ठभूमि - **सामग्री कार्ड क्षेत्र** - कार्ड ग्रिड लेआउट (3-4 कॉलम, रिस्पॉन्सिव) - प्रत्येक कार्ड में शामिल हैं: - शीर्षक (शीर्षक 3, 32-40px) - विवरण (2-3 पंक्तियाँ, 16-18px, पंक्ति की ऊँचाई 1.6) - साथ में हाथ से बनाया गया चित्र (मुख्य दृश्य शैली के अनुरूप) - हल्का बैकग्राउंड (#F5F3F0), गोल कोने (8-12px) - होवर स्थिति: थोड़ा ऊपर उठना + गहरी छाया - ### III. चित्रण प्रणाली विनिर्देश **चित्रण निर्माण दिशानिर्देश** 1. 2. **रेखा प्रसंस्करण**: - यथार्थवादी पेंटिंग बनावट का अनुकरण करने के लिए 1-2px अनियमित हाथ से खींची गई रेखाओं का उपयोग करें - अत्यधिक यांत्रिकता से बचते हुए, कृत्रिमता के स्पर्श के साथ चिकनी रेखाओं को बनाए रखें। 3. **रंगों का उपयोग:** - 80% ग्रे रेखाएँ + 20% ब्रांड रंग से भरा हुआ - नारंगी-लाल रंग का उपयोग केवल तत्वों (लोग, खिड़कियाँ, प्रमुख इमारतें) पर ज़ोर देने के लिए किया गया है - पृष्ठभूमि में ग्रेडिएंट बेज (#FDFBF7 → #F5F1EB) का उपयोग किया गया है - 5. **दृश्य संरचना:** - शहरी दृश्य: प्रमुख इमारतों और रोज़मर्रा के जीवन के दृश्यों का मिश्रण - ऊपर से या आइसोमेट्रिक परिप्रेक्ष्य - कथा और आत्मीयता को बढ़ाने के लिए छोटी आकृतियाँ जोड़ना - 7. **विवरण घनत्व:** - समृद्ध अग्रभूमि विवरण, मध्यम रूप से सरलीकृत मध्यभूमि और रूपरेखा वाली पृष्ठभूमि - दृश्य पदानुक्रम बनाए रखना, आँखों को मुख्य जानकारी की ओर निर्देशित करना - 9. ### IV. फ़ॉन्ट सिस्टम - **डिस्प्ले फ़ॉन्ट (शीर्षक):** सेरिफ़ फ़ॉन्ट, भारी और प्रभावशाली (जैसे, फ्रेट डिस्प्ले, टिएम्पोस) - **बॉडी फ़ॉन्ट (बॉडी टेक्स्ट):** सैन्स-सेरिफ़, अत्यधिक पठनीय (जैसे, इंटर, मैनरोप) - **फ़ॉन्ट साइज़ अनुपात**: मॉड्यूलर स्केल (1.25 या 1.333) का उपयोग करता है - - **फ़ॉन्ट वेट स्तर**: हल्का (300) / सामान्य (400) / मध्यम (500) / बोल्ड (700) - ### V. इंटरैक्शन विवरण - - **माइक्रो-एनिमेशन**: होवर करने पर कार्ड 4-8px ऊपर उठते हैं, ट्रांज़िशन समय 300-400ms - - **लोडिंग स्थिति**: ब्रांड टोन बनाए रखने के लिए स्केलेटन स्क्रीन का उपयोग करता है - - **रिस्पॉन्सिव ब्रेकपॉइंट**: - - डेस्कटॉप: 1440px+ - - टैबलेट: 768-1439px - - मोबाइल: 375-767px - - ### VI. डिज़ाइन आउटपुट आवश्यकताएँ प्रत्येक डिज़ाइन आउटपुट में निम्नलिखित शामिल होना चाहिए: 1. स्पष्ट दृश्य पदानुक्रम (आकार/रंग/श्वेत स्थान के माध्यम से प्राप्त) 2. कम से कम एक कस्टम चित्रण (सामग्री से गहराई से संबंधित, नैनो बनाना प्रो का उपयोग करके निर्मित) 3. कम से कम एक कस्टम चित्रण (सामग्री से गहराई से संबंधित, नैनो बनाना प्रो का उपयोग करके निर्मित) 4. 2-3 एक्सेंट रंग हाइलाइट्स (अधिकतम) 5. पर्याप्त रिक्त स्थान (सेक्शन स्पेसिंग ≥ 120px) 7. पर्याप्त रिक्त स्थान (सेक्शन स्पेसिंग ≥ 120px) 9. स्पष्ट उपयोगकर्ता क्रिया पथ 10. --- **डिज़ाइन दर्शन**: ब्रांड की विशिष्टता और गर्मजोशी को व्यक्त करने के लिए कलात्मक दृश्य भाषा का उपयोग करें। प्रत्येक पिक्सेल एक कहानी कहता है, न कि केवल कार्यक्षमता का प्रदर्शन करता है। डिज़ाइन ऐसा होना चाहिए जिससे उपयोगकर्ताओं को लगे, "यह उन लोगों के लिए है जो जीवन की कद्र करते हैं," न कि किसी ठंडे, व्यावसायिक उत्पाद के रूप में।

वेब पेज के सभी चित्र नैनो बनाना प्रो द्वारा तैयार किए गए थे।