वेबसाइट लेआउट

सर्वश्रेष्ठ वेबसाइट लेआउट उदाहरण और विचार


आपकी वेबसाइट का लेआउट इसकी सफलता को परिभाषित कर सकता है। गलत डिज़ाइन प्राप्त करें और उपयोगकर्ता अनुभव को नष्ट करते हुए लोग भ्रमित और अक्षम हो जाएंगे। वे महत्वपूर्ण सामग्री को याद करने या कार्रवाई करने के लिए कॉल देखने में विफल रहने की संभावना है.

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

आपकी वेबसाइट का लेआउट इसकी सफलता को परिभाषित कर सकता है। गलत डिज़ाइन प्राप्त करें और उपयोगकर्ता अनुभव को नष्ट करते हुए लोग भ्रमित और अक्षम हो जाएंगे। वे महत्वपूर्ण सामग्री को याद करने या कार्रवाई करने के लिए कॉल देखने में विफल रहने की संभावना है.

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

अंततः सभी साइटों में एक ग्रिड प्रणाली होती है जो वेबसाइट डिज़ाइन के नीचे बैठती है। ये कॉलम और पंक्तियाँ आपकी सामग्री को आदेश प्रदान करती हैं और पृष्ठ के चारों ओर उपयोगकर्ता की नज़र को निर्देशित करती हैं। इन ग्रिडों के भीतर, आप विभिन्न तरीकों के ढेर सारे बना सकते हैं। हर वेबसाइट में एक अंतर्निहित ग्रिड होता है, जिस पर डिजाइनर ने लेआउट का निर्माण किया है.

हालाँकि, जब आपकी साइट के लिए सही लेआउट डिज़ाइन चुनने की बात आती है, तो कई सामान्य शुरुआती बिंदु हैं जिनका उपयोग आप शुरू करने के लिए कर सकते हैं.

यह कहने योग्य है कि आपको एक दृष्टिकोण से चिपके रहने की आवश्यकता नहीं है। आप अपनी साइट पर या यहां तक ​​कि लैंडिंग पृष्ठ जैसे एकल पृष्ठ पर कई लेआउट आसानी से संयोजित कर सकते हैं.

उस ने कहा, आइए आपके लिए उपलब्ध सबसे सामान्य लेआउट विकल्पों पर नज़र डालें.

हम सभी के सबसे सरल लेआउट पैटर्न के साथ शुरू करते हैं, एकल कॉलम.

1. सिंगल कॉलम लेआउट

यद्यपि आपको सबसे अधिक अपूर्ण लेआउट मिलेगा, यह मोबाइल वेब के विकास के बाद से लोकप्रियता में काफी वृद्धि हुई है। ऐसा इसलिए है क्योंकि वेबसाइट विकास के समय को कम करने के लिए मोबाइल डिवाइस, टैबलेट और डेस्कटॉप पर एक ही डिजाइन का उपयोग कर सकती है.

इसके अलावा, एकल-स्तंभ लेआउट एक महान पढ़ने के अनुभव को बनाने के लिए अच्छी तरह से काम करते हैं क्योंकि यह उपयोगकर्ता को किसी भी तरफ कोई विचलित न होने वाली सामग्री पर केंद्रित करता है। यही कारण है कि ब्लॉगिंग साइट मध्यम अपने सभी लेखों के लिए इसे अपनाता है.

पठन अनुभव को बढ़ाने के लिए माध्यम एकल स्तंभ लेआउट का उपयोग करता है।

अंत में, जब कल्पना के साथ जोड़ा जाता है, तो एक एकल स्तंभ लेआउट एक शक्तिशाली प्रभाव बना सकता है क्योंकि यह आपको उन छवियों को यथासंभव बड़ा दिखाने की अनुमति देता है. महासागर रिज़ॉर्ट कार्रवाई में इसका एक बड़ा उदाहरण है.

महासागर रिज़ॉर्ट कल्पना के प्रभाव को अधिकतम करने के लिए अपने एकल-स्तंभ डिजाइन की पूरी चौड़ाई का उपयोग करता है।

इन कारकों को ध्यान में रखते हुए, एक एकल कॉलम लेआउट का उपयोग करने पर विचार करें यदि आप चाहते हैं कि लोग आपकी साइट पर पढ़ने में बहुत समय बिताएं या यदि आपके पास कल्पना है जिसे चमकने के लिए कमरे की आवश्यकता है.

इसकी सरलता के कारण, एकल स्तंभ लेआउट के आसपास कुछ चुनौतियां हैं। हालांकि, आपको जानकारी के प्रवाह पर सावधानीपूर्वक विचार करने की आवश्यकता है। उपयोगकर्ता को आपकी सामग्री को देखने के लिए किस क्रम की आवश्यकता होती है?

उदाहरण के लिए, उपयोगकर्ताओं को यह बताने में मदद मिलती है कि पृष्ठ उन्हें ऊपर खींचने के लिए क्या कवर करता है और अंत तक कार्रवाई करने के लिए एक स्पष्ट कॉल प्रदान करता है।.

इसके अलावा, इस बारे में सोचें कि आप उपयोगकर्ता को पृष्ठ को नीचे स्क्रॉल करके कैसे रख सकते हैं। सिंगल कॉलम लेआउट लंबे समय तक बने रहते हैं, और यह हमेशा उपयोगकर्ता के लिए स्पष्ट नहीं होता है कि गुना के नीचे अधिक सामग्री है। एक दृश्य संकेतक, जैसे कि एक तीर मदद कर सकता है.

यदि एक एकल स्तंभ लेआउट थोड़ा प्रतिबंधात्मक लगता है, लेकिन आपके पास अभी भी संवाद करने के लिए बहुत सारी सामग्री है, तो सामग्री पर केंद्रित एक डिज़ाइन को अपनाने पर विचार करें।.

2. कंटेंट फोकस्ड लेआउट

वेब डिजाइनर अक्सर समाचार साइटों या ब्लॉगों पर सामग्री केंद्रित लेआउट का उपयोग करते हैं, और इसमें आमतौर पर सामग्री के लिए एक प्राथमिक कॉलम और अतिरिक्त जानकारी के लिए एक या अधिक साइड कॉलम होते हैं.

इस लेआउट का लाभ यह है कि यह आपको साइड कॉलम की चौड़ाई को अलग करके केंद्रीय सामग्री की लाइन लंबाई का प्रबंधन करने में मदद कर सकता है। वह इसलिए मायने रखता है यदि पाठ की लाइन लंबाई बहुत लंबी या छोटी है, तो इसे पढ़ना कठिन हो जाता है, इसलिए सूचना की समझ और अवधारण को कम करना.

हालाँकि, सही किया गया है, सामग्री केंद्रित लेआउट किसी भी कॉपी-केंद्रित वेबसाइट के लिए आदर्श है। रहस्य इस लेआउट के भीतर सामग्री को तोड़ने के लिए आसान है, चुंचों को पचाने में आसान है.

बोगवर्ल्ड के पोस्ट हेडिंग, लिस्ट, इमेज और पुलआउट कोट्स के साथ कंटेंट को तोड़ते हैं।

उदाहरण के लिए, मेरे ब्लॉग पर, आप पाएंगे कि मेरी औसत पोस्ट शीर्षकों, सूचियों, कल्पनाओं और उद्धरणों को बाहर निकाल कर बनाई गई है। ये सभी तकनीकें हैं जो उपयोगकर्ता को लेख को स्कैन करने में मदद करती हैं, ऐसे हिस्से ढूंढती हैं जो रुचि के हों.

सावधान विचार भी पक्ष स्तंभों को दिया जाना चाहिए। यह आवश्यक है कि वेब डिजाइनर इन स्तंभों में सही सामग्री रखता है और यह कि वे नेत्रहीन सही वजन रखते हैं.

समस्या यह है कि उपयोगकर्ता साइड कॉलम में द्वितीयक सामग्री खोजने की अपेक्षा करते हैं और इसलिए उन्हें कम ध्यान देते हैं। इसलिए, यदि आप किसी साइड कॉलम में कार्रवाई के लिए कॉल जैसी किसी चीज़ को शामिल करने की योजना बनाते हैं, तो यह ध्यान आकर्षित करने के लिए पर्याप्त मजबूत होना चाहिए.

उदाहरण के लिए, नोटिस कैसे महक पत्रिका अपने समाचार पत्र पर ध्यान आकर्षित करने के लिए सही कॉलम में फ़ॉर्म को आकर्षित करने के लिए एक बिल्ली के रंगीन चित्रण का उपयोग करता है.

मुंहतोड़ पत्रिका पोस्ट के बारे में माध्यमिक जानकारी प्रदान करने के लिए अपने साइड कॉलम का उपयोग करती है।

ऐसा नहीं है कि आपकी साइट के प्रत्येक पृष्ठ के लिए सामग्री केंद्रित लेआउट उपयुक्त है। वेबसाइट अक्सर इस लेआउट को एक पत्रिका-शैली के डिजाइन के साथ जोड़ते हैं.

3. पत्रिका लेआउट

जैसा कि नाम से पता चलता है, इस लेआउट दृष्टिकोण का उपयोग पत्रिकाओं या समाचार साइटों में बड़े पैमाने पर विभिन्न कहानियों को दिखाने के लिए किया जाता है.

प्रिंट लेआउट से प्रेरित होकर, वे कहानियों को पेश करने के लिए सुर्खियों और कल्पना के संयोजन की अनुमति देते हैं। यह अनिवार्य रूप से लिंक की एक सूची है, यह बताने का एक आकर्षक तरीका हो सकता है.

यह नियमित रूप से बदलने वाली सामग्री को उजागर करने के लिए एक उत्कृष्ट लेआउट भी है। यही कारण है कि समाचार वेबसाइटों को पसंद करते हैं द वाशिंगटन पोस्ट इतना एहसान करो.

समाचार वेबसाइटें पत्रिका-शैली के लेआउट का पक्ष लेती हैं।

हालांकि, लेआउट इसकी कमियों के बिना नहीं है। एक पत्रिका लेआउट उत्तरदायी बनाने के लिए चुनौतीपूर्ण हो सकता है, अक्सर छोटे स्क्रीन उपकरणों के लिए डिजाइन में पूर्ण परिवर्तन की आवश्यकता होती है.

यह वेबसाइट लेआउट शैली भी कुछ हद तक भारी हो सकती है, जिसमें बड़ी संख्या में चित्र और सुर्खियां ध्यान में आती हैं.

इस समस्या को संबोधित करने का सबसे प्रभावी तरीका स्पष्ट दृश्य पदानुक्रम बनाना है। दूसरे शब्दों में, कुछ, कहानियों को दूसरों से बड़ा बनाते हैं.

अलग-अलग कहानी के आकार के अनुसार, वे उपयोगकर्ताओं की आंखों का मार्गदर्शन करते हैं।

उदाहरण के लिए, ध्यान दें कि कैसे प्रचलन वेबसाइट बाएं हाथ की छवि पर ध्यान केंद्रित करती है और इसे काफी बड़ा बनाती है। वे प्रभावी रूप से उपयोगकर्ता को बता रहे हैं कि पहले कहां देखना है.

यह भी मदद करता है कि साफ टाइपोग्राफी और सरल नेविगेशन बार के साथ बाकी यूजर इंटरफेस सीधा है। यदि आप पत्रिका लेआउट का उपयोग करने जा रहे हैं, तो आपको चीजों को सरल रखने के लिए कड़ी मेहनत करने की आवश्यकता होगी.

पत्रिका के लेआउट का एक और संभावित पहलू यह है कि यह ‘बॉक्सी’ दिख सकता है क्योंकि ग्रिड जो इसे रेखांकित करता है वह इतना दृश्यमान है। हालाँकि, आप हमारे अगले लेआउट प्रकार से प्रेरणा लेकर इसे कम कर सकते हैं.

4. ग्रिड ब्रेकिंग लेआउट

लेआउट जो अपने अंतर्निहित ग्रिड को तोड़ने के लिए दिखाई देते हैं, वे अधिक पारंपरिक दृष्टिकोणों की तुलना में अधिक दिलचस्प हो सकते हैं। वे विशेष स्क्रीन तत्वों पर ध्यान आकर्षित करने के लिए भी उत्कृष्ट हैं जो सामान्य कॉलम से बाहर निकलते हैं.

उदाहरण के लिए, ले लो वीआर आर्ल्स फेस्टिवल वेबसाइट. ध्यान दें कि वे दो कॉलम को ओवरलैप करके अपने नेविगेशन बार पर आपका ध्यान कैसे आकर्षित करते हैं.

वीआर आर्ल्स फेस्टिवल दो कॉलम को ओवरलैप करके आपका ध्यान अपने नेविगेशन बार की ओर खींचता है।

ग्रिड ब्रेकिंग लेआउट का एक और व्यावहारिक उपयोग यह है कि छवि पर पाठ को ओवरले करने के लिए इसका उपयोग इस तरह से कॉपी पर ध्यान खींचने के लिए किया जाता है। जब कोई वेबपृष्ठ किसी छवि पर पाठ को पूरी तरह से ओवरलैप करता है, तो यह अक्सर खो सकता है। हालाँकि, जैसा आप कर सकते हैं नीचे दिए गए उदाहरण से देखें, यदि पाठ चित्र को आंशिक रूप से ओवरलैप करता है, तो यह बहुत अधिक है.

यह डिज़ाइन पाठ पर ध्यान आकर्षित करता है और इसे छवि के साथ आंशिक रूप से ओवरले करके कार्रवाई के लिए कहता है।

ग्रिड-ब्रेकिंग लेआउट के नकारात्मक पक्ष यह है कि वे सही होने के लिए कठिन हैं, खासकर जब वेबसाइटों को उत्तरदायी बनाने की आवश्यकता होती है। सच में, अधिकांश ग्रिड-ब्रेकिंग डिज़ाइन कुछ भी नहीं हैं। अभी भी एक अंतर्निहित ग्रिड है, और सभी स्क्रीन तत्व इसमें फिट होते हैं। यह सिर्फ इतना है कि ग्रिड बहुत अधिक जटिल है और इसलिए यह इतना स्पष्ट नहीं है। इससे उन्हें डिजाइन करने में मुश्किल होती है.

उनकी अंतर्निहित जटिलता इस कारण है कि आप उन्हें डिज़ाइन-नेतृत्व वाली कंपनियों जैसे डिज़ाइन एजेंसियों या फैशन ब्रांडों द्वारा उपयोग करते हुए देखते हैं। वे डिजाइन परिष्कार की एक डिग्री प्रदर्शित करते हैं जो एक विशेष दर्शकों को अपील करता है.

यदि आपकी स्थिति के लिए एक ग्रिड ब्रेकिंग लेआउट बहुत जटिल लगता है, लेकिन आप अभी भी कुछ और अधिक अभिनव और असामान्य करना चाहते हैं, तो एक पूर्ण स्क्रीन डिजाइन पर विचार करें.

5. फुल-स्क्रीन लेआउट

पूर्ण-स्क्रीन लेआउट, जैसा कि नाम से पता चलता है, उपयोगकर्ता को स्क्रॉल करने की कोई आवश्यकता नहीं है, एकल स्क्रीन पर फिट होती है। जो उन्हें कहानी कहने या प्रस्तुतियों के लिए आदर्श बनाता है.

उदाहरण के लिए, टुकड़ों में प्रजातियां. यह समृद्ध और इंटरैक्टिव प्रस्तुति अनुभव 30 लगे हुए प्रजातियों की कहानियों को बताता है.

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

जैसा कि आप देख सकते हैं, शक्तिशाली कल्पना के साथ फुल-स्क्रीन लेआउट अपने सबसे अच्छे रूप में हैं। यह उन्हें फोटोग्राफी, चित्र या वीडियो में समृद्ध वेबसाइटों के लिए एक बढ़िया विकल्प बनाता है.

ऐसा नहीं है कि आपको सिंगल स्क्रीन एप्रोच से सख्ती से चिपके रहना है। पहली नज़र में, राउक्स पार्लियामेंट स्क्वायर की वेबसाइट पर टुकड़ों में प्रजाति के रूप में उसी अर्थ में एक पूर्ण-स्क्रीन वेबसाइट प्रतीत होती है। उनकी भव्य कल्पना पूरे व्यूपोर्ट को भर देती है.

यह वेबसाइट अपनी शानदार फोटोग्राफी दिखाने के लिए पूरे व्यूपोर्ट का उपयोग करती है।

हालांकि, अतिरिक्त सामग्री देखने के लिए पृष्ठ को और नीचे नेविगेट करना संभव है। दुर्भाग्य से, यह इस लेआउट दृष्टिकोण के साथ एक संभावित दोष को उजागर करता है। उपयोगकर्ता हमेशा महसूस नहीं करते हैं कि वे स्क्रॉल कर सकते हैं और इसलिए मूल्यवान सामग्री को याद कर सकते हैं.

आपको यह भी ध्यान में रखना होगा कि लेआउट विभिन्न आकारों में कैसे अनुकूल होगा। उदाहरण के लिए, क्या पूर्ण स्क्रीन वाला दृष्टिकोण मोबाइल डिवाइस पर काम करेगा? इसके अलावा, स्क्रीन आकार में परिवर्तन या बस सिकुड़ने के रूप में छवियों को फसल देगा? आप जल्दी से छवियों के केंद्र बिंदु को छोटे आकार में देखने योग्य क्षेत्र से बाहर निकलते हुए देख सकते हैं.

उस ने कहा, यदि आपके पास दिखाने के लिए आश्चर्यजनक छवियां हैं, तो आप एक बेहतर लेआउट डिजाइन खोजने के लिए संघर्ष करेंगे। लेकिन, यदि आप उन छवियों के साथ-साथ कुछ विवरण और कॉल को जोड़ने का विकल्प चाहते हैं, तो आप एक वैकल्पिक लेआउट पर विचार कर सकते हैं।.

6. वैकल्पिक लेआउट

वैकल्पिक लेआउट पैटर्न वेब पर पाए जाने वाले अधिक में से एक है। आप पाएंगे कि यह सामग्री ब्लॉकों की एक श्रृंखला से बना है, जिनमें से प्रत्येक में दो-स्तंभ लेआउट है। ब्लॉक आम तौर पर एक तरफ एक छवि से बना होता है और दूसरी तरफ पाठ.

इसे इसका नाम क्या दिया गया है, जो कि छवि को दूसरी ओर ले जाता है। तो पहले ब्लॉक में बाईं ओर सामग्री और दाईं ओर छवि होगी, जबकि अगला ब्लॉक उस लेआउट को उलट देता है.

यह एक लेआउट दृष्टिकोण है जो विशेष रूप से किसी उत्पाद की विशेषताओं या लाभों की व्याख्या करते समय पसंदीदा होता है। उदाहरण के लिए, सॉफ्टवेयर उत्पाद पसंद करते हैं Webydo एक सुविधा दिखाने के लिए छवि का उपयोग करेगा और फिर यह समझाने के लिए कि यह कैसे काम करता है या लाभ प्रदान करता है.

Webydo वैकल्पिक पाठ और अलग-अलग सामग्री में इमेजरी इसके मुखपृष्ठ को अवरुद्ध करता है।

ऐसा नहीं है कि ये सामग्री ब्लॉक छवियों और पाठ तक सीमित हैं। कभी-कभी साइटें छवि को वीडियो से बदल देती हैं। समान रूप से, तत्व के सामग्री पक्ष में आइकन से प्रशंसापत्र या कार्रवाई के लिए कॉल तक सब कुछ शामिल हो सकता है.

उदाहरण के लिए, Convertkit प्रत्येक सामग्री ब्लॉक में उनके पाठ के साथ एक प्रशंसापत्र और कॉल टू एक्शन शामिल है.

Convertkit में प्रशंसापत्र और उनकी छवियों के साथ कार्रवाई करने के लिए कॉल शामिल हैं।

बारी-बारी से ब्लॉक करने का कारण इतना सामान्य है कि वे कुछ कमियों के साथ एक सरल लेआउट दृष्टिकोण हैं। यदि आपको कई विक्रय बिंदुओं को संवाद करने की आवश्यकता है, तो यह लगभग हमेशा एक विश्वसनीय लेआउट विकल्प होता है.

बेशक, आपकी आवश्यकताएं भिन्न हो सकती हैं, इसलिए कार्ड-आधारित लेआउट पर विचार करने का एक और विकल्प है.

7. कार्ड-आधारित लेआउट

कार्ड-आधारित पेज लेआउट एक और सामान्य लेआउट दृष्टिकोण है जो आप पूरे वेब पर देखेंगे.

कार्ड-आधारित लेआउट लोगों को चुनने के लिए उपयोगकर्ता के लिए विकल्पों की एक श्रृंखला देने का एक शानदार तरीका है, उन्हें निर्णय लेने के लिए प्रत्येक पसंद पर पर्याप्त जानकारी के साथ प्रस्तुत करना।.

यह उन्हें ई-कॉमर्स साइटों के उत्पाद लिस्टिंग पृष्ठों के लिए एक लोकप्रिय विकल्प बनाता है। यह वेबसाइट को उत्पाद की एक छवि, एक विवरण और मूल्य प्रदर्शित करने की अनुमति देता है। आप “बाद के लिए सहेजें” जैसी कार्यक्षमता भी जोड़ सकते हैं जैसा कि आप देख सकते हैं असोस वेबसाइट.

उत्पाद लिस्टिंग को प्रदर्शित करने के लिए ईकॉमर्स साइट्स जैसे एसोस के कार्ड आधारित लेआउट पसंद करते हैं।

हालाँकि, आपको किसी भी स्थिति में कार्ड-आधारित लेआउट का उपयोग करने वाली वेबसाइटें मिलेंगी जहाँ उपयोगकर्ताओं को किसी सूची से चयन करने की आवश्यकता होती है। उदाहरण के लिए, एक अन्य विशिष्ट उपयोग ब्लॉग या समाचार साइट पर लेखों की एक सूची प्रदर्शित करेगा.

कार्ड-आधारित लेआउट आपको कहानी, शीर्षक और विवरण की एक छवि प्रदर्शित करने की अनुमति देता है, साथ ही पोस्ट के बारे में कोई अतिरिक्त विवरण भी शामिल करना चाहता है।. Awwwards ब्लॉग कार्रवाई में इस तरह के उपयोग का एक उत्कृष्ट उदाहरण है.

Awwwards अपने ब्लॉग पर पोस्टों को सूचीबद्ध करने के लिए एक कार्ड-आधारित लेआउट का उपयोग करता है।

सभी के सर्वश्रेष्ठ, कार्ड-आधारित लेआउट अच्छी तरह से जिम्मेदारी से काम करते हैं, एक पंक्ति में कार्ड की संख्या धीरे-धीरे कम करने के साथ ही उपलब्ध चौड़ाई कम हो जाती है.

हालांकि, दृष्टिकोण में कुछ छोटी-मोटी कमियां हैं। सबसे पहले, जब आप छवि को शामिल करते हैं तो कार्ड सबसे अच्छा काम करते हैं। इसका मतलब है कि यदि आप अपने प्रत्येक सूची आइटम के लिए उपयुक्त फ़ोटो खोजने के लिए संघर्ष कर रहे हैं, तो आप एक अलग डिज़ाइन के साथ बेहतर हो सकते हैं.

अन्य मामूली समस्या अलग-अलग मात्रा में सामग्री के साथ है। यदि एक कार्ड में दूसरे की तुलना में अधिक सामग्री है, तो यह कार्ड के भीतर या प्रत्येक पंक्ति के बीच में सफेद स्थान छोड़ सकता है.

यदि कार्ड में अलग-अलग मात्रा में सामग्री है तो यह कार्ड के बीच रिक्त स्थान छोड़ सकता है।

इस समस्या को कम करने का एक तरीका यह नहीं है कि एक ही पंक्ति में कार्ड रखें और रखें, जैसा कि नीचे दिए गए उदाहरण में दिखाया गया है.

कार्डों को खाली जगह भरने की अनुमति देकर, आप अधिक सौंदर्यवादी मनभावन डिजाइन के साथ समाप्त होते हैं।

फिर भी, यह एक मामूली मुद्दा है, जो इस लेआउट दृष्टिकोण के व्यापक अपनाने के बारे में बताता है.

एक अन्य समान रूप से लोकप्रिय डिज़ाइन हीरो इमेज लेआउट है.

8. हीरो लेआउट

हीरो लेआउट का नाम हीरो छवियों के नाम पर रखा गया है, जो टेक्स्ट ओवरले के साथ बड़ी छवियां हैं जो कई वेबसाइटों पर होमपेज पर हावी हैं। Apple क्लासिक हीरो की छवि का अच्छा उपयोग करता है.

ऐप्पल क्लासिक हीरो की छवि का अच्छा उपयोग करता है।
MacOS के लिए Pixave नायक लेआउट को और भी आगे ले जाता है, ताकि वह अपने मुखपृष्ठ डिजाइन पर हावी हो सके.
MacOS के लिए Pixave नायक लेआउट को और भी आगे ले जाता है, ताकि वह अपने मुखपृष्ठ डिजाइन पर हावी हो सके।

क्या हीरो छवियों को इतना प्रचलित बनाता है कि वे आपको अपने लेआउट के लिए अनुमति देते हैं मूल्य प्रस्ताव अपनी वेबसाइट के प्रवेश बिंदु पर एक प्रभावशाली तरीके से.

जैसा कि आप देख सकते हैं Pixave तथा सेब ऊपर की वेबसाइटें जिनमें आमतौर पर एक बड़ी पृष्ठभूमि छवि, एक शीर्षक या स्ट्रैपलाइन और एक विवरण होता है। हीरो लेआउट भी अक्सर कार्रवाई के लिए एक प्रमुख कॉल के साथ आते हैं.

यदि आपको स्पष्ट रूप से यह बताने की आवश्यकता है कि आप अपने मुखपृष्ठ या लैंडिंग पृष्ठ पर इस तरह से क्या ध्यान आकर्षित करते हैं, तो एक नायक की छवि अच्छी तरह से जा सकती है। हालाँकि, यह संभवतः उनके उपयोग की सीमा है.

कभी-कभी आप बाद के पृष्ठों पर उपयोग किए गए नायक लेआउट देखेंगे। लेकिन, ज्यादातर मामलों में, नायक की छवि बस अधिक मूल्यवान सामग्री से ध्यान खींचती है। इसलिए सावधानी से प्रयोग करें.

उस के अलावा, वहाँ एक हीरो लेआउट का उपयोग करने से एक छोटी सी खामी है। हां, वे आम हैं, लेकिन उपयोगकर्ता उनसे परिचित हैं, और वे प्रभावी हैं.

एक काफी कम आम लेआउट विकल्प विभाजित स्क्रीन लेआउट है.

9. स्प्लिट स्क्रीन लेआउट

फ़ुल-स्क्रीन लेआउट की तरह, विभाजित स्क्रीन ध्यान आकर्षित करने का एक शानदार तरीका है जब उपयोगकर्ता आपकी वेबसाइट पर पहली बार आते हैं जैसा कि आप देख सकते हैं वेब डिज़ाइन कंपनी का मुखपृष्ठ नीचे.

यह साइट दो भागों को उनकी पेशकश को समझाने के लिए स्प्लिट-स्क्रीन लेआउट का उपयोग करती है।

ऊपर दिए गए उदाहरण को इतना प्रभावी बनाने के लिए स्प्लिट-स्क्रीन लेआउट का स्पष्ट कारण है। वेबसाइट यह स्पष्ट कर रही है कि उनके व्यवसाय के दो पक्ष हैं – डिजाइन और विकास.

एक समान उदाहरण है जब आप उपयोगकर्ताओं को एक स्पष्ट द्विआधारी विकल्प देना चाहते हैं। स्प्लिट-स्क्रीन उस स्थिति में बहुत मायने रखता है क्योंकि यह स्क्रीन को दो विकल्पों के बीच समान रूप से विभाजित करता है.

उदाहरण के लिए, मॉडलिंग एजेंसी 62 प्रबंधन उपयोगकर्ताओं को यह पहचानने के लिए प्रोत्साहित करने के लिए कि वे पुरुष या महिला मॉडल की तलाश कर रहे हैं, विभाजन स्क्रीन का उपयोग करता है.

62 प्रबंधन दो विकल्पों के बीच चयन करने के लिए उपयोगकर्ताओं को प्रोत्साहित करने के लिए एक स्प्लिट-स्क्रीन डिज़ाइन का उपयोग करता है।

दुर्भाग्य से इन सीमित संख्या में अनुप्रयोगों के अलावा, विभाजित-स्क्रीन डिज़ाइन को अपनाने का कोई कारण नहीं है। यह एक अपेक्षाकृत सीमित लेआउट विकल्प है, और बस ऐसे कई परिदृश्य नहीं हैं जहां यह उपयुक्त है। हालांकि, उन मामलों में जहां यह है, यह अब तक का सबसे अच्छा विकल्प है.

एक समान विकल्प जो थोड़ा और अधिक लचीलापन प्रदान करेगा, वह है असममित लेआउट.

10. विषम लेआउट

जबकि स्प्लिट-स्क्रीन लेआउट व्यूपोर्ट के बीच में एक समान विभाजन को बाध्य करता है, एक विषम डिजाइन आपको स्क्रीन को विभाजित करने की अनुमति देता है, हालांकि आप फिट देखते हैं.

स्प्लिट-स्क्रीन पर इस लेआउट का लाभ यह है कि यह पृष्ठ के एक विशेष पक्ष पर जोर जोड़ने की अनुमति देता है। अधिक अचल संपत्ति का एक पक्ष है, जितना अधिक आप उस पर ध्यान केंद्रित कर रहे हैं। बदले में, आप प्राथमिक और माध्यमिक सामग्री की पहचान करने की अनुमति देता है.

प्राथमिक और द्वितीयक स्तंभों के आधार के साथ, आप कई तरीकों से दृष्टिकोण का उपयोग कर सकते हैं। उदाहरण के लिए, फेलिक्स लेसौफ सामग्री और नेविगेशन के बीच विभाजित करने के लिए अपनी साइट पर विधि का उपयोग करता है.

Félix Lesouef अपनी साइट के नेविगेशन को हाइलाइट करने के लिए एक विषम लेआउट का उपयोग करता है।

इसके विपरीत, द्वारा पोषण करता है वेबसाइट आपको अपने वेबसाइट के अगले भाग को देखने की अनुमति देने के लिए दूसरे कॉलम का उपयोग करती है.

Nourish Eats इस लेआउट दृष्टिकोण का उपयोग माध्यमिक सामग्री को अधिक प्रमुखता से उजागर करने के लिए करता है।

कई मायनों में, विषम लेआउट एक उत्कृष्ट विकल्प है। यह लचीला, लागू करने के लिए अपेक्षाकृत आसान और कम उपयोग किया जाता है। यह आपकी वेबसाइट को कुछ अन्य विकल्पों के सिरदर्द के बिना अलग दिखने का एक सुविधाजनक तरीका है.

लेआउट कैसे चुनें

इस लेख को पढ़कर, आपने अपनी साइट के लिए सही लेआउट चुनने में अपना पहला कदम बढ़ाया है। आपने सीखा है कि आपके लिए किस तरह के विकल्प उपलब्ध हैं.

इसके बाद, आपको यह समझने की आवश्यकता है कि आपकी साइट के लिए कौन से विकल्प उपयुक्त हो सकते हैं। ऐसा करने का एक तरीका अपने प्रतिस्पर्धियों को देखना है। हालाँकि, मैं वहाँ रुकने की सलाह नहीं दूंगा। खतरा यह है कि आप उन्हें कॉपी करेंगे, और वह आपको हमेशा एक कदम पीछे रखेगा.

इसके बजाय, उन अन्य क्षेत्रों की साइटों पर नज़र डालें, जिनमें आपके स्वयं के लिए संबंधित प्रकार की सामग्री है। अगर आपके पास एक है विवरणिका वेबसाइट बी 2 बी दर्शकों के लिए लक्षित है, अन्य समान साइटों पर एक नज़र है। समान रूप से, यदि आपके पास एक ईकामर्स साइट है, तो अन्य क्षेत्रों में ईकामर्स को देखें.

वहां से, अपने डिजाइनर के साथ कुछ अलग तरीकों के साथ प्रयोग करने के लिए काम करें। उन्हें अलग-अलग लेआउट के आधार पर कुछ विचारों को वायरफ्रेम करने के लिए प्राप्त करें और देखें कि आपकी सामग्री सबसे अच्छी है.

यदि आप अपने आप को निर्णय लेने में असमर्थ पाते हैं या सही दिशा में आत्मविश्वास की कमी महसूस करते हैं, तो कुछ उपयोगकर्ताओं के सामने विकल्प रखने का प्रयास करें और उनकी प्रतिक्रियाएं प्राप्त करें। केवल उनसे पूछें जो वे पसंद करते हैं, उनसे यह भी पूछें कि क्या उन्होंने महत्वपूर्ण सामग्री देखी या समझा कि कंपनी क्या थी.

सच में, आप शायद खुद को अपनी वेबसाइट के विभिन्न हिस्सों के लिए अलग-अलग लेआउट दृष्टिकोणों से चुन और चुन पाएंगे, और यह ठीक है। क्योंकि जब वेबसाइट लेआउट की बात आती है, तो सही समय पर सही का उपयोग करना महत्वपूर्ण होता है.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map