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