जो भी इंटरनेट का उपयोग करता है, वह हर दिन वेबसाइट लेआउट के उदाहरणों को देखता है। फिर भी, जब तक आप एक डिज़ाइनर नहीं हैं या अपनी खुद की साइट बना रहे हैं, हम में से कुछ ही कभी यह सोचने के लिए रुकते हैं कि वास्तव में एक अच्छी वेब-पृष्ठ संरचना क्या बनाती है।
आप इसे स्वाभाविक रूप से महसूस कर सकते हैं जब आप एक ऐसा पाते हैं जो संतोषजनक नहीं है। लेकिन क्या आप जानते हैं कि एक वेबसाइट लेआउट कैसे डिज़ाइन करें जो आपके आगंतुकों को खुश करता है और आपको अपनी साइट के साथ जो चाहें हासिल करने की अनुमति देता है?
अगर उस सवाल का जवाब नहीं है, तो चिंता न करें। हम आपको विभिन्न प्रकार के वेबसाइट लेआउट के उदाहरण दिखाएंगे जिनमें से आप चुन सकते हैं और आपको समझने में मदद करेंगे कि विभिन्न परिस्थितियों में कौन से सबसे उपयुक्त हैं। फिर, हम आपको अपनी खुद की वेबसाइट के लिए एक लेआउट कैसे चुनें, यह समझाएंगे, साथ ही कुछ सुझाव और उपकरण भी साझा करेंगे जिनका आप लेआउट मॉकअप बनाने के लिए उपयोग कर सकते हैं।
सामग्री की तालिका
- 11 सामान्य प्रकार के वेबसाइट लेआउट
- कैसे एक वेबसाइट लेआउट चुनें
- एक वेबसाइट लेआउट मॉकअप बनाना
- अपने वर्डप्रेस साइट के लिए सही वेबसाइट लेआउट खोजें
11 सामान्य प्रकार के वेबसाइट लेआउट
आपको यह विचार देने के लिए कि एक वेबसाइट लेआउट कैसा दिख सकता है, आइए कुछ सामान्य प्रकारों, वे किस प्रकार की वेबसाइटों के लिए सबसे उपयुक्त हैं, और उदाहरणों पर चर्चा करें। ध्यान रखें कि इनमें से कुछ के लिए, भेद थोड़ा तरल है। आप अक्सर एक ही साइट पर एक से अधिक लेआउट सिद्धांत लागू कर सकते हैं।
1. Z-पैटर्न
यह Z-पैटर्न लेआउट इस तरीके पर आधारित है जिस तरह से कई लोग स्वाभाविक रूप से वेबसाइट सामग्री को देखते हैं। वे ऊपर बाईं ओर से शुरू करते हैं, ऊपर दाईं ओर स्कैन करते हैं, फिर बाईं ओर नीचे जाते हैं और फिर दाईं ओर।
आप इसका लाभ उठा सकते हैं, उदाहरण के लिए, लोगो को ऊपरी बाईं कोने में रखकर और नेविगेशन मेनू को इसके विपरीत रखकर। आपकी सबसे महत्वपूर्ण जानकारी, जैसे आपका शीर्षक और दृश्य, उस से तिरछी नीचे बाईं ओर दिखाई देती है, जबकि क्रिया के लिए कॉल फिर से इसके दाईं ओर है।
यह वेबसाइट लेआउट बहुत स्क्रॉल फ्रेंडली है और उन साइटों के लिए सबसे उपयुक्त है जिनमें अपेक्षाकृत कम सामग्री है जिस पर आप अधिक ध्यान देना चाहते हैं, जैसे CTAs, फॉर्म और बटन।
आप कई Z-पैटर्न को वैकल्पिक तत्वों के साथ लाइन अप कर सकते हैं ताकि आगंतुकों को ज़िगज़ैग रूप में नीचे ले जाया जा सके और उन्हें व्यस्त रखा जा सके।
2. F-पैटर्न
यह लेआउट भी सामान्य पृष्ठ-स्कैनिंग व्यवहार पर आधारित है, जिसे पहले नील्सन नॉर्मन ग्रुप द्वारा खोजा और परिभाषित किया गया था।
यह डेस्कटॉप और मोबाइल दोनों पर देखा जा सकता है और विशेष रूप से अधिक टेक्स्ट-भारी साइटों के लिए। यह उन वेबसाइटों के लिए अच्छी तरह से उपयुक्त है जिनमें बहुत सारे विकल्प या लिखित सामग्री होती है जिन्हें जल्दी से स्कैन करने की आवश्यकता होती है, जैसे समाचार साइटें या खोज परिणाम पृष्ठ। आप इसका लाभ उठाकर बाईं ओर को एक एंकर के रूप में उपयोग कर सकते हैं।
हालांकि, यह ध्यान रखना महत्वपूर्ण है कि NNG ने हाल के वर्षों में कहा है कि, जबकि F-पैटर्न एक स्वाभाविक पढ़ने की अनुक्रम है, यह उपयोगकर्ताओं और वेबसाइटों के लिए अच्छा नहीं है। वे कहते हैं कि आपको पाठकों को पाठ प्रारूपण जैसे बुलेट पॉइंट या चित्र और चित्र जैसे दृश्य के माध्यम से आपकी बाकी सामग्री का उपभोग करने के लिए प्रोत्साहित करना चाहिए।
3. पत्रिका
पत्रिका लेआउट प्रिंटेड समाचार पत्रों और पत्रिकाओं से प्रेरित हैं और इस प्रकार की वेबसाइटों के कई उदाहरण हैं। वे आमतौर पर व्यक्तिगत कंटेनरों से बने कई कॉलमों में होते हैं जो एक जटिल दृश्य पदानुक्रम बनाते हैं।
इस वेबसाइट लेआउट में, विभिन्न तत्वों को अक्सर उनके सापेक्ष महत्व को दिखाने के लिए विभिन्न वजन सौंपे जाते हैं। आप इसे, उदाहरण के लिए, बड़े शीर्षकों या चित्रों के उपयोग के साथ कर सकते हैं। यह एक बहु-स्तरीय पदानुक्रम बनाता है।
लक्ष्य यह है कि आगंतुक तेजी से बड़ी मात्रा में जानकारी को स्कैन कर सकें। इसके परिणामस्वरूप, यह सामग्री-भारी वेबसाइटों के लिए एक शानदार विकल्प है, विशेष रूप से उन वेबसाइटों के लिए जो कई विषयों को कवर करती हैं। डैशबोर्ड, जैसे कि वेब अनुप्रयोगों के लिए, भी अच्छे उम्मीदवार हैं। गज़ेट थीम पत्रिका लेआउट का उपयोग करने का एक और शानदार उदाहरण है।
4. ग्रिड
बॉक्स-आधारित वेबसाइट लेआउट के रूप में भी जाना जाता है, ग्रिड लेआउट तत्वों को पृष्ठ पर एक स्पष्ट अंतर्निहित क्रम के अनुसार वितरित करता है।
इसके परिणामस्वरूप एक अच्छी तरह से संरचित और ज्यामितीय रूप से व्यवस्थित डिज़ाइन होता है। यह उन साइटों के लिए आदर्श है जिनमें समान महत्व की बहुत सारी सामग्री होती है, जैसे कि पोर्टफोलियो। लिंक की गई पृष्ठ अक्सर एक छवि के साथ शीर्षक और एक संक्षिप्त सारांश के रूप में दिखाई देते हैं।
यदि आपकी सामग्री में सभी समान प्राथमिकता नहीं है, तो विभिन्न तत्वों के सापेक्ष महत्व को निर्धारित करने के लिए बहुत सारे विकल्प भी हैं।
5. मॉड्यूलर
हमारी वेबसाइट लेआउट उदाहरणों की सूची में अगला एक विशेष प्रकार की ग्रिड संरचना है, जिसे ब्लॉक लेआउट के रूप में भी जाना जाता है। इसमें, प्रत्येक सामग्री का यूनिट अपनी जगह होती है, समान रूप से स्पेस होती है, और इस प्रकार इसे ढूंढना आसान होता है। आप इसे Pinterest और अन्य साइटों से बहुत अच्छी तरह से जानते होंगे जो कार्ड लेआउट का उपयोग करती हैं।
यह वेबसाइट लेआउट मोबाइल डिज़ाइन के लिए भी शानदार है, क्योंकि यह छोटे स्क्रीन के लिए अच्छी तरह से पुनर्व्यवस्थित होता है। यदि आप इसका उपयोग करना चाहते हैं, तो यह बिज़नेस वेबसाइटों, सामग्री संग्रह जैसे उत्पाद पृष्ठों, या कस्टम पोस्ट प्रकारों के प्रदर्शन के लिए सबसे उपयुक्त है।
6. सिंगल-कॉलम
हमारा अगला वेबसाइट लेआउट उदाहरण सभी सामग्री को एक ऊर्ध्वाधर कॉलम में व्यवस्थित करता है और इसे अनुक्रम में क्रमबद्ध करता है।
सिंगल-कॉलम लेआउट लोकप्रिय और उपयोग में आसान होते हैं, विशेष रूप से मोबाइल पर, जहां उपयोगकर्ता पृष्ठ से पृष्ठ पर क्लिक करने के बजाय स्क्रॉल करना पसंद करते हैं। इस उद्देश्य के लिए, यह एक बैक-टू-टॉप बटन और चिपचिपा मेनू से लाभान्वित होता है।
यदि आपकी सामग्री बहुत टेक्स्ट-भारी है, तो सुनिश्चित करें कि इसे चित्रों के साथ तोड़ें ताकि पठनीयता सुनिश्चित हो सके। जैसा कि आप कल्पना कर सकते हैं, यह वेबसाइट लेआउट अक्सर ब्लॉगों और किसी भी चीज़ के लिए उपयोग किया जाता है जिसमें फीड-जैसी सामग्री पाइपलाइन होती है। लैंडिंग पृष्ठ भी एक अच्छे उम्मीदवार होते हैं।
7. सामग्री-केंद्रित
जैसा कि नाम से ही स्पष्ट है, यह लेआउट उन वेबसाइटों के लिए सबसे उपयुक्त है जिनका प्राथमिक आकर्षण (लिखित) सामग्री है। यह सिंगल-कॉलम प्रकार के समान है, अक्सर एक मुख्य कॉलम और एक या अधिक साइड कॉलम के साथ अतिरिक्त जानकारी के लिए।
जबकि ध्यान प्राथमिक सामग्री पर है, आप इसे अन्य तत्वों से घेर सकते हैं जिन्हें आप चाहते हैं कि आगंतुक मुख्य आकर्षण के लिए पृष्ठ पर उतरने के बाद नोटिस करें। यह साइडबार में एक न्यूज़लेटर साइनअप फॉर्म, आपके उत्पाद या सेवा के लिए विज्ञापन, या एक बिक्री बैनर हो सकता है।
स्वाभाविक रूप से, यह पृष्ठ संरचना ब्लॉगों या अन्य वेबसाइटों के लिए सबसे अच्छी होती है जो मुख्य रूप से लेखन में संलग्न होती हैं। साथ ही, विभिन्न लेआउट वाली वेबसाइटों पर एकल पृष्ठ भी सामग्री-केंद्रित दृष्टिकोण से लाभ उठा सकते हैं।
8. फुल-स्क्रीन
यह एक वेबसाइट लेआउट है जो पूरे पृष्ठ को कवर करता है। इसमें कोई साइडबार नहीं होते, स्क्रीन एक एकल इकाई के रूप में आती है।
कभी-कभी इस डिज़ाइन को एक मॉड्यूलर निर्माण के साथ जोड़ा जाता है जो स्क्रीन द्वारा स्क्रीन को स्क्रॉल करता है, ताकि प्रत्येक अनुभाग एक अलग पृष्ठ की तरह हो। इसमें अक्सर पृष्ठभूमि में एक छवि या यहां तक कि वीडियो होता है।
फुल-स्क्रीन लेआउट एक पृष्ठ डिज़ाइन, कहानी कहने और उत्पाद पृष्ठों के लिए सबसे उपयुक्त होते हैं। यदि आप उन्हें आकर्षक रंगों और/या दृश्यों के साथ जोड़ते हैं तो वे सबसे अच्छे काम करते हैं। यदि आपको यह रूप पसंद है, तो Afterlight थीम आपके लिए एक अच्छा विकल्प हो सकता है।
9. हीरो
एक विशेष प्रकार का फुल-स्क्रीन वेबसाइट लेआउट जिसमें शीर्ष पर एक बड़ा चित्र होता है (जिसे “हीरो चित्र” भी कहा जाता है) जिसमें आपके साइट का शीर्षक, CTA आदि जैसे मुख्य तत्व होते हैं।
हीरो लेआउट जल्दी ध्यान आकर्षित करने और पृष्ठ के विषय को स्पष्ट करने का एक अच्छा तरीका है, विशेष रूप से उत्पादों के लिए। यह एक बड़ा, बोल्ड दृश्य कथन है जिसमें पाठ तत्वों के रूप में अतिरिक्त जानकारी होती है।
यह लेआउट उत्पाद पृष्ठों और ईकॉमर्स वेबसाइटों के लिए सबसे अच्छा काम करता है। हालांकि, कुछ ब्लॉग भी इसका उपयोग करते हैं।
10. स्प्लिट-स्क्रीन
इस वेबसाइट लेआउट में, स्क्रीन को बीच में विभाजित किया गया है।
स्प्लिट-स्क्रीन लेआउट संतुलित सममिति प्रदान करते हैं जिससे आप दो अलग-अलग विचारों का प्रतिनिधित्व कर सकते हैं और उन्हें समान ध्यान दे सकते हैं। वैकल्पिक रूप से, आप एक ही विचार को विभिन्न कोणों से भी दिखा सकते हैं या इसका उपयोग ईकॉमर्स ग्राहकों को उनकी यात्रा की शुरुआत में विभाजित करने के लिए कर सकते हैं।
स्प्लिट स्क्रीन उन वेबसाइटों के लिए एक शानदार विकल्प है जो दो अलग-अलग प्रकार की सामग्री (जैसे चित्र और टेक्स्ट) का उपयोग करती हैं या दो अलग-अलग ग्राहक यात्रा प्रदान करती हैं। यह बस उन वेबसाइटों के लिए भी उपयुक्त है जो आधुनिक रूप चाहती हैं। हालांकि, यह टेक्स्ट-भारी डिज़ाइन के लिए इतना अच्छा नहीं है क्योंकि यह अच्छी तरह से स्केल नहीं करता, विशेष रूप से मोबाइल पर।
11. विषम
एक डिज़ाइन जो स्प्लिट स्क्रीन या ग्रिड के समान है लेकिन असमान वितरण के साथ, जो एक गतिशीलता प्रदान करता है।
आप स्केल, रंग, चौड़ाई और अधिक का उपयोग करके पृष्ठ पर विभिन्न फोकल पॉइंट और हाइलाइट्स प्रदान कर सकते हैं। हालांकि, विषमता का मतलब अराजकता नहीं है। एक अंतर्निहित क्रम है जो सुंदरता और सामंजस्य प्रदान करता है।
विषम वेबसाइट लेआउट के लिए अच्छे उम्मीदवार कौन हैं?
वेबसाइटें जो कुछ आधुनिक, नवोन्मेषी करना चाहती हैं और उपयोगकर्ता का ध्यान गतिशील तरीकों से मार्गदर्शित करना चाहती हैं। बिज़नेस वेबसाइटें, ऑनलाइन पोर्टफोलियो, या लैंडिंग पृष्ठ प्रमुख लाभार्थी हैं।
कैसे एक वेबसाइट लेआउट चुनें
आपके पास यह विचार होने के बाद कि किस प्रकार के वेबसाइट लेआउट मौजूद हैं, आप अपनी वेबसाइट के लिए सही एक कैसे चुनते हैं? यहां कुछ व्यावहारिक सुझाव दिए गए हैं।
वेबसाइट लेआउट बनाम वेबसाइट संरचना को समझना
पहले, सुनिश्चित करें कि एक वेबसाइट लेआउट वही है जो आप लागू करना चाहते हैं। एक वाक्य में, इसका मतलब है कि आपके वेब पृष्ठों पर तत्वों (सामग्री, नेविगेशन, हेडर, फूटर, और अन्य सभी दृश्य) को इस तरह से व्यवस्थित किया गया है कि वे उनके भीतर शामिल जानकारी को प्रस्तुत करते हैं।
इसके विपरीत वेबसाइट संरचना, लेआउट व्यक्तिगत पृष्ठ अनुभव पर ध्यान केंद्रित करता है और उपयोगकर्ता आपकी पृष्ठों पर सामग्री का उपभोग कैसे करते हैं। यह उन्हें आपकी साइट के चारों ओर ले जाने के बारे में कम चिंतित है (हालांकि, निश्चित रूप से, यह भी इसका हिस्सा है)।
जबकि आपकी साइट पर विभिन्न वेब पृष्ठों में (और होना चाहिए) विभिन्न लेआउट हो सकते हैं, बुनियादी संरचना आमतौर पर समान रहती है। उदाहरण के लिए, एक दुकान पृष्ठ पर आवश्यक जानकारी एक उत्पाद पृष्ठ या हमारे बारे में अनुभाग जैसी किसी चीज़ से बहुत अलग होती है। साथ ही, बुनियादी लेआउट तत्व, विशेष रूप से हेडर और फूटर, आमतौर पर अधिकांश पृष्ठों पर स्थिर रहते हैं।
यह एक सुसंगत उपयोगकर्ता अनुभव बनाता है, जबकि उपयोगकर्ताओं को विभिन्न प्रकार की सामग्री प्रदान करने के लिए लचीलापन भी प्रदान करता है।
आपकी वेबसाइट लेआउट का लक्ष्य क्या है?
अच्छा लेआउट उपयोगकर्ताओं को आपके पृष्ठ पर लंबे समय तक बनाए रखने और उन्हें संलग्न करने की शक्ति रखता है। बुरा लेआउट इसके विपरीत कर सकता है। उन समयों में जब अधिकांश आगंतुक आपकी साइट छोड़ देते हैं दस सेकंड के भीतर, आपको जितना संभव हो सके बढ़त की आवश्यकता है। यहां कुछ बातें हैं जो अच्छा वेबसाइट लेआउट हासिल करता है:
- अच्छी पहली छाप बनाता है – उपयोगकर्ता आधे सेकंड से भी कम समय में तय करते हैं कि उन्हें आपकी साइट पसंद है या नहीं, इसलिए सुनिश्चित करें कि आपका लेआउट सही है।
- स्वाभाविक रूप से महत्वपूर्ण सामग्री की ओर आंख को ले जाता है – हर वेबसाइट का ध्यान सामग्री पर होता है, चाहे वह उत्पाद हों या जानकारी। आपकी पृष्ठ संरचना उपयोगकर्ताओं को इसकी ओर निर्देशित कर सकती है या इससे दूर।
- मजबूत उपयोगकर्ता अनुभव (UX) प्रदान करता है – एक अच्छा लेआउट आगंतुकों को यह खोजने में मदद करता है कि वे क्या ढूंढ रहे हैं, पृष्ठ पर और साइटव्यापी। यह तत्वों को एक-दूसरे के संबंध में सेट करता है, उनके अनुक्रम को निर्धारित करता है, और सही तत्वों को वजन देता है।
- मार्गदर्शन देता है – लेआउट आपके उपयोगकर्ताओं के लिए मार्गदर्शक रेल प्रदान करता है। यह सबसे महत्वपूर्ण सामग्री को शीर्ष पर रखता है और उन्हें आपके लक्ष्य की ओर पृष्ठ के नीचे ले जाता है।
सर्वश्रेष्ठ वेबसाइट लेआउट वह है जिसे आप मुश्किल से नोटिस करते हैं क्योंकि आप आसानी से हर तत्व को ढूंढ सकते हैं जिसकी आप तलाश कर रहे हैं। यह आपके लक्ष्य समूह, उनकी प्राथमिकताओं, व्यवहारों और आवश्यकताओं के लिए भी लक्षित होता है।
आप जिस वेबसाइट का निर्माण कर रहे हैं, उसके प्रकार पर विचार करें
जैसा कि आपने ऊपर देखा है, विभिन्न वेबसाइट लेआउट विभिन्न प्रकार की वेबसाइटों के लिए अधिक या कम उपयुक्त होते हैं। इसलिए, आपके लिए सही एक चुनने के लिए, आपको पहले यह स्पष्ट रूप से जानना होगा कि आप किस प्रकार की साइट बना रहे हैं।
बिज़नेस साइटें, दुकानें, ब्लॉग – इन सभी के बहुत अलग फोकल पॉइंट होते हैं और विभिन्न लेआउट की मांग करते हैं। इस क्षेत्र में स्पष्टता सही विकल्प बनाने की दिशा में पहला कदम है।
अपना शोध करें
आपकी वेबसाइट एक निर्वात में मौजूद नहीं है। उन वेबसाइटों को देखें जो आपकी तरह की हैं (जैसे ब्लॉग, ईकॉमर्स, B2B, B2C, आदि) लेकिन जो आपके अपने से अलग प्रकार के उत्पादों/सेवाओं को बेचती हैं या विभिन्न उद्योगों/निचे की सेवा करती हैं।
जब आप ऐसा करते हैं, तो सामान्य वेबसाइट लेआउट, सर्वोत्तम प्रथाओं, जो अच्छा दिखता है, की पहचान करें, और देखें कि आप अपने लेआउट के साथ क्या बेहतर कर सकते हैं।
आपको क्या पसंद है, इस पर विचार करें
हाँ, एक वेबसाइट मुख्य रूप से अन्य लोगों की सेवा करने के लिए होती है। हालाँकि, साथ ही, यह भी कुछ ऐसा होना चाहिए जो आपको पसंद हो। यदि आप अपनी खुद की वेबसाइट से निराश हैं, तो यह संभावना नहीं है कि आप इसे चलाने और सफल बनाने के लिए आवश्यक ऊर्जा और उत्साह डालेंगे।
इसलिए, जिस वेबसाइट लेआउट को चुनने पर विचार कर रहे हैं, उसके लिए कुछ आत्मनिरीक्षण भी करें। सोचें कि आपको व्यक्तिगत रूप से क्या पसंद है और आप अपनी साइट पर क्या देखना चाहेंगे।
अपने डिज़ाइन को सामान्य लेआउट पर आधारित करें
हमने ऊपर जिन वेबसाइट लेआउट पर चर्चा की है, वे सामान्यतः ज्ञात हैं क्योंकि वे काम करते हैं। उन्होंने समय के साथ उपयोगी साबित किया है, उपयोगकर्ताओं के लिए परिचित हैं, और उपयोग के लिए तैयार हैं। इसलिए, एक स्थापित लेआउट के साथ जाना एक अच्छा विचार है और फिर उसमें अपना व्यक्तिगत स्वाद जोड़ें।
एक वेबसाइट लेआउट मॉकअप बनाना
वर्डप्रेस थीम विभिन्न प्रकार के पृष्ठ लेआउट का समर्थन करने के लिए पर्याप्त लचीले होते हैं। लेकिन अगर आप अपनी खुद की थीम डिज़ाइन कर रहे हैं या किसी वेबसाइट डेवलपर के साथ काम कर रहे हैं? इस मामले में, आप एक वायरफ्रेम बनाना चाह सकते हैं। यह आपके पृष्ठ लेआउट को मैप करने में मदद करता है और आपके विचारों को स्पष्ट करने और उन्हें कागज पर लाने के लिए भी अच्छा है।
अपने लेआउट का वायरफ्रेम बनाना
एक वायरफ्रेम आपके पृष्ठ का एक मानचित्र होता है। यह समाप्त डिज़ाइन नहीं है बल्कि इसकी संरचना को दिखाने वाली कुछ चीज़ है।
यहाँ एक सरल वायरफ्रेम बनाने का तरीका है:
- उपयोगकर्ता यात्रा के बारे में सोचें – जानें कि आपके लेआउट के साथ आपके लक्ष्य क्या हैं, आप आगंतुकों को कहाँ ले जाना चाहते हैं और आप चाहते हैं कि वे क्या करें।
- स्केचिंग शुरू करें (और मोबाइल से शुरू करें) – वायरफ्रेम सुपरफैंसी या विस्तृत नहीं होने चाहिए। इसलिए, आप तुरंत शुरू कर सकते हैं (नीचे उपकरण देखें)। एक अच्छा विचार यह है कि मोबाइल डिज़ाइन से शुरू करें, फिर बड़े स्क्रीन आकारों पर जाएं।
- बुनियादी ढांचे का निर्माण करें – एक पक्षी की आंख के दृष्टिकोण से देखें, पहले बुनियादी डिज़ाइन समस्याओं को हल करें। नेविगेशन और अन्य बुनियादी UI तत्वों को कहाँ रखना है, इस पर विचार करें।
- सामग्री क्षेत्रों की पहचान करें – मार्क करें कि आपकी सामग्री कहाँ जाएगी। इसके लिए, यह महत्वपूर्ण है कि आप पहले से जानें कि आप कौन सी सामग्री का उपयोग करेंगे (शब्द गणना और चित्र दोनों) ताकि आप इसे मानचित्र में सटीक रूप से शामिल कर सकें।
- पुनरावृत्ति करें – भले ही आप अपने पहले विचार से संतुष्ट हों, लेकिन खुद को विकल्प देने के लिए कुछ और पास करें। अक्सर सबसे अच्छे विचार सतह पर आने में थोड़ा समय लेते हैं।
- परीक्षण करें – जब आपके पास कुछ वेबसाइट लेआउट विचार एकत्रित हो जाएं, तो उन्हें संभावित उपयोगकर्ताओं के सामने रखना और फीडबैक एकत्र करना समय है। नीचे सूचीबद्ध उपकरण इसके लिए भी उपयुक्त हैं। कुछ वास्तविक जीवन की प्रतिक्रिया प्राप्त करना सुधारने और अंतिम संस्करण के करीब आने के लिए बहुत अच्छा है।
- धो लें और दोहराएं – जब तक आप परिणामों से संतुष्ट न हों और डिज़ाइन चरण में जाने के लिए तैयार न हों, तब तक इसे बार-बार करें।
प्रो टिप: क्या आप जानते हैं कि WordPress.com पर होस्ट की गई साइटों में वायरफ्रेम ब्लॉक पैटर्न शामिल हैं जिनका आप उपयोग कर सकते हैं? ये पैटर्न आपकी पृष्ठ के लिए एक खाली स्लेट के करीब होते हैं बिना किसी डिज़ाइन के, लेकिन वे एक बुनियादी संरचनात्मक लेआउट शामिल करते हैं। बस पैटर्न लाइब्रेरी से आपको पसंद का एक वायरफ्रेम पैटर्न चुनें और इसे अपनी आवश्यकताओं के अनुसार अनुकूलित करें।
अतिरिक्त सुझाव
सर्वश्रेष्ठ संभव वेबसाइट लेआउट बनाने के लिए, यहां कुछ सुझाव और अवधारणाएं हैं जिनका ध्यान रखना चाहिए:
- एक दृश्य पदानुक्रम बनाएं – तय करें कि कौन से तत्व सबसे महत्वपूर्ण हैं और अपने वेबसाइट लेआउट को इस तरह बनाएं कि यह उन पर ध्यान केंद्रित करे। सुनिश्चित करें कि उन्हें ऐसे स्थान पर रखा गया है जहाँ वे आसानी से ध्यान देने योग्य और पहचानने योग्य हों।
- ग्रिड का उपयोग करें – लगभग सभी वेब डिज़ाइन किसी न किसी प्रकार के ग्रिड पर आधारित होते हैं। यह आदेश और एक बुनियादी संरचना और स्कैफोल्डिंग प्रदान करता है जिसके साथ आप अपने पृष्ठ तत्वों को क्रमबद्ध कर सकते हैं।
- अजीब संख्या के नियम का उपयोग करें – सम संख्या के बजाय विषम संख्या के तत्वों का उपयोग करें। इस तरह, ध्यान हमेशा एक तत्व पर होता है न कि उनके बीच में।
- स्कैन करने की क्षमता सुनिश्चित करें – हमने पहले पढ़ने के पैटर्न के बारे में बात की है। जब आप अपनी वेबसाइट लेआउट डिज़ाइन कर रहे हैं, तो सुनिश्चित करें कि आगंतुक सामग्री का उपभोग करने के तरीके को समायोजित करें ताकि आपकी साइट का सार पकड़ना आसान हो।
- फोल्ड पर ध्यान केंद्रित करें – फोल्ड वह जगह है जहां स्क्रीन कट जाती है जब कोई पहली बार आपकी साइट पर आता है। इसके ऊपर, उस भाग में जो आगंतुक पहले देखते हैं, आपके पास सबसे महत्वपूर्ण सामग्री और क्रिया के लिए कॉल होना चाहिए।
- पर्याप्त सफेद स्थान का उपयोग करें – नकारात्मक स्थान, वह भाग जिसमें सामग्री नहीं होती, उतना ही महत्वपूर्ण है जितना कि सामग्री स्वयं। यह सांस लेने के लिए स्थान प्रदान करता है और यह सुनिश्चित करता है कि जोर उस स्थान पर हो जहाँ आप चाहते हैं कि उपयोगकर्ता ध्यान केंद्रित करें।
वायरफ्रेमिंग के लिए उपकरण
आप वायरफ्रेम बनाने के लिए विभिन्न प्रकार के उपकरणों का उपयोग कर सकते हैं:
- कलम और कागज – क्लासिक लेकिन शक्तिशाली, उपयोग में आसान, और बिना किसी नए उपकरण को सीखने के बिना कुछ वेबसाइट लेआउट विचारों को जल्दी से तैयार करने के लिए शानदार।
- Whimsical – एक सहयोगी उपकरण जो वायरफ्रेम के लिए काम करता है और आपको फीडबैक प्राप्त करने की अनुमति देता है। यह उपयोग में आसान है और इसमें एक मुफ्त योजना है।
- Invision – Whimsical के समान। सहयोगी डिज़ाइन के लिए भी काम करता है। इसमें वायरफ्रेम टेम्पलेट होते हैं और तीन ऑनलाइन व्हाइटबोर्ड के लिए एक मुफ्त योजना है।
- Figma – डिज़ाइन और प्रोटोटाइपिंग के लिए एक लोकप्रिय उपकरण है जिसमें मुफ्त वायरफ्रेम किट होती हैं ताकि आप तुरंत शुरू कर सकें। बिना भुगतान किए शुरू करने के लिए मुफ्त योजना का उपयोग करें।
- WordPress.com के वायरफ्रेम पैटर्न – यदि आप एक पूर्व-डिज़ाइन किए गए वायरफ्रेम टेम्पलेट के साथ शुरू करना चाहते हैं, और वहां से समायोजित करना चाहते हैं, तो WordPress.com के पास इसे सरल बनाने के लिए कुछ पैटर्न हैं।
अपने वर्डप्रेस साइट के लिए सही वेबसाइट लेआउट खोजें
लेआउट आपकी वेबसाइट की उपयोगिता के लिए सबसे निर्णायक कारकों में से एक है। इस कारण से, इसे पर्याप्त ध्यान देने की आवश्यकता है ताकि आप अपने आगंतुकों की सर्वोत्तम तरीके से सेवा कर सकें।
स्थापित पृष्ठ संरचनाएँ शुरू करने का एक बेहतरीन तरीका हैं। समय के साथ इन्होंने खुद को साबित किया है और स्थापित उपयोगकर्ता अपेक्षाओं को पूरा करने में सक्षम हैं। जबकि आप (और आपको) अपना खुद का स्वाद जोड़ना चाहिए, आपको पहिया को फिर से आविष्कार करने की ज़रूरत नहीं है। यह अक्सर एक वेबसाइट में एक से अधिक लेआउट का उपयोग करना व्यावहारिक और समझदारी भरा होता है, खासकर विभिन्न पृष्ठों पर।
निर्णय लेते समय, अपनी वेबसाइट के प्रकार, लक्ष्यों, उद्योग और पर्सनल पसंदों पर विचार करें। फिर, अपने वेबसाइट लेआउट के लिए अपने विचारों को कैप्चर करने के लिए वायरफ्रेमिंग का उपयोग करें। और याद रखें, यह सब आपके उपयोगकर्ताओं के बारे में है। सबसे अच्छे लेआउट वे होते हैं जिन्हें वे मुश्किल से नोटिस करते हैं।
स्टूडियो के साथ तेजी से बनाएं, तेजी से शिप करें, जो वर्डप्रेस के साथ स्थानीय रूप से विकसित करने का एक तेज़, मुफ्त तरीका है। अब शुरू करें.
WordPress.com ब्लॉग 
कृपया इन कमेंट्स का इस्तेमाल सवाल पूछने, सपोर्ट लेने, या बग रिपोर्ट करने के लिए न करें. इसके लिए फ़ोरम या सहयता संपर्क फ़ॉर्म का इस्तेमाल करें.
पोस्ट करने से पहले कृपया हमारी टिप्पणी से जुड़े दिशा-निर्देश पढ़ें.