ब्रांड स्टोरी वेबसाइट
निर्देश
मुख्य मिशन
पृष्ठभूमि: ब्रांड की कहानियाँ अक्सर टेक्स्ट दस्तावेज़ों या पॉवरपॉइंट प्रस्तुतियों में मौजूद होती हैं, जिनमें आकर्षक प्रस्तुति शैली का अभाव होता है। एक उत्कृष्ट ब्रांड पेज एक आकर्षक पत्रिका की तरह होना चाहिए जिसे स्क्रॉल किया जा सके। इसमें सावधानीपूर्वक डिज़ाइन किया गया लेआउट, एनिमेशन और लय का उपयोग किया जाना चाहिए ताकि आगंतुक ब्राउज़ करते समय ब्रांड के दर्शन को स्वाभाविक रूप से समझ सकें और ब्रांड के भाव को अनुभव कर सकें।
विशिष्ट उद्देश्य:
ब्रांड की कहानी को 4-8 कथात्मक बिंदुओं में विभाजित किया गया है, जिसमें प्रत्येक बिंदु एक दृश्य अध्याय से मेल खाता है।
विज़ुअल प्रेरणा और डिज़ाइन संदर्भ प्राप्त करने के लिए बेंचमार्क ब्रांड वेबसाइटों का अध्ययन करें।
एक परिष्कृत दृश्य शैली प्रणाली (रंग योजना, टाइपोग्राफी, लेआउट, गति प्रभाव) डिजाइन करें जो ब्रांड की पहचान के अनुरूप हो।
एक स्क्रॉलिंग इंटरैक्टिव वेबपेज बनाएं जिसमें टाइमलाइन, माइलस्टोन और उत्पाद विकास जैसे मॉड्यूल शामिल हों।
यह सुनिश्चित करें कि पेज देखने में परिष्कृत, सुरुचिपूर्ण और सरल लगे, सस्ते या अत्यधिक सजावटी डिजाइनों से बचें।
मुख्य बाधाएँ:
दृश्य शैली ब्रांड के भाव के अनुरूप होनी चाहिए (उदाहरण के लिए, तकनीकी ब्रांड → शांत और संयमित, सौंदर्य ब्रांड → गर्मजोशी और सौम्य)।
एनीमेशन इफेक्ट्स संयमित और संतुलित होने चाहिए, जो तकनीकी कौशल दिखाने के बजाय कहानी को आगे बढ़ाने में सहायक हों।
बेहतर उपयोगकर्ता अनुभव सुनिश्चित करने के लिए पेज लोडिंग की गति और सुगम इंटरैक्शन आवश्यक हैं।
कार्य को पूरा करने से पहले, उपयोगकर्ताओं को ब्रांड की कहानी, पृष्ठभूमि और मूल्यों जैसी प्रासंगिक जानकारी प्रदान करनी होगी।
चरण 1: ब्रांड की कहानी को समझना और कथा संरचना को निकालना
उद्देश्य: ब्रांड की कहानी की मूल सामग्री की गहन समझ प्राप्त करना और प्रमुख कथा बिंदुओं और भावनात्मक उतार-चढ़ावों की पहचान करना।
कार्रवाई:
उपयोगकर्ता द्वारा प्रदान की गई ब्रांड स्टोरी कॉपी को ध्यानपूर्वक पढ़ें और निम्नलिखित तत्वों की पहचान करें:
- ब्रांड की उत्पत्ति/स्थापना की पृष्ठभूमि
- मूल अवधारणाएँ/मूल्य
- प्रमुख मील के पत्थर वाली घटनाएँ (उत्पाद लॉन्च, पुरस्कार, उपयोगकर्ता की सफलताएँ आदि)
- संस्थापक की कहानी या टीम की कहानी (यदि कोई हो)
-ब्रांड विजन/भविष्य की दिशा
- कहानी को 4-8 कथात्मक बिंदुओं में विभाजित करें, जिनमें से प्रत्येक बिंदु में निम्नलिखित शामिल हों:
- नोड का शीर्षक (संक्षिप्त और प्रभावशाली, 5-10 शब्द)
मुख्य जानकारी (1-2 वाक्यों में संक्षेपित)
- भावनात्मक स्वर (जैसे, स्नेह, दृढ़ संकल्प, सफलता, दृष्टिकोण)
कथा के प्रवाह का निर्माण करें और विभिन्न बिंदुओं के बीच तार्किक संबंधों और भावनात्मक प्रगति का निर्धारण करें।
गुणवत्ता मानक:
- कथा के बिंदुओं की संख्या मध्यम होनी चाहिए (बहुत कम होने से कथा कमजोर लगेगी, बहुत अधिक होने से यह लंबी हो जाएगी)।
- प्रत्येक नोड का एक स्पष्ट उद्देश्य होता है, जिससे सूचना की पुनरावृत्ति से बचा जा सके।
-पूरी कहानी की शुरुआत, विकास, चरमोत्कर्ष और अंत होता है, जिसमें भावनात्मक चरमोत्कर्ष भी शामिल हैं।
चरण 2: बेंचमार्क ब्रांडों पर शोध करें और दृश्य प्रेरणा एकत्र करें
उद्देश्य: ब्रांड की शैली के आधार पर, समान या तुलनीय शैलियों वाली उत्कृष्ट ब्रांड वेबसाइटों की खोज और विश्लेषण करना ताकि दृश्य प्रेरणा और डिजाइन संदर्भ प्राप्त किए जा सकें।
कार्रवाई:
1. बेंचमार्क खोज की दिशा निर्धारित करें:
चरण 1 में निकाले गए ब्रांड टोन कीवर्ड (जैसे "{ब्रांड टोन कीवर्ड}") के आधार पर, एक खोज रणनीति तैयार करें।
खोज के 2-3 आयाम परिभाषित करें:
एक ही उद्योग में मानदंड (उदाहरण के लिए, उत्कृष्ट घरेलू कॉस्मेटिक ब्रांड)
समान विषयों पर आधारित विभिन्न उद्योगों के बीच सहयोग (उदाहरण के लिए, अन्य श्रेणियों के ब्रांड जो "पूर्वी सौंदर्यशास्त्र" पर भी जोर देते हैं, जैसे कि चाय पेय और घरेलू साज-सज्जा)।
पुरस्कार विजेता डिज़ाइन के उदाहरण (जैसे, Awwwards और FWA पर समान शैली वाली पुरस्कार विजेता वेबसाइटें)
2. मिलते-जुलते ब्रांड खोजें और फ़िल्टर करें:
खोज उपकरण का उपयोग करके निम्नलिखित जैसे कीवर्ड खोजें:
"{उद्योग} + ब्रांड वेबसाइट + डिज़ाइन"
"{टोन कीवर्ड} + ब्रांड वेबसाइट + पुरस्कार"
"वर्ष 2024 का सर्वश्रेष्ठ {उद्योग} वेबसाइट डिज़ाइन"
संदर्भ के लिए उपयुक्त दृश्य शैली वाली 3-5 ब्रांड वेबसाइटों का चयन करें।
उच्च स्तरीय रैंकिंग, उत्कृष्ट डिजाइन और स्क्रॉलिंग नैरेटिव फीचर वाली वेबसाइटों को प्राथमिकता दें।
3. बेंचमार्क वेबसाइटों का गहन विश्लेषण:
प्रत्येक बेंचमार्क वेबसाइट का दृश्य विश्लेषण करें और निम्नलिखित तत्वों को रिकॉर्ड करें:
रंग संयोजन: मुख्य रंग, पृष्ठभूमि रंग और एक्सेंट रंग का संयोजन
फ़ॉन्ट का उपयोग: शीर्षकों और मुख्य पाठ के लिए फ़ॉन्ट चयन, आकार क्रम
टाइपोग्राफी की विशेषताएं: व्हाइट स्पेस अनुपात, ग्रिड सिस्टम, अलाइनमेंट।
एनिमेशन शैली: स्क्रॉलिंग ट्रिगर विधि, एनिमेशन अवधि, लंबन प्रभाव
कथा संरचना: अध्याय विभाजन, विषयवस्तु की गति, दृश्य फोकस
प्रमुख पृष्ठों या मॉड्यूल को दृश्य संदर्भों के रूप में निकालें
4. डिजाइन के लिए प्रेरणा लें:
मानक वेबसाइटों की सामान्य विशेषताओं का सारांश प्रस्तुत करें (उदाहरण के लिए, "ये ब्रांड आम तौर पर बड़े पैमाने पर खाली स्थान + सेरिफ़ हेडलाइन + ग्रेडिएंट एनिमेशन का उपयोग करते हैं")।
ऐसी अनूठी डिजाइन तकनीकों की पहचान करें जिनसे सीखा जा सकता है (उदाहरण के लिए, "ब्रांड ए की टाइमलाइन में क्षैतिज स्क्रॉलिंग का उपयोग किया गया है, जो बहुत ही नवीन है")।
डिजाइन में जिन कमियों से बचना चाहिए, उन्हें चिह्नित करें (उदाहरण के लिए, "ब्रांड बी में बहुत अधिक एनिमेशन हैं, जिससे यह भड़कीला दिखता है")।
आगे के डिजाइन कार्यों के लिए मार्गदर्शक सिद्धांतों के रूप में काम करने के लिए 3-5 स्पष्ट डिजाइन प्रेरणाएँ विकसित करें।
गुणवत्ता मानक:
मानक ब्रांडों की संख्या मध्यम (3-5) है, जिसमें उद्योग के समकक्ष और विभिन्न उद्योगों के संदर्भ दोनों शामिल हैं।
यह विश्लेषण व्यापक है, जिसमें रंग योजना, फ़ॉन्ट, टाइपोग्राफी, एनीमेशन और संरचना शामिल हैं।
डिजाइन को ठोस और व्यावहारिक विचारों को प्रेरित करना चाहिए, न कि "उच्च-स्तरीय" अवधारणाओं के अस्पष्ट विचारों को।
डिजाइन के उन तत्वों के बीच स्पष्ट रूप से अंतर करें जो "संदर्भ के योग्य" हैं और जिन्हें "टाला जाना चाहिए"।
अध्ययन पूरा होने के बाद, उपयोगकर्ता से पुष्टि करें कि क्या वे सेवा से संतुष्ट हैं। यदि नहीं, तो उपयोगकर्ता की प्रतिक्रिया के आधार पर तब तक सुधार करें जब तक वे संतुष्ट न हो जाएं।
चरण 3: ब्रांड विज़ुअल स्टाइल सिस्टम को परिभाषित करें
उद्देश्य: बेंचमार्किंग अनुसंधान परिणामों के आधार पर और ब्रांड की अपनी शैली के साथ मिलकर, एक परिष्कृत, सुरुचिपूर्ण और न्यूनतम दृश्य शैली प्रणाली डिजाइन करना।
कार्रवाई:
चरण 1 में किए गए ब्रांड टोन विश्लेषण और चरण 2 में किए गए बेंचमार्किंग अनुसंधान परिणामों के आधार पर, दृश्य टोन कीवर्ड निर्धारित किए गए थे।
रंग योजना डिजाइन:
मुख्य रंग योजना: ब्रांड के चरित्र को दर्शाने वाले 1-2 मुख्य रंग चुनें (रंगों के मान भी प्रदान करें)।
द्वितीयक रंग: परत चढ़ाने और दृश्य अलंकरण के लिए 2-3 द्वितीयक रंगों का उपयोग किया जाता है।
पृष्ठभूमि का रंग: हल्के ऑफ-व्हाइट, हल्के भूरे या गहरे रंग की पृष्ठभूमि का उपयोग करने को प्राथमिकता दें और शुद्ध सफेद (#FFFFFF) रंग से बचें।
एक्सेंट कलर: एक उच्च-विपरीत रंग जिसका उपयोग CTA बटन या महत्वपूर्ण जानकारी को हाइलाइट करने के लिए किया जाता है।
प्रमुख ब्रांडों के रंग संयोजन पैटर्न का संदर्भ लेते हुए, यह सुनिश्चित करें कि रंग संयोजन उद्योग के सौंदर्य मानकों के अनुरूप हो।
फ़ॉन्ट संयोजन चुनें:
शीर्षक का फ़ॉन्ट: ऐसा फ़ॉन्ट चुनें जो डिज़ाइन और ब्रांड पहचान को दर्शाता हो (उदाहरण के लिए, सेरिफ़ फ़ॉन्ट सुरुचिपूर्ण होते हैं, जबकि सैन्स-सेरिफ़ फ़ॉन्ट आधुनिक होते हैं)।
बॉडी टेक्स्ट का फ़ॉन्ट: एक अत्यंत पठनीय फ़ॉन्ट जो शीर्षकों के साथ एक स्तरित कंट्रास्ट बनाता है।
बहुत अधिक प्रचलित सिस्टम फॉन्ट (जैसे एरियल और सिमसन) का उपयोग करने से बचें।
लेआउट सिद्धांतों को परिभाषित करें:
व्हाइट स्पेस रणनीति: पर्याप्त व्हाइट स्पेस परिष्कार का भाव पैदा करता है और सूचनाओं के अतिभार से बचाता है।
ग्रिड प्रणाली: दृश्य व्यवस्था बनाए रखने के लिए एक नियमित ग्रिड लेआउट का उपयोग करती है।
संरेखण: बाएँ या मध्य में संरेखण को प्राथमिकता दें और उचित संरेखण से बचें।
एनीमेशन शैली निर्धारित करें:
पैरालैक्स: विभिन्न स्तरों पर मौजूद तत्व अलग-अलग गति से चलते हैं, जिससे स्थान का अहसास होता है।
फ़ेड-इन एनिमेशन: स्क्रॉल करते समय सामग्री धीरे-धीरे, एक सुंदर लय के साथ दिखाई देती है।
सूक्ष्म एनिमेशन: होवर स्थिति और बटन इंटरैक्शन जैसे विस्तृत एनिमेशन समग्र परिष्कार को बढ़ाते हैं।
एनिमेशन की अवधि: 0.3 और 0.8 सेकंड के बीच नियंत्रित की जाती है, ताकि यह न तो बहुत तेज हो और न ही बहुत धीमी।
प्रमुख ब्रांडों की प्रभावी मोशन ग्राफिक्स तकनीकों से सीखें और पहले से ही पहचानी गई डिजाइन संबंधी कमियों से बचें।
गुणवत्ता मानक:
रंगों का संयोजन ब्रांड की छवि के अनुरूप है, और रंग सामंजस्यपूर्ण हैं तथा भड़कीले नहीं हैं।
ऐसे फॉन्ट चुनें जिनका डिजाइन आकर्षक हो, सस्ते या पुराने फॉन्ट से बचें।
इस लेआउट में पर्याप्त खाली जगह, भरपूर व्हाइट स्पेस और सूचनाओं का स्पष्ट क्रम है।
गति संबंधी प्रभाव संयमित और संतुलित हैं, जो तकनीकी कौशल दिखाने के बजाय कथा को आगे बढ़ाने में सहायक हैं।
यह शैली प्रणाली बेंचमार्किंग अध्ययन में उत्कृष्ट मामलों के समान गुणवत्ता स्तर को बनाए रखती है।
परिभाषा को अंतिम रूप देने के बाद, उपयोगकर्ता से पुष्टि करें कि क्या वे डिलीवरी से संतुष्ट हैं। यदि नहीं, तो उपयोगकर्ता की प्रतिक्रिया के आधार पर तब तक सुधार करें जब तक वे संतुष्ट न हो जाएं।
चरण 4: पृष्ठ संरचना और अंतःक्रिया प्रवाह को डिज़ाइन करें
उद्देश्य: एक सहज कथात्मक लय सुनिश्चित करने के लिए पृष्ठ की समग्र संरचना और स्क्रॉलिंग इंटरैक्शन प्रवाह की योजना बनाना।
कार्रवाई:
पेज की समग्र संरचना को निम्नलिखित मॉड्यूल सहित डिज़ाइन किया गया है:
ओपनिंग मॉड्यूल (हीरो सेक्शन):
ब्रांड नाम/लोगो
एक वाक्य का ब्रांड स्लोगन या मूल अवधारणा
स्क्रॉल करने में मार्गदर्शन के लिए दृश्य संकेत (उदाहरण के लिए, नीचे की ओर तीर का एनिमेशन)।
वैकल्पिक: पूर्ण स्क्रीन पृष्ठभूमि वीडियो या बड़ी छवि
कथात्मक अध्याय मॉड्यूल (चरण 1 में दिए गए नोड्स के आधार पर डिज़ाइन किया गया):
प्रत्येक नोड एक स्वतंत्र दृश्य अध्याय से मेल खाता है।
स्क्रॉलिंग, सेपरेटर, व्हाइट स्पेस या ट्रांजिशन एनिमेशन का उपयोग करके अध्यायों के बीच ट्रांजिशन किया जा सकता है।
प्रत्येक अध्याय में शीर्षक, मुख्य पाठ, चित्र/छवियां और समय-चिह्न (यदि लागू हो) शामिल हैं।
टाइमलाइन मॉड्यूल (वैकल्पिक, विशिष्ट समयसीमा वाले ब्रांडों के लिए उपयुक्त):
ऊर्ध्वाधर या क्षैतिज समय अक्ष
प्रमुख वर्ष/तिथि चिह्नांकन
प्रत्येक समयावधि में घटनाओं का विवरण और उनसे संबंधित चित्र।
उत्पाद/मील का पत्थर प्रदर्शन मॉड्यूल:
ग्रिड या कार्ड लेआउट
उत्पाद की तस्वीरें + संक्षिप्त विवरण
होवर प्रभाव: ज़ूम इन करना, अधिक जानकारी प्रदर्शित करना आदि।
संस्थापक/टीम की कहानी मॉड्यूल (यदि लागू हो):
लोगों की तस्वीरें + कहानी के कैप्शन
आप स्प्लिट-स्क्रीन या फुल-स्क्रीन इमर्सिव लेआउट का उपयोग कर सकते हैं।
समापन खंड:
ब्रांड विज़न या भविष्योन्मुखी कॉपीराइटिंग
CTA बटन (उदाहरण के लिए, "और जानें", "उत्पाद देखें", "हमसे संपर्क करें")
सोशल मीडिया लिंक या संपर्क जानकारी
स्क्रॉलिंग इंटरैक्टिव प्रक्रिया की योजना बनाएं:
प्रत्येक मॉड्यूल के लिए स्क्रॉल ट्रिगर बिंदु निर्धारित करें (उदाहरण के लिए, व्यूपोर्ट के 50% तक स्क्रॉल करने पर एनीमेशन को ट्रिगर करें)।
मॉड्यूल के बीच ट्रांज़िशन इफ़ेक्ट डिज़ाइन करें (फ़ेड इन/आउट, पैरेलैक्स स्क्रॉलिंग, एलिमेंट डिस्प्लेसमेंट आदि)।
स्क्रॉलिंग की स्वाभाविक लय सुनिश्चित करें और अत्यधिक बार-बार होने वाले एनिमेशन से बचें जो आंखों में थकान पैदा कर सकते हैं।
प्रमुख ब्रांडों के प्रभावी इंटरैक्शन डिज़ाइनों का संदर्भ लेते हुए
एक रिस्पॉन्सिव लेआउट रणनीति तैयार करें (ताकि डेस्कटॉप और मोबाइल दोनों उपकरणों पर अच्छा अनुभव सुनिश्चित हो सके)।
गुणवत्ता मानक:
पृष्ठ की संरचना तार्किक रूप से स्पष्ट है, और कथा का प्रवाह स्वाभाविक और सहज है।
सूचनाओं की अव्यवस्था से बचने के लिए प्रत्येक मॉड्यूल का एक स्पष्ट दृश्य फोकस होता है।
स्क्रॉलिंग की गति मध्यम है जिससे उपयोगकर्ताओं को अचानक या थकावट महसूस नहीं होगी।
रिस्पॉन्सिव डिजाइन को ध्यान में रखते हुए बनाया गया है, जो एक बेजोड़ मोबाइल अनुभव सुनिश्चित करता है।
चरण 5: वेबपेज निर्माण निर्देश लिखें।
उद्देश्य: विज़ुअल स्टाइल सिस्टम और पेज संरचना को स्पष्ट और विस्तृत वेबपेज निर्माण निर्देशों में अनुवादित करना ताकि generateWebpage टूल उन्हें निष्पादित कर सके।
कार्रवाई:
संरचित निर्देश लिखें जिनमें निम्नलिखित भाग शामिल हों:
1. समग्र शैली का विवरण:
चरण 3 शैली प्रणाली के आधार पर, स्वाभाविक भाषा का प्रयोग करते हुए दृश्य शैली का विस्तारपूर्वक वर्णन करें।
उदाहरण: "पूर्वी सौंदर्यशास्त्र की याद दिलाने वाली संयमित और सुरुचिपूर्ण शैली को अपनाया गया है। पृष्ठभूमि में हल्के ऑफ-व्हाइट रंग (#F9F7F2) का उपयोग किया गया है, जबकि मुख्य रंग गर्म चाय के रंग (#8B7355) और नाजुक गुलाबी (#E8D5C4) हैं। शीर्षक में सेरिफ़ फ़ॉन्ट का उपयोग किया गया है, जबकि मुख्य पाठ में सैन्स-सेरिफ़ फ़ॉन्ट का उपयोग किया गया है, जिसमें पर्याप्त खाली स्थान एक परिष्कृत अनुभव प्रदान करता है। एनिमेशन में मुख्य रूप से फ़ेड-इन और पैरेलैक्स स्क्रॉलिंग शामिल हैं, जो एक सहज और सुरुचिपूर्ण लय का उपयोग करते हैं।"
2. पृष्ठ संरचना का विवरण:
मॉड्यूल क्रम में पृष्ठ संरचना का वर्णन करें।
उदाहरण: "पृष्ठ की शुरुआत एक फुल-स्क्रीन हीरो सेक्शन से होती है, जिसमें ब्रांड का नाम और नारा ब्रांड की मुख्य दृश्य छवि की पृष्ठभूमि पर प्रदर्शित होता है, साथ ही स्क्रॉल-डाउन का संकेत भी दिया गया है। इसके बाद चार कथात्मक खंड आते हैं, जिनमें से प्रत्येक में एक शीर्षक, मुख्य पाठ और एक छवि होती है, और इनमें बाएं-दाएं कॉलम का वैकल्पिक लेआउट उपयोग किया गया है। फिर एक ऊर्ध्वाधर समयरेखा मॉड्यूल आता है जो ब्रांड के विकास को दर्शाता है। अंत में, एक समापन मॉड्यूल है जिसमें ब्रांड की दृष्टि और एक CTA बटन शामिल है।"
3. बातचीत का विवरण:
प्रमुख इंटरैक्टिव प्रभावों और एनिमेशन का वर्णन करें।
उदाहरण: "स्क्रॉल करते समय, अध्याय की सामग्री फ़ेड-इन एनीमेशन के साथ व्यूपोर्ट में प्रवेश करती है। पृष्ठभूमि छवियां धीमी गति से स्क्रॉल होती हैं, जिससे पैरेलैक्स प्रभाव उत्पन्न होता है। टाइमलाइन नोड्स अपने संबंधित स्थानों पर स्क्रॉल करने पर हाइलाइट हो जाते हैं। प्रोडक्ट कार्ड थोड़े बड़े हो जाते हैं और उन पर माउस ले जाने पर परछाईं दिखाई देती है।"
4. सामग्री प्लेसहोल्डर मार्कर:
स्पष्ट रूप से बताएं कि उपयोगकर्ता द्वारा प्रदान की गई सामग्री से कौन सी सामग्री निकालने की आवश्यकता है।
उदाहरण: "ब्रांड नाम में '{ब्रांड नाम}' का उपयोग किया गया है, नारे में '{ब्रांड नारा}' का उपयोग किया गया है, कथात्मक सामग्री '{ब्रांड स्टोरी कॉपी}' से ली गई है, समयरेखा की घटनाओं को '{मील का पत्थर सूची}' से लिया गया है, और उत्पाद छवियों में '{उत्पाद छवि संसाधन}' का उपयोग किया गया है।"
5. तकनीकी कार्यान्वयन संबंधी सुझाव (वैकल्पिक):
यदि कोई विशेष तकनीकी आवश्यकताएं हों, तो कृपया उनका संक्षिप्त विवरण दें।
उदाहरण: "स्क्रॉल-ट्रिगर एनीमेशन को लागू करने के लिए इंटरसेक्शन ऑब्जर्वर एपीआई का उपयोग करें। रिस्पॉन्सिव लेआउट को लागू करने के लिए सीएसएस ग्रिड का उपयोग करें।"
गुणवत्ता मानक:
निर्देश स्पष्ट और विस्तृत हैं, जिससे एआई डिजाइन के उद्देश्य को सटीक रूप से समझ सकता है।
दृश्य शैली का विस्तारपूर्वक वर्णन किया गया है (रंगों के रंग मान होते हैं, फ़ॉन्ट के प्रकार होते हैं और एनिमेशन की अवधि होती है)।
स्पष्ट रूप से परिभाषित कंटेंट प्लेसहोल्डर्स के साथ, एआई को पता होता है कि डेटा कहां से प्राप्त करना है।
निर्देशों की समग्र अवधि मध्यम है (बहुत कम होने पर अपर्याप्त जानकारी होती है, और बहुत अधिक होने पर गलतफहमी हो सकती है)।
एक इंटरैक्टिव ब्रांड पेज (HTML वेबपेज) आउटपुट करें:
इसमें ब्रांड की पूरी कहानी का विवरण शामिल है।
इसमें स्क्रॉलिंग इंटरैक्शन और एनिमेशन प्रभाव शामिल हैं।
रिस्पॉन्सिव डिज़ाइन, जो डेस्कटॉप और मोबाइल दोनों उपकरणों के अनुकूल है।
दृश्य शैली "उच्च स्तरीय, सुरुचिपूर्ण और न्यूनतम" के मानकों के अनुरूप है।
विषयवस्तु संरचना:
हीरो सेक्शन (ओपनिंग मॉड्यूल)
4-8 कथात्मक अध्याय
समयरेखा/मील का पत्थर मॉड्यूल (यदि लागू हो)
उत्पाद प्रदर्शन मॉड्यूल (यदि लागू हो)
संस्थापक/टीम की कहानी मॉड्यूल (यदि लागू हो)
समापन अनुभाग
गुणवत्ता मानक:
दृश्य गुणवत्ता: सामंजस्यपूर्ण और परिष्कृत रंग योजना, उपयुक्त फ़ॉन्ट चयन, स्पष्ट और सुरुचिपूर्ण लेआउट, और पर्याप्त खाली स्थान।
इंटरैक्टिव अनुभव: सहज स्क्रॉलिंग, स्वाभाविक और संयमित एनिमेशन, त्वरित प्रतिक्रिया और एक अच्छा मोबाइल अनुभव।
विषयवस्तु की पूर्णता: ब्रांड की कहानी में प्रमुख जानकारी शामिल है, इसमें एक स्पष्ट कथात्मक तर्क है, और पाठ और छवियों का सटीक मिलान है।
सौंदर्य संबंधी मानक: समग्र सौंदर्यबोध में परिष्कार, लालित्य और सादगी का भाव झलकना चाहिए, और सस्तेपन या अत्यधिक अलंकरण से बचना चाहिए।
उद्योग मानकीकरण: दृश्य गुणवत्ता मानक ब्रांडों के समान स्तर पर पहुंचती है।
शैली और प्रस्तुति
मूल सौंदर्य सिद्धांत:
एक परिष्कृत भाव: संयमित रंग योजनाओं, उत्कृष्ट टाइपोग्राफी, पर्याप्त खाली स्थान और सूक्ष्म एनीमेशन प्रभावों के माध्यम से निर्मित।
सुंदरता: एक सहज लय, प्राकृतिक बदलाव और अचानक या कठोर दृश्य तत्वों से परहेज।
सरलता: अनावश्यक सजावटों को हटाकर, प्रत्येक तत्व का एक स्पष्ट कार्य और अर्थ होता है।
दृश्य संदर्भ दिशा:
उच्च श्रेणी के ब्रांडों (जैसे एप्पल, एसोप, मुजी) की आधिकारिक वेबसाइटें
डिजाइन पत्रिका की वेबसाइटें (जैसे कि इट्स नाइस दैट, अवार्ड्स पुरस्कार विजेता रचनाएँ)
कला प्रदर्शनी की वेबसाइटें (खाली स्थान और दृश्य लय पर जोर देते हुए)
चरण 2 में अध्ययन की गई मानक ब्रांड वेबसाइटें
इन शैलियों से बचें:
अत्यधिक सजावटी और अव्यवस्थित "ताओबाओ शैली"
अत्यधिक दिखावटी, उच्च प्रभाव वाली "दिखावटी शैली"
रंगों का बेमेल संयोजन और अव्यवस्थित लेआउट एक "सस्ती" छवि पेश करते हैं।
अति रूढ़िवादी और प्रेरणाहीन "टेम्प्लेट शैली"
विवरण
द्वारा अनुशंसित
nene@YouMind
हमें यह कौशल क्यों पसंद है
यह कौशल ब्रांड कहानी को एक इमर्सिव विज़ुअल मैगज़ीन में बदलता है, सावधानीपूर्वक टाइपोग्राफी, सुंदर एनिमेशन और सहज कथा के साथ एक उच्च-स्तरीय, सरल इंटरैक्टिव वेबपेज बनाता है, जिससे उपयोगकर्ता ब्रांड के आकर्षण को गहराई से महसूस कर सकते हैं।
ब्रांड स्टोरी की कॉपी और सामग्री को उच्च सौंदर्य के साथ स्क्रॉलिंग कथात्मक वेबपेज में बदलें, जो दृश्य डिज़ाइन और इंटरैक्टिव प्रभावों के माध्यम से ब्रांड मूल्य और भावना को संप्रेषित करता है।
संबंधित कौशल
सभी देखें
वेबपेजखोजपूर्ण व्याख्या पेज निर्माता
एक रिपोर्ट समझाती है। एक पेज लोगों को खुद पता लगाने देता है। YouMind पहले से ही वेबपेज बना सकता है। खोजपूर्ण व्याख्या पेज निर्माता तय करता है कि क्या बनाना है — यह एक शोध, डेटासेट या विषय को एक ही इंटरैक्टिव पेज में बदल देता है, जो न्यूज़रूम ग्राफिक्स और खोजपूर्ण व्याख्याओं की परंपरा में होता है: स्क्रॉल-आधारित कथा, वास्तविक चार्ट, नियंत्रण जिन्हें आप हिला सकते हैं, स्रोत जिन्हें आप जाँच सकते हैं। यह कोड करने से पहले योजना बनाता है। आप पहले एक निर्माण योजना को मंजूरी देते हैं: वह एक प्रश्न जिसका उत्तर पेज देता है, रहस्योद्घाटन — वह क्षण जब पाठक को "ओह" महसूस होता है — पाँच से आठ खंडों वाली स्क्रॉल रीढ़, दो से चार इंटरैक्शन जिनमें से प्रत्येक को इस बात से उचित ठहराया जाता है कि पाठक उसे हिलाने से क्या सीखता है, और एक डेटा अनुबंध जिसमें हर संख्या और उसका स्रोत सूचीबद्ध होता है। फिर यह एक स्व-निहित HTML फ़ाइल बनाता है जिसमें कोई निर्माण चरण नहीं होता। सिमेंटिक मार्कअप। सभी संख्याएँ शीर्ष पर एक अकेले संपादन योग्य DATA स्थिरांक में होती हैं। स्क्रॉल रिवील जो फोन पर टूटते नहीं हैं। हर नियंत्रण एक वास्तविक, कीबोर्ड-संचालित फ़ॉर्म तत्व है जिसमें उसके वर्तमान मूल्य का वर्णन करने वाला लाइव टेक्स्ट होता है। अभिगम्यता बाहर से जोड़ने के बजाय अंतर्निर्मित होती है: 4.5:1 कंट्रास्ट, दृश्य फ़ोकस रिंग, हर जगह ऑल्ट टेक्स्ट, रंग अकेले किसी अर्थ को नहीं दर्शाता, कम-गति का सम्मान, और 360px से रेस्पॉन्सिव। सौंपने से पहले, यह एक पाँच-बिंदु आत्म-समीक्षा करता है और परिणाम ईमानदारी से रिपोर्ट करता है: क्या रिवील वास्तव में प्रभाव डालता है, क्या JavaScript बंद होने पर भी पृष्ठ पठनीय है, क्या टैब क्रम सही है, क्या हर संख्या अनुरेखणीय है, क्या कुछ ऐसा एनिमेट हो रहा है जिसे पाठक रोकना चाहेगा। दो नियम जिन्हें यह कभी नहीं तोड़ेगा: यह कभी भी चार्ट को अच्छा दिखाने के लिए डेटा नहीं बनाता, और यह आपको बताता है जब आपके आंकड़े आपके ड्राफ्ट से विरोधाभासी होते हैं। उन शोधकर्ताओं, विश्लेषकों, पत्रकारों, शिक्षकों, स्वतंत्र संस्थापकों और सलाहकारों के लिए जो चाहते हैं कि उनके काम को सरसरी तौर पर नहीं, बल्कि गहराई से खोजा जाए।
वेबपेजसॉफ्ट लाइट डे उकियो वेबपेज
सॉफ्ट लाइट डे स्टाइल के लिए वेब डिज़ाइन सिस्टम: हल्का आसमानी नीला कैनवास (#ebf5ff), फिक्स्ड वेट 500 के साथ विशाल डिस्प्ले टेक्स्ट (रेस्पॉन्सिव रूप से अधिकतम 148px), 32px गोल कॉर्नर कार्ड + 9999px पिल, लगभग काला #181d27 सॉलिड CTA, पेस्टल रंग ब्लॉक और फ्लोटिंग 3D क्ले-टेक्सचर इलस्ट्रेशन। गहराई केवल कैनवास से कार्ड तक रंग-स्तर शिफ्ट द्वारा, कंटेंट कार्ड पर जीरो शैडो। 「सॉफ्ट लाइट डे स्टाइल」「3D इलस्ट्रेशन लैंडिंग पेज」「हल्का नीला कैनवास」「गोल कॉर्नर कार्ड स्टाइल」「SaaS वेबसाइट」「Linear/Framer स्टाइल」 जैसी आवश्यकताओं के लिए उपयुक्त, अंतर्निहित एक्सेसिबिलिटी और रेस्पॉन्सिव कंस्ट्रेंट्स के साथ।
वेबपेजFashion Creative Design वेबपेज
फ़ैशन एडिटोरियल पोस्टर शैली की वेब डिज़ाइन प्रणाली: गर्म क्रीम रंग का पेपर कैनवास (#fffef7), 300 फ़ॉन्ट वज़न वाले बड़े शीर्षक (64–84px), फुल-ब्लीड फ़ोटोग्राफ़ी, शून्य छाया, कार्ड के सीधे कोने + 1440px पिल-आकार के बटन। यह 'फ़ैशन डिज़ाइन शैली', 'मैगज़ीन लेआउट', 'पोस्टर शैली', 'आर्ट पुस्तिका वेबपेज', 'स्टूडियो पोर्टफोलियो', 'गैलरी पेज' आदि आवश्यकताओं के लिए उपयुक्त है, और किसी भी सामग्री को उन्नत फ़ैशन एडिटोरियल शैली में बदल सकता है।
ब्रांड स्टोरी वेबसाइट
निर्देश
मुख्य मिशन
पृष्ठभूमि: ब्रांड की कहानियाँ अक्सर टेक्स्ट दस्तावेज़ों या पॉवरपॉइंट प्रस्तुतियों में मौजूद होती हैं, जिनमें आकर्षक प्रस्तुति शैली का अभाव होता है। एक उत्कृष्ट ब्रांड पेज एक आकर्षक पत्रिका की तरह होना चाहिए जिसे स्क्रॉल किया जा सके। इसमें सावधानीपूर्वक डिज़ाइन किया गया लेआउट, एनिमेशन और लय का उपयोग किया जाना चाहिए ताकि आगंतुक ब्राउज़ करते समय ब्रांड के दर्शन को स्वाभाविक रूप से समझ सकें और ब्रांड के भाव को अनुभव कर सकें।
विशिष्ट उद्देश्य:
ब्रांड की कहानी को 4-8 कथात्मक बिंदुओं में विभाजित किया गया है, जिसमें प्रत्येक बिंदु एक दृश्य अध्याय से मेल खाता है।
विज़ुअल प्रेरणा और डिज़ाइन संदर्भ प्राप्त करने के लिए बेंचमार्क ब्रांड वेबसाइटों का अध्ययन करें।
एक परिष्कृत दृश्य शैली प्रणाली (रंग योजना, टाइपोग्राफी, लेआउट, गति प्रभाव) डिजाइन करें जो ब्रांड की पहचान के अनुरूप हो।
एक स्क्रॉलिंग इंटरैक्टिव वेबपेज बनाएं जिसमें टाइमलाइन, माइलस्टोन और उत्पाद विकास जैसे मॉड्यूल शामिल हों।
यह सुनिश्चित करें कि पेज देखने में परिष्कृत, सुरुचिपूर्ण और सरल लगे, सस्ते या अत्यधिक सजावटी डिजाइनों से बचें।
मुख्य बाधाएँ:
दृश्य शैली ब्रांड के भाव के अनुरूप होनी चाहिए (उदाहरण के लिए, तकनीकी ब्रांड → शांत और संयमित, सौंदर्य ब्रांड → गर्मजोशी और सौम्य)।
एनीमेशन इफेक्ट्स संयमित और संतुलित होने चाहिए, जो तकनीकी कौशल दिखाने के बजाय कहानी को आगे बढ़ाने में सहायक हों।
बेहतर उपयोगकर्ता अनुभव सुनिश्चित करने के लिए पेज लोडिंग की गति और सुगम इंटरैक्शन आवश्यक हैं।
कार्य को पूरा करने से पहले, उपयोगकर्ताओं को ब्रांड की कहानी, पृष्ठभूमि और मूल्यों जैसी प्रासंगिक जानकारी प्रदान करनी होगी।
चरण 1: ब्रांड की कहानी को समझना और कथा संरचना को निकालना
उद्देश्य: ब्रांड की कहानी की मूल सामग्री की गहन समझ प्राप्त करना और प्रमुख कथा बिंदुओं और भावनात्मक उतार-चढ़ावों की पहचान करना।
कार्रवाई:
उपयोगकर्ता द्वारा प्रदान की गई ब्रांड स्टोरी कॉपी को ध्यानपूर्वक पढ़ें और निम्नलिखित तत्वों की पहचान करें:
- ब्रांड की उत्पत्ति/स्थापना की पृष्ठभूमि
- मूल अवधारणाएँ/मूल्य
- प्रमुख मील के पत्थर वाली घटनाएँ (उत्पाद लॉन्च, पुरस्कार, उपयोगकर्ता की सफलताएँ आदि)
- संस्थापक की कहानी या टीम की कहानी (यदि कोई हो)
-ब्रांड विजन/भविष्य की दिशा
- कहानी को 4-8 कथात्मक बिंदुओं में विभाजित करें, जिनमें से प्रत्येक बिंदु में निम्नलिखित शामिल हों:
- नोड का शीर्षक (संक्षिप्त और प्रभावशाली, 5-10 शब्द)
मुख्य जानकारी (1-2 वाक्यों में संक्षेपित)
- भावनात्मक स्वर (जैसे, स्नेह, दृढ़ संकल्प, सफलता, दृष्टिकोण)
कथा के प्रवाह का निर्माण करें और विभिन्न बिंदुओं के बीच तार्किक संबंधों और भावनात्मक प्रगति का निर्धारण करें।
गुणवत्ता मानक:
- कथा के बिंदुओं की संख्या मध्यम होनी चाहिए (बहुत कम होने से कथा कमजोर लगेगी, बहुत अधिक होने से यह लंबी हो जाएगी)।
- प्रत्येक नोड का एक स्पष्ट उद्देश्य होता है, जिससे सूचना की पुनरावृत्ति से बचा जा सके।
-पूरी कहानी की शुरुआत, विकास, चरमोत्कर्ष और अंत होता है, जिसमें भावनात्मक चरमोत्कर्ष भी शामिल हैं।
चरण 2: बेंचमार्क ब्रांडों पर शोध करें और दृश्य प्रेरणा एकत्र करें
उद्देश्य: ब्रांड की शैली के आधार पर, समान या तुलनीय शैलियों वाली उत्कृष्ट ब्रांड वेबसाइटों की खोज और विश्लेषण करना ताकि दृश्य प्रेरणा और डिजाइन संदर्भ प्राप्त किए जा सकें।
कार्रवाई:
1. बेंचमार्क खोज की दिशा निर्धारित करें:
चरण 1 में निकाले गए ब्रांड टोन कीवर्ड (जैसे "{ब्रांड टोन कीवर्ड}") के आधार पर, एक खोज रणनीति तैयार करें।
खोज के 2-3 आयाम परिभाषित करें:
एक ही उद्योग में मानदंड (उदाहरण के लिए, उत्कृष्ट घरेलू कॉस्मेटिक ब्रांड)
समान विषयों पर आधारित विभिन्न उद्योगों के बीच सहयोग (उदाहरण के लिए, अन्य श्रेणियों के ब्रांड जो "पूर्वी सौंदर्यशास्त्र" पर भी जोर देते हैं, जैसे कि चाय पेय और घरेलू साज-सज्जा)।
पुरस्कार विजेता डिज़ाइन के उदाहरण (जैसे, Awwwards और FWA पर समान शैली वाली पुरस्कार विजेता वेबसाइटें)
2. मिलते-जुलते ब्रांड खोजें और फ़िल्टर करें:
खोज उपकरण का उपयोग करके निम्नलिखित जैसे कीवर्ड खोजें:
"{उद्योग} + ब्रांड वेबसाइट + डिज़ाइन"
"{टोन कीवर्ड} + ब्रांड वेबसाइट + पुरस्कार"
"वर्ष 2024 का सर्वश्रेष्ठ {उद्योग} वेबसाइट डिज़ाइन"
संदर्भ के लिए उपयुक्त दृश्य शैली वाली 3-5 ब्रांड वेबसाइटों का चयन करें।
उच्च स्तरीय रैंकिंग, उत्कृष्ट डिजाइन और स्क्रॉलिंग नैरेटिव फीचर वाली वेबसाइटों को प्राथमिकता दें।
3. बेंचमार्क वेबसाइटों का गहन विश्लेषण:
प्रत्येक बेंचमार्क वेबसाइट का दृश्य विश्लेषण करें और निम्नलिखित तत्वों को रिकॉर्ड करें:
रंग संयोजन: मुख्य रंग, पृष्ठभूमि रंग और एक्सेंट रंग का संयोजन
फ़ॉन्ट का उपयोग: शीर्षकों और मुख्य पाठ के लिए फ़ॉन्ट चयन, आकार क्रम
टाइपोग्राफी की विशेषताएं: व्हाइट स्पेस अनुपात, ग्रिड सिस्टम, अलाइनमेंट।
एनिमेशन शैली: स्क्रॉलिंग ट्रिगर विधि, एनिमेशन अवधि, लंबन प्रभाव
कथा संरचना: अध्याय विभाजन, विषयवस्तु की गति, दृश्य फोकस
प्रमुख पृष्ठों या मॉड्यूल को दृश्य संदर्भों के रूप में निकालें
4. डिजाइन के लिए प्रेरणा लें:
मानक वेबसाइटों की सामान्य विशेषताओं का सारांश प्रस्तुत करें (उदाहरण के लिए, "ये ब्रांड आम तौर पर बड़े पैमाने पर खाली स्थान + सेरिफ़ हेडलाइन + ग्रेडिएंट एनिमेशन का उपयोग करते हैं")।
ऐसी अनूठी डिजाइन तकनीकों की पहचान करें जिनसे सीखा जा सकता है (उदाहरण के लिए, "ब्रांड ए की टाइमलाइन में क्षैतिज स्क्रॉलिंग का उपयोग किया गया है, जो बहुत ही नवीन है")।
डिजाइन में जिन कमियों से बचना चाहिए, उन्हें चिह्नित करें (उदाहरण के लिए, "ब्रांड बी में बहुत अधिक एनिमेशन हैं, जिससे यह भड़कीला दिखता है")।
आगे के डिजाइन कार्यों के लिए मार्गदर्शक सिद्धांतों के रूप में काम करने के लिए 3-5 स्पष्ट डिजाइन प्रेरणाएँ विकसित करें।
गुणवत्ता मानक:
मानक ब्रांडों की संख्या मध्यम (3-5) है, जिसमें उद्योग के समकक्ष और विभिन्न उद्योगों के संदर्भ दोनों शामिल हैं।
यह विश्लेषण व्यापक है, जिसमें रंग योजना, फ़ॉन्ट, टाइपोग्राफी, एनीमेशन और संरचना शामिल हैं।
डिजाइन को ठोस और व्यावहारिक विचारों को प्रेरित करना चाहिए, न कि "उच्च-स्तरीय" अवधारणाओं के अस्पष्ट विचारों को।
डिजाइन के उन तत्वों के बीच स्पष्ट रूप से अंतर करें जो "संदर्भ के योग्य" हैं और जिन्हें "टाला जाना चाहिए"।
अध्ययन पूरा होने के बाद, उपयोगकर्ता से पुष्टि करें कि क्या वे सेवा से संतुष्ट हैं। यदि नहीं, तो उपयोगकर्ता की प्रतिक्रिया के आधार पर तब तक सुधार करें जब तक वे संतुष्ट न हो जाएं।
चरण 3: ब्रांड विज़ुअल स्टाइल सिस्टम को परिभाषित करें
उद्देश्य: बेंचमार्किंग अनुसंधान परिणामों के आधार पर और ब्रांड की अपनी शैली के साथ मिलकर, एक परिष्कृत, सुरुचिपूर्ण और न्यूनतम दृश्य शैली प्रणाली डिजाइन करना।
कार्रवाई:
चरण 1 में किए गए ब्रांड टोन विश्लेषण और चरण 2 में किए गए बेंचमार्किंग अनुसंधान परिणामों के आधार पर, दृश्य टोन कीवर्ड निर्धारित किए गए थे।
रंग योजना डिजाइन:
मुख्य रंग योजना: ब्रांड के चरित्र को दर्शाने वाले 1-2 मुख्य रंग चुनें (रंगों के मान भी प्रदान करें)।
द्वितीयक रंग: परत चढ़ाने और दृश्य अलंकरण के लिए 2-3 द्वितीयक रंगों का उपयोग किया जाता है।
पृष्ठभूमि का रंग: हल्के ऑफ-व्हाइट, हल्के भूरे या गहरे रंग की पृष्ठभूमि का उपयोग करने को प्राथमिकता दें और शुद्ध सफेद (#FFFFFF) रंग से बचें।
एक्सेंट कलर: एक उच्च-विपरीत रंग जिसका उपयोग CTA बटन या महत्वपूर्ण जानकारी को हाइलाइट करने के लिए किया जाता है।
प्रमुख ब्रांडों के रंग संयोजन पैटर्न का संदर्भ लेते हुए, यह सुनिश्चित करें कि रंग संयोजन उद्योग के सौंदर्य मानकों के अनुरूप हो।
फ़ॉन्ट संयोजन चुनें:
शीर्षक का फ़ॉन्ट: ऐसा फ़ॉन्ट चुनें जो डिज़ाइन और ब्रांड पहचान को दर्शाता हो (उदाहरण के लिए, सेरिफ़ फ़ॉन्ट सुरुचिपूर्ण होते हैं, जबकि सैन्स-सेरिफ़ फ़ॉन्ट आधुनिक होते हैं)।
बॉडी टेक्स्ट का फ़ॉन्ट: एक अत्यंत पठनीय फ़ॉन्ट जो शीर्षकों के साथ एक स्तरित कंट्रास्ट बनाता है।
बहुत अधिक प्रचलित सिस्टम फॉन्ट (जैसे एरियल और सिमसन) का उपयोग करने से बचें।
लेआउट सिद्धांतों को परिभाषित करें:
व्हाइट स्पेस रणनीति: पर्याप्त व्हाइट स्पेस परिष्कार का भाव पैदा करता है और सूचनाओं के अतिभार से बचाता है।
ग्रिड प्रणाली: दृश्य व्यवस्था बनाए रखने के लिए एक नियमित ग्रिड लेआउट का उपयोग करती है।
संरेखण: बाएँ या मध्य में संरेखण को प्राथमिकता दें और उचित संरेखण से बचें।
एनीमेशन शैली निर्धारित करें:
पैरालैक्स: विभिन्न स्तरों पर मौजूद तत्व अलग-अलग गति से चलते हैं, जिससे स्थान का अहसास होता है।
फ़ेड-इन एनिमेशन: स्क्रॉल करते समय सामग्री धीरे-धीरे, एक सुंदर लय के साथ दिखाई देती है।
सूक्ष्म एनिमेशन: होवर स्थिति और बटन इंटरैक्शन जैसे विस्तृत एनिमेशन समग्र परिष्कार को बढ़ाते हैं।
एनिमेशन की अवधि: 0.3 और 0.8 सेकंड के बीच नियंत्रित की जाती है, ताकि यह न तो बहुत तेज हो और न ही बहुत धीमी।
प्रमुख ब्रांडों की प्रभावी मोशन ग्राफिक्स तकनीकों से सीखें और पहले से ही पहचानी गई डिजाइन संबंधी कमियों से बचें।
गुणवत्ता मानक:
रंगों का संयोजन ब्रांड की छवि के अनुरूप है, और रंग सामंजस्यपूर्ण हैं तथा भड़कीले नहीं हैं।
ऐसे फॉन्ट चुनें जिनका डिजाइन आकर्षक हो, सस्ते या पुराने फॉन्ट से बचें।
इस लेआउट में पर्याप्त खाली जगह, भरपूर व्हाइट स्पेस और सूचनाओं का स्पष्ट क्रम है।
गति संबंधी प्रभाव संयमित और संतुलित हैं, जो तकनीकी कौशल दिखाने के बजाय कथा को आगे बढ़ाने में सहायक हैं।
यह शैली प्रणाली बेंचमार्किंग अध्ययन में उत्कृष्ट मामलों के समान गुणवत्ता स्तर को बनाए रखती है।
परिभाषा को अंतिम रूप देने के बाद, उपयोगकर्ता से पुष्टि करें कि क्या वे डिलीवरी से संतुष्ट हैं। यदि नहीं, तो उपयोगकर्ता की प्रतिक्रिया के आधार पर तब तक सुधार करें जब तक वे संतुष्ट न हो जाएं।
चरण 4: पृष्ठ संरचना और अंतःक्रिया प्रवाह को डिज़ाइन करें
उद्देश्य: एक सहज कथात्मक लय सुनिश्चित करने के लिए पृष्ठ की समग्र संरचना और स्क्रॉलिंग इंटरैक्शन प्रवाह की योजना बनाना।
कार्रवाई:
पेज की समग्र संरचना को निम्नलिखित मॉड्यूल सहित डिज़ाइन किया गया है:
ओपनिंग मॉड्यूल (हीरो सेक्शन):
ब्रांड नाम/लोगो
एक वाक्य का ब्रांड स्लोगन या मूल अवधारणा
स्क्रॉल करने में मार्गदर्शन के लिए दृश्य संकेत (उदाहरण के लिए, नीचे की ओर तीर का एनिमेशन)।
वैकल्पिक: पूर्ण स्क्रीन पृष्ठभूमि वीडियो या बड़ी छवि
कथात्मक अध्याय मॉड्यूल (चरण 1 में दिए गए नोड्स के आधार पर डिज़ाइन किया गया):
प्रत्येक नोड एक स्वतंत्र दृश्य अध्याय से मेल खाता है।
स्क्रॉलिंग, सेपरेटर, व्हाइट स्पेस या ट्रांजिशन एनिमेशन का उपयोग करके अध्यायों के बीच ट्रांजिशन किया जा सकता है।
प्रत्येक अध्याय में शीर्षक, मुख्य पाठ, चित्र/छवियां और समय-चिह्न (यदि लागू हो) शामिल हैं।
टाइमलाइन मॉड्यूल (वैकल्पिक, विशिष्ट समयसीमा वाले ब्रांडों के लिए उपयुक्त):
ऊर्ध्वाधर या क्षैतिज समय अक्ष
प्रमुख वर्ष/तिथि चिह्नांकन
प्रत्येक समयावधि में घटनाओं का विवरण और उनसे संबंधित चित्र।
उत्पाद/मील का पत्थर प्रदर्शन मॉड्यूल:
ग्रिड या कार्ड लेआउट
उत्पाद की तस्वीरें + संक्षिप्त विवरण
होवर प्रभाव: ज़ूम इन करना, अधिक जानकारी प्रदर्शित करना आदि।
संस्थापक/टीम की कहानी मॉड्यूल (यदि लागू हो):
लोगों की तस्वीरें + कहानी के कैप्शन
आप स्प्लिट-स्क्रीन या फुल-स्क्रीन इमर्सिव लेआउट का उपयोग कर सकते हैं।
समापन खंड:
ब्रांड विज़न या भविष्योन्मुखी कॉपीराइटिंग
CTA बटन (उदाहरण के लिए, "और जानें", "उत्पाद देखें", "हमसे संपर्क करें")
सोशल मीडिया लिंक या संपर्क जानकारी
स्क्रॉलिंग इंटरैक्टिव प्रक्रिया की योजना बनाएं:
प्रत्येक मॉड्यूल के लिए स्क्रॉल ट्रिगर बिंदु निर्धारित करें (उदाहरण के लिए, व्यूपोर्ट के 50% तक स्क्रॉल करने पर एनीमेशन को ट्रिगर करें)।
मॉड्यूल के बीच ट्रांज़िशन इफ़ेक्ट डिज़ाइन करें (फ़ेड इन/आउट, पैरेलैक्स स्क्रॉलिंग, एलिमेंट डिस्प्लेसमेंट आदि)।
स्क्रॉलिंग की स्वाभाविक लय सुनिश्चित करें और अत्यधिक बार-बार होने वाले एनिमेशन से बचें जो आंखों में थकान पैदा कर सकते हैं।
प्रमुख ब्रांडों के प्रभावी इंटरैक्शन डिज़ाइनों का संदर्भ लेते हुए
एक रिस्पॉन्सिव लेआउट रणनीति तैयार करें (ताकि डेस्कटॉप और मोबाइल दोनों उपकरणों पर अच्छा अनुभव सुनिश्चित हो सके)।
गुणवत्ता मानक:
पृष्ठ की संरचना तार्किक रूप से स्पष्ट है, और कथा का प्रवाह स्वाभाविक और सहज है।
सूचनाओं की अव्यवस्था से बचने के लिए प्रत्येक मॉड्यूल का एक स्पष्ट दृश्य फोकस होता है।
स्क्रॉलिंग की गति मध्यम है जिससे उपयोगकर्ताओं को अचानक या थकावट महसूस नहीं होगी।
रिस्पॉन्सिव डिजाइन को ध्यान में रखते हुए बनाया गया है, जो एक बेजोड़ मोबाइल अनुभव सुनिश्चित करता है।
चरण 5: वेबपेज निर्माण निर्देश लिखें।
उद्देश्य: विज़ुअल स्टाइल सिस्टम और पेज संरचना को स्पष्ट और विस्तृत वेबपेज निर्माण निर्देशों में अनुवादित करना ताकि generateWebpage टूल उन्हें निष्पादित कर सके।
कार्रवाई:
संरचित निर्देश लिखें जिनमें निम्नलिखित भाग शामिल हों:
1. समग्र शैली का विवरण:
चरण 3 शैली प्रणाली के आधार पर, स्वाभाविक भाषा का प्रयोग करते हुए दृश्य शैली का विस्तारपूर्वक वर्णन करें।
उदाहरण: "पूर्वी सौंदर्यशास्त्र की याद दिलाने वाली संयमित और सुरुचिपूर्ण शैली को अपनाया गया है। पृष्ठभूमि में हल्के ऑफ-व्हाइट रंग (#F9F7F2) का उपयोग किया गया है, जबकि मुख्य रंग गर्म चाय के रंग (#8B7355) और नाजुक गुलाबी (#E8D5C4) हैं। शीर्षक में सेरिफ़ फ़ॉन्ट का उपयोग किया गया है, जबकि मुख्य पाठ में सैन्स-सेरिफ़ फ़ॉन्ट का उपयोग किया गया है, जिसमें पर्याप्त खाली स्थान एक परिष्कृत अनुभव प्रदान करता है। एनिमेशन में मुख्य रूप से फ़ेड-इन और पैरेलैक्स स्क्रॉलिंग शामिल हैं, जो एक सहज और सुरुचिपूर्ण लय का उपयोग करते हैं।"
2. पृष्ठ संरचना का विवरण:
मॉड्यूल क्रम में पृष्ठ संरचना का वर्णन करें।
उदाहरण: "पृष्ठ की शुरुआत एक फुल-स्क्रीन हीरो सेक्शन से होती है, जिसमें ब्रांड का नाम और नारा ब्रांड की मुख्य दृश्य छवि की पृष्ठभूमि पर प्रदर्शित होता है, साथ ही स्क्रॉल-डाउन का संकेत भी दिया गया है। इसके बाद चार कथात्मक खंड आते हैं, जिनमें से प्रत्येक में एक शीर्षक, मुख्य पाठ और एक छवि होती है, और इनमें बाएं-दाएं कॉलम का वैकल्पिक लेआउट उपयोग किया गया है। फिर एक ऊर्ध्वाधर समयरेखा मॉड्यूल आता है जो ब्रांड के विकास को दर्शाता है। अंत में, एक समापन मॉड्यूल है जिसमें ब्रांड की दृष्टि और एक CTA बटन शामिल है।"
3. बातचीत का विवरण:
प्रमुख इंटरैक्टिव प्रभावों और एनिमेशन का वर्णन करें।
उदाहरण: "स्क्रॉल करते समय, अध्याय की सामग्री फ़ेड-इन एनीमेशन के साथ व्यूपोर्ट में प्रवेश करती है। पृष्ठभूमि छवियां धीमी गति से स्क्रॉल होती हैं, जिससे पैरेलैक्स प्रभाव उत्पन्न होता है। टाइमलाइन नोड्स अपने संबंधित स्थानों पर स्क्रॉल करने पर हाइलाइट हो जाते हैं। प्रोडक्ट कार्ड थोड़े बड़े हो जाते हैं और उन पर माउस ले जाने पर परछाईं दिखाई देती है।"
4. सामग्री प्लेसहोल्डर मार्कर:
स्पष्ट रूप से बताएं कि उपयोगकर्ता द्वारा प्रदान की गई सामग्री से कौन सी सामग्री निकालने की आवश्यकता है।
उदाहरण: "ब्रांड नाम में '{ब्रांड नाम}' का उपयोग किया गया है, नारे में '{ब्रांड नारा}' का उपयोग किया गया है, कथात्मक सामग्री '{ब्रांड स्टोरी कॉपी}' से ली गई है, समयरेखा की घटनाओं को '{मील का पत्थर सूची}' से लिया गया है, और उत्पाद छवियों में '{उत्पाद छवि संसाधन}' का उपयोग किया गया है।"
5. तकनीकी कार्यान्वयन संबंधी सुझाव (वैकल्पिक):
यदि कोई विशेष तकनीकी आवश्यकताएं हों, तो कृपया उनका संक्षिप्त विवरण दें।
उदाहरण: "स्क्रॉल-ट्रिगर एनीमेशन को लागू करने के लिए इंटरसेक्शन ऑब्जर्वर एपीआई का उपयोग करें। रिस्पॉन्सिव लेआउट को लागू करने के लिए सीएसएस ग्रिड का उपयोग करें।"
गुणवत्ता मानक:
निर्देश स्पष्ट और विस्तृत हैं, जिससे एआई डिजाइन के उद्देश्य को सटीक रूप से समझ सकता है।
दृश्य शैली का विस्तारपूर्वक वर्णन किया गया है (रंगों के रंग मान होते हैं, फ़ॉन्ट के प्रकार होते हैं और एनिमेशन की अवधि होती है)।
स्पष्ट रूप से परिभाषित कंटेंट प्लेसहोल्डर्स के साथ, एआई को पता होता है कि डेटा कहां से प्राप्त करना है।
निर्देशों की समग्र अवधि मध्यम है (बहुत कम होने पर अपर्याप्त जानकारी होती है, और बहुत अधिक होने पर गलतफहमी हो सकती है)।
एक इंटरैक्टिव ब्रांड पेज (HTML वेबपेज) आउटपुट करें:
इसमें ब्रांड की पूरी कहानी का विवरण शामिल है।
इसमें स्क्रॉलिंग इंटरैक्शन और एनिमेशन प्रभाव शामिल हैं।
रिस्पॉन्सिव डिज़ाइन, जो डेस्कटॉप और मोबाइल दोनों उपकरणों के अनुकूल है।
दृश्य शैली "उच्च स्तरीय, सुरुचिपूर्ण और न्यूनतम" के मानकों के अनुरूप है।
विषयवस्तु संरचना:
हीरो सेक्शन (ओपनिंग मॉड्यूल)
4-8 कथात्मक अध्याय
समयरेखा/मील का पत्थर मॉड्यूल (यदि लागू हो)
उत्पाद प्रदर्शन मॉड्यूल (यदि लागू हो)
संस्थापक/टीम की कहानी मॉड्यूल (यदि लागू हो)
समापन अनुभाग
गुणवत्ता मानक:
दृश्य गुणवत्ता: सामंजस्यपूर्ण और परिष्कृत रंग योजना, उपयुक्त फ़ॉन्ट चयन, स्पष्ट और सुरुचिपूर्ण लेआउट, और पर्याप्त खाली स्थान।
इंटरैक्टिव अनुभव: सहज स्क्रॉलिंग, स्वाभाविक और संयमित एनिमेशन, त्वरित प्रतिक्रिया और एक अच्छा मोबाइल अनुभव।
विषयवस्तु की पूर्णता: ब्रांड की कहानी में प्रमुख जानकारी शामिल है, इसमें एक स्पष्ट कथात्मक तर्क है, और पाठ और छवियों का सटीक मिलान है।
सौंदर्य संबंधी मानक: समग्र सौंदर्यबोध में परिष्कार, लालित्य और सादगी का भाव झलकना चाहिए, और सस्तेपन या अत्यधिक अलंकरण से बचना चाहिए।
उद्योग मानकीकरण: दृश्य गुणवत्ता मानक ब्रांडों के समान स्तर पर पहुंचती है।
शैली और प्रस्तुति
मूल सौंदर्य सिद्धांत:
एक परिष्कृत भाव: संयमित रंग योजनाओं, उत्कृष्ट टाइपोग्राफी, पर्याप्त खाली स्थान और सूक्ष्म एनीमेशन प्रभावों के माध्यम से निर्मित।
सुंदरता: एक सहज लय, प्राकृतिक बदलाव और अचानक या कठोर दृश्य तत्वों से परहेज।
सरलता: अनावश्यक सजावटों को हटाकर, प्रत्येक तत्व का एक स्पष्ट कार्य और अर्थ होता है।
दृश्य संदर्भ दिशा:
उच्च श्रेणी के ब्रांडों (जैसे एप्पल, एसोप, मुजी) की आधिकारिक वेबसाइटें
डिजाइन पत्रिका की वेबसाइटें (जैसे कि इट्स नाइस दैट, अवार्ड्स पुरस्कार विजेता रचनाएँ)
कला प्रदर्शनी की वेबसाइटें (खाली स्थान और दृश्य लय पर जोर देते हुए)
चरण 2 में अध्ययन की गई मानक ब्रांड वेबसाइटें
इन शैलियों से बचें:
अत्यधिक सजावटी और अव्यवस्थित "ताओबाओ शैली"
अत्यधिक दिखावटी, उच्च प्रभाव वाली "दिखावटी शैली"
रंगों का बेमेल संयोजन और अव्यवस्थित लेआउट एक "सस्ती" छवि पेश करते हैं।
अति रूढ़िवादी और प्रेरणाहीन "टेम्प्लेट शैली"
विवरण
द्वारा अनुशंसित
nene@YouMind
हमें यह कौशल क्यों पसंद है
यह कौशल ब्रांड कहानी को एक इमर्सिव विज़ुअल मैगज़ीन में बदलता है, सावधानीपूर्वक टाइपोग्राफी, सुंदर एनिमेशन और सहज कथा के साथ एक उच्च-स्तरीय, सरल इंटरैक्टिव वेबपेज बनाता है, जिससे उपयोगकर्ता ब्रांड के आकर्षण को गहराई से महसूस कर सकते हैं।
ब्रांड स्टोरी की कॉपी और सामग्री को उच्च सौंदर्य के साथ स्क्रॉलिंग कथात्मक वेबपेज में बदलें, जो दृश्य डिज़ाइन और इंटरैक्टिव प्रभावों के माध्यम से ब्रांड मूल्य और भावना को संप्रेषित करता है।
संबंधित कौशल
सभी देखेंवेबपेजखोजपूर्ण व्याख्या पेज निर्माता
एक रिपोर्ट समझाती है। एक पेज लोगों को खुद पता लगाने देता है। YouMind पहले से ही वेबपेज बना सकता है। खोजपूर्ण व्याख्या पेज निर्माता तय करता है कि क्या बनाना है — यह एक शोध, डेटासेट या विषय को एक ही इंटरैक्टिव पेज में बदल देता है, जो न्यूज़रूम ग्राफिक्स और खोजपूर्ण व्याख्याओं की परंपरा में होता है: स्क्रॉल-आधारित कथा, वास्तविक चार्ट, नियंत्रण जिन्हें आप हिला सकते हैं, स्रोत जिन्हें आप जाँच सकते हैं। यह कोड करने से पहले योजना बनाता है। आप पहले एक निर्माण योजना को मंजूरी देते हैं: वह एक प्रश्न जिसका उत्तर पेज देता है, रहस्योद्घाटन — वह क्षण जब पाठक को "ओह" महसूस होता है — पाँच से आठ खंडों वाली स्क्रॉल रीढ़, दो से चार इंटरैक्शन जिनमें से प्रत्येक को इस बात से उचित ठहराया जाता है कि पाठक उसे हिलाने से क्या सीखता है, और एक डेटा अनुबंध जिसमें हर संख्या और उसका स्रोत सूचीबद्ध होता है। फिर यह एक स्व-निहित HTML फ़ाइल बनाता है जिसमें कोई निर्माण चरण नहीं होता। सिमेंटिक मार्कअप। सभी संख्याएँ शीर्ष पर एक अकेले संपादन योग्य DATA स्थिरांक में होती हैं। स्क्रॉल रिवील जो फोन पर टूटते नहीं हैं। हर नियंत्रण एक वास्तविक, कीबोर्ड-संचालित फ़ॉर्म तत्व है जिसमें उसके वर्तमान मूल्य का वर्णन करने वाला लाइव टेक्स्ट होता है। अभिगम्यता बाहर से जोड़ने के बजाय अंतर्निर्मित होती है: 4.5:1 कंट्रास्ट, दृश्य फ़ोकस रिंग, हर जगह ऑल्ट टेक्स्ट, रंग अकेले किसी अर्थ को नहीं दर्शाता, कम-गति का सम्मान, और 360px से रेस्पॉन्सिव। सौंपने से पहले, यह एक पाँच-बिंदु आत्म-समीक्षा करता है और परिणाम ईमानदारी से रिपोर्ट करता है: क्या रिवील वास्तव में प्रभाव डालता है, क्या JavaScript बंद होने पर भी पृष्ठ पठनीय है, क्या टैब क्रम सही है, क्या हर संख्या अनुरेखणीय है, क्या कुछ ऐसा एनिमेट हो रहा है जिसे पाठक रोकना चाहेगा। दो नियम जिन्हें यह कभी नहीं तोड़ेगा: यह कभी भी चार्ट को अच्छा दिखाने के लिए डेटा नहीं बनाता, और यह आपको बताता है जब आपके आंकड़े आपके ड्राफ्ट से विरोधाभासी होते हैं। उन शोधकर्ताओं, विश्लेषकों, पत्रकारों, शिक्षकों, स्वतंत्र संस्थापकों और सलाहकारों के लिए जो चाहते हैं कि उनके काम को सरसरी तौर पर नहीं, बल्कि गहराई से खोजा जाए।
वेबपेजसॉफ्ट लाइट डे उकियो वेबपेज
सॉफ्ट लाइट डे स्टाइल के लिए वेब डिज़ाइन सिस्टम: हल्का आसमानी नीला कैनवास (#ebf5ff), फिक्स्ड वेट 500 के साथ विशाल डिस्प्ले टेक्स्ट (रेस्पॉन्सिव रूप से अधिकतम 148px), 32px गोल कॉर्नर कार्ड + 9999px पिल, लगभग काला #181d27 सॉलिड CTA, पेस्टल रंग ब्लॉक और फ्लोटिंग 3D क्ले-टेक्सचर इलस्ट्रेशन। गहराई केवल कैनवास से कार्ड तक रंग-स्तर शिफ्ट द्वारा, कंटेंट कार्ड पर जीरो शैडो। 「सॉफ्ट लाइट डे स्टाइल」「3D इलस्ट्रेशन लैंडिंग पेज」「हल्का नीला कैनवास」「गोल कॉर्नर कार्ड स्टाइल」「SaaS वेबसाइट」「Linear/Framer स्टाइल」 जैसी आवश्यकताओं के लिए उपयुक्त, अंतर्निहित एक्सेसिबिलिटी और रेस्पॉन्सिव कंस्ट्रेंट्स के साथ।
वेबपेजFashion Creative Design वेबपेज
फ़ैशन एडिटोरियल पोस्टर शैली की वेब डिज़ाइन प्रणाली: गर्म क्रीम रंग का पेपर कैनवास (#fffef7), 300 फ़ॉन्ट वज़न वाले बड़े शीर्षक (64–84px), फुल-ब्लीड फ़ोटोग्राफ़ी, शून्य छाया, कार्ड के सीधे कोने + 1440px पिल-आकार के बटन। यह 'फ़ैशन डिज़ाइन शैली', 'मैगज़ीन लेआउट', 'पोस्टर शैली', 'आर्ट पुस्तिका वेबपेज', 'स्टूडियो पोर्टफोलियो', 'गैलरी पेज' आदि आवश्यकताओं के लिए उपयुक्त है, और किसी भी सामग्री को उन्नत फ़ैशन एडिटोरियल शैली में बदल सकता है।
अपना अगला पसंदीदा कौशल खोजें
शोध, निर्माण और रोज़मर्रा के काम के लिए और अधिक चयनित AI कौशल खोजें।