मंगलवार को देर शाम आप अपना होमपेज रिफ़्रेश करते हैं। हेडलाइन ठीक है, फ़ोटो भी ठीक हैं, फिर भी विज़िटर कुछ ही सेकंड में लौट जाते हैं। आप सोचने लगते हैं कि कहीं वेबसाइट लेआउट ही वह हिस्सा तो नहीं जिसे आप अनदेखा करते आए हैं। अक्सर यही होता है। छोटे-छोटे विज़ुअल फ़ैसले पहली छाप को उससे कहीं जल्दी बना देते हैं जितना ज़्यादातर बिज़नेस मालिक सोचते हैं।
वेबसाइट लेआउट के प्रकारों में सिंगल कॉलम, स्प्लिट, ग्रिड और मैगज़ीन स्टाइल पैटर्न शामिल हैं। यह चैप्टर आसान भाषा में बताता है कि इसका मतलब क्या है, यह आपकी वेबसाइट और मार्केटिंग पर क्यों असर डालता है और भारी-भरकम शब्दों में उलझे बिना इसे कैसे अपनाएँ। आप यह भी देखेंगे कि लेआउट डिज़ाइन का इसी तस्वीर से क्या रिश्ता है। चलिए, एक-एक कदम करके समझते हैं।
वेबसाइट लेआउट के पीछे के मुख्य विचार
वेबसाइट लेआउट के प्रकारों में सिंगल कॉलम, स्प्लिट, ग्रिड और मैगज़ीन स्टाइल पैटर्न शामिल हैं।
कंटेंट की मात्रा और यूज़र के मुख्य काम के हिसाब से लेआउट चुनें।
वेबसाइट डिज़ाइन लेआउट के चुनाव सभी तरह के पेजों में एक जैसे रहने चाहिए।
इसे काम में लाना
मोबाइल फ़र्स्ट कहानी कहने और सीधे-सादे ऑफ़र के लिए सिंगल कॉलम लेआउट इस्तेमाल करें।
इस विषय को मॉड्यूल के बाकी हिस्सों से जोड़ने के लिए डिज़ाइन में विज़ुअल बैलेंस और डिज़ाइन अलाइनमेंट देखें।
सीखते समय कभी-कभार पूरा रीडिज़ाइन करने से बेहतर है लगातार छोटे सुधार करना।
आज ही इस्तेमाल करने लायक प्रैक्टिकल चेकलिस्ट
मोबाइल फ़र्स्ट कहानी कहने और सीधे-सादे ऑफ़र के लिए सिंगल कॉलम लेआउट इस्तेमाल करें।
किसी भी पेज को जाँचते समय देखें कि मोबाइल पर पहले स्क्रोल में ही वेबसाइट लेआउट से जुड़ी चीज़ें साफ़ दिख रही हैं या नहीं। अगर नहीं, तो छोटे-छोटे डिटेल चमकाने से पहले सेक्शन का क्रम बदलें।
बदलाव से पहले और बाद के स्क्रीनशॉट सेव करें, ताकि आप समझ सकें कि आपकी साइट पर वेबसाइट लेआउट के लिए क्या असरदार रहा।
यह चेकलिस्ट उन सभी को दें जो आपकी साइट अपडेट करते हैं, ताकि नए पेजों पर भी लेआउट डिज़ाइन एक जैसा रहे।
इस महीने नज़र रखने के लिए एक मेट्रिक चुनें, जैसे पेज पर बिताया समय या फ़ॉर्म भरना शुरू करने वाले लोग, ताकि डिज़ाइन के बदलाव सिर्फ़ पसंद पर नहीं, बिज़नेस के नतीजों से जुड़े रहें।
यह विषय आपके पूरे ब्रांड से कैसे जुड़ता है
विज़ुअल फ़ैसले शायद ही कभी सिर्फ़ एक पेज तक सीमित रहते हैं। वेबसाइट डिज़ाइन लेआउट के चुनाव सभी तरह के पेजों में एक जैसे रहने चाहिए।
आपके सोशल पोस्ट, ईमेल और प्रिंट की चीज़ें भी वही हायरार्की, रंग और टाइप के नियम दोहराएँ जो आप वेब पर इस्तेमाल करते हैं।
जब ब्रांड के विज़ुअल इधर-उधर भटकने लगते हैं, तो ग्राहकों को हल्की-सी बेमेलता महसूस होती है, भले ही वे उसे समझा न पाएँ।
इस मॉड्यूल के किसी जुड़े हुए चैप्टर से तुलना करने के लिए डिज़ाइन कॉन्ट्रास्ट देखें।
कंटेंट की मात्रा और यूज़र के मुख्य काम के हिसाब से लेआउट चुनें।
वे सवाल जिन्हें लोग अक्सर नज़रअंदाज़ कर देते हैं
लेआउट डिज़ाइन, वेबसाइट डिज़ाइन लेआउट जैसे दूसरे शब्द गहराई वाले उदाहरण खोजने और अपने काम को आम मानकों से मिलाने में मदद करते हैं।
वेबसाइट डिज़ाइन लेआउट के चुनाव सभी तरह के पेजों में एक जैसे रहने चाहिए।
एक ऐसा बदलाव लिखें, जिसे आप इस हफ़्ते किसी लाइव पेज पर टेस्ट करेंगे, पहले और बाद की तुलना के साथ। नपे-तुले छोटे बदलाव धुंधली योजनाओं से बेहतर होते हैं।
अपनी टीम को वेबसाइट लेआउट के आसपास एक साझा शब्दावली सिखाने से डिज़ाइनर और एजेंसियों के साथ बार-बार सुधार कराने का चक्कर कम हो जाता है।
विज़ुअल अपडेट को आसान बनाने वाले टूल
लेआउट और स्टाइलिंग की कई दिक्कतें ठीक करने के लिए आपको कस्टम कोड की ज़रूरत नहीं है। विज़ुअल एडिटर में आप मोबाइल और डेस्कटॉप व्यू देखते हुए स्पेसिंग, रंग और टाइपोग्राफ़ी बदल सकते हैं।
WEMASY में विज़ुअल एडिटिंग वाला वेबसाइट बिल्डर शामिल है, ताकि हर छोटे बदलाव के लिए डेवलपर का इंतज़ार किए बिना आप बदलाव पब्लिश कर सकें। जो सीखा है उसे लागू करने के लिए तैयार हों, तो वेबसाइट बिल्डर खोलें।
अपडेट पब्लिश करने के बाद डिज़ाइन में विज़ुअल बैलेंस और डिज़ाइन अलाइनमेंट को दोबारा देखें, ताकि यह मॉड्यूल आपके दिमाग में जुड़ा रहे।
अब वेबसाइट लेआउट को देखने का एक काम का नज़रिया आपके पास है। इसे तब इस्तेमाल करें जब आप अपनी साइट जाँचें, मार्केटिंग की चीज़ें मंज़ूर करें या डिज़ाइनर को ब्रीफ़ दें। इस मॉड्यूल में रफ़्तार बनाए रखने के लिए डिज़ाइन अलाइनमेंट और डिज़ाइन कॉन्ट्रास्ट से आगे बढ़ें।
वेबसाइट लेआउट सीखना धीरे-धीरे आने वाला हुनर है। एक सुधार लाइव करने के बाद इस चैप्टर को दोबारा पढ़ें, ताकि बातें पढ़ने से आदत में बदल जाएँ। थोड़ी-थोड़ी बार की समीक्षा, एक साथ सारे नियम रटने से बेहतर है। नोट रखें कि आपकी ऑडियंस पर क्या असरदार रहा, ताकि अगला अपडेट तेज़ हो।
अक्सर पूछे जाने वाले सवाल
वेबसाइट लेआउट में सुधार लाने में कितना समय लगता है?
इस चैप्टर की बुनियादी बातें अपनाने के बाद ज़्यादातर छोटे बिज़नेस को कुछ ध्यान से किए गए सेशन में ही पेज पहले से साफ़ दिखने लगते हैं। अपने होमपेज से शुरू करें, फिर वही नियम सर्विस और संपर्क पेजों पर लागू करें।
क्या वेबसाइट लेआउट पर काम करने के लिए आपको डिज़ाइनर चाहिए?
जटिल रीब्रांडिंग में डिज़ाइनर मदद करता है, लेकिन वेबसाइट लेआउट से जुड़े कई सुधार आप खुद कर सकते हैं, बस आपको पता होना चाहिए कि क्या देखना है। इससे जुड़ी जानकारी के लिए इस चैप्टर के साथ डिज़ाइन में विज़ुअल बैलेंस भी देखें।
क्या WEMASY आपकी वेबसाइट पर वेबसाइट लेआउट अपनाने में मदद कर सकता है?
WEMASY के वेबसाइट बिल्डर में विज़ुअल एडिटर शामिल है, ताकि आप बिना कोड के लेआउट, रंग और टाइपोग्राफ़ी बदल सकें। टेम्पलेट अपडेट करने और बदलाव को मोबाइल पर देखने के लिए वेबसाइट बिल्डर खोलें।
वेबसाइट लेआउट में सबसे आम गलती क्या होती है?
लोग एक बार में एक पेज ठीक करने की बजाय सब कुछ एक साथ ठीक करने की कोशिश करते हैं। कोई एक प्राथमिकता चुनें, जैसे पढ़ने की आसानी या कॉन्ट्रास्ट, फिर अगले सुधार के लिए डिज़ाइन अलाइनमेंट देखें।
वेबसाइट लेआउट का SEO से क्या संबंध है?
साफ़ विज़ुअल हायरार्की और पढ़ने में आसान टाइप विज़िटर को पेज पर ज़्यादा देर रोकते हैं, जिससे वे एंगेजमेंट सिग्नल मज़बूत होते हैं जिन पर सर्च इंजन नज़र रखते हैं। बेहतर नतीजों के लिए डिज़ाइन के सुधारों के साथ कंटेंट का मज़बूत ढाँचा भी रखें।
वेबसाइट लेआउट के बाद आगे कहाँ से सीखें?
अपने ब्रांड के लिए ऑनलाइन पूरा विज़ुअल सिस्टम बनाने के लिए इस किताब में डिज़ाइन में विज़ुअल बैलेंस और डिज़ाइन अलाइनमेंट पढ़ना जारी रखें।