स्क्रीन के शब्द: एक पेज के छह हिस्से

यह लेख 6 नवंबर 2026 को लिखा गया था।

AI टूल्स तेज़ी से बदलते हैं। लेकिन पेज का बुनियादी ढाँचा (bones) नहीं बदलता। हेडर (header), हीरो (hero), सेक्शन (section), फ़ुटर (footer), नेविगेशन (navigation), कार्ड (card) — कोई भी व्यक्ति इन छह शब्दों को सीखकर अपनी पहली स्क्रीन का ब्रीफ़ AI को दे सकता है। ऐप्स के अंदर के मेनू बदलते रहेंगे, इसलिए इसे एक पेज का नक्शा समझकर पढ़ें, किसी वेबसाइट बिल्डर के पैनलों का दौरा नहीं।

सजावट से पहले, एक पेज असल में कामों का एक सिलसिला होता है: कोई हिस्सा आपको बताता है कि आप कहाँ हैं; कोई हिस्सा एक बार में साफ़ बताता है कि यह जगह किस बारे में है; कोई हिस्सा एक ही तरह की जानकारियों को दोहराता है; कोई हिस्सा आपको आगे का रास्ता दिखाता है; और कोई हिस्सा पेज को समेटता है। जब इन कामों के नाम तय नहीं होते, तो AI मॉडल एक पोस्टर जैसा डिज़ाइन बना देता है — एक बड़ी सी तस्वीर, उस पर तैरते कुछ शब्द, और नीचे जाने का कोई साफ़ रास्ता नहीं। पेज दिखने में भले पूरा लगे, लेकिन फोन पर उसका इस्तेमाल करना नामुमकिन हो जाता है।

AI prompt में इन हिस्सों के नाम अंग्रेज़ी में लिखें और अपनी भाषा में नीचे उनकी व्याख्या करें। अगर आपकी भाषा में किसी हिस्से का कोई पक्का और प्रचलित शब्द है, तो उसका इस्तेमाल करें और पहली बार में अंग्रेज़ी नाम को कोष्ठक में लिख दें। अगर ऐसा शब्द नहीं है, तो जबरन कोई नया शब्द न गढ़ें। एक छोटी व्याख्या और अंग्रेज़ी संज्ञा ही काफ़ी है।

छह मुख्य हिस्से, जिस क्रम में उपयोगकर्ता उनसे मिलता है

हेडर (header) सबसे ऊपर की पतली पट्टी होती है। इसमें जगह का नाम और बाहर निकलने के कुछ मुख्य रास्ते होते हैं। यह कोई दूसरा हीरो क्षेत्र नहीं है। अगर सब कुछ अहम हेडर में ही भर दिया जाए, तो पेज का शीर्ष गायब हो जाएगा और वहाँ सिर्फ़ भीड़ दिखेगी।

हीरो (hero) सबसे पहला बड़ा क्षेत्र होता है — एक मुख्य बात, उसे संभालने वाला एक वाक्य, और एक मुख्य बटन। जैसे किसी क्लिनिक का हीरो क्षेत्र बता सकता है कि वहाँ किस चीज़ का इलाज होता है और साथ में “अपॉइंटमेंट लें” का बटन दे सकता है। दुकान का हीरो क्षेत्र अपनी मुख्य चीज़ बताकर “आज की ताज़ा ब्रेड देखें” का विकल्प दे सकता है। अगर पूरे कारोबार की जानकारी हीरो में ही भर दी जाए, तो वह ऊपर चिपकाया गया एक पर्चा (brochure) बन जाता है; फिर बाकी पेज उसी बात को दोहराता रहता है और फोन इस्तेमाल करने वाला व्यक्ति कभी कीमत या पते तक नहीं पहुँच पाता।

सेक्शन (section) एक शीर्षक के साथ किसी एक विषय की जानकारी देता है — जैसे खुलने का समय, दरें, हमारी टीम, या अक्सर पूछे जाने वाले सवाल। सेक्शन के ज़रिए ही एक लंबा पेज आसानी से पढ़ा और समझा जा सकता है। AI से सेक्शन माँगते समय सिर्फ़ “section” कहने के बजाय उस सवाल का ज़िक्र करें जो आगंतुक के मन में है। जैसे “खुलने के समय का एक सेक्शन, जिसमें हफ़्ते के दिन टेक्स्ट के रूप में लिखे हों, न कि तस्वीर के रूप में” — यह निर्देश हर भाषा में सही काम करता है, जबकि समय-सारणी की तस्वीर फोन पर ख़राब हो जाती है।

फ़ुटर (footer) पेज का समापन हिस्सा है। यहाँ पता, दोबारा ज़रूरत होने पर खुलने का समय, और संपर्क करने का तरीका होता है। जो लोग भटक जाते हैं, वे जानबूझकर पेज के एकदम नीचे स्क्रॉल करते हैं। ऐसे में अगर फ़ुटर सिर्फ़ एक सजावटी पट्टी बनकर रह जाए, तो वह उपयोगकर्ता को निराश करता है।

नेविगेशन (navigation) मुख्य रास्तों की एक छोटी सूची होती है, जो आमतौर पर हेडर में रहती है। फोन की स्क्रीन पर पाँच विकल्प भी काफ़ी ज़्यादा होते हैं। इससे ज़्यादा विकल्पों को एक मेनू बटन के अंदर रखना चाहिए, न कि सिकुड़ते शब्दों की लंबी लाइन में। ऐसा नेविगेशन न माँगें जो हर सेक्शन के शीर्षक को दोहराता हो; वह वेबसाइट बनने का नाटक करने वाली विषय-सूची (table of contents) मात्र है।

कार्ड (card) एक ही तरह की जानकारियों को दोहराने वाला बक्सा होता है — जैसे कोई सेवा, क्लास, या उत्पाद। हर कार्ड की बनावट एक जैसी रहती है: एक छोटी तस्वीर या आइकन (अगर उपलब्ध हो), एक शीर्षक, एक वाक्य और एक बटन। अगर हर कार्ड का डिज़ाइन अलग होगा, तो वे एक सेट नहीं कहलाएँगे, बल्कि पाँच अलग-अलग पोस्टर बन जाएँगे।

वही कार्ड, दो चौड़ाइयों में

जो पेज सिर्फ़ कंप्यूटर स्क्रीन के हिसाब से डिज़ाइन किया जाता है, वह उन जगहों पर बेकार साबित होता है जहाँ फोन ही मुख्य कंप्यूटर है। इसलिए AI को कॉलम की संख्या स्पष्ट बताएँ: चौड़ी स्क्रीन पर एक लाइन में तीन कार्ड, और संकीर्ण (फोन) स्क्रीन पर एक कार्ड के नीचे दूसरा कार्ड। कार्ड के अंदर के शब्द नहीं बदलते, सिर्फ़ उनकी लाइन टूटती है। इसे ही रिस्पॉन्सिव लेआउट (responsive layout) कहते हैं, और यह एक स्पष्ट शर्त है, कोई ढीला-ढाला अंदाज़ नहीं। सिर्फ़ “इसे रिस्पॉन्सिव बनाओ” कहने पर मॉडल ऐसा बदलाव चुन सकता है जो बटन को छिपा दे। लेकिन “चौड़ी स्क्रीन पर तीन कॉलम, छोटी स्क्रीन पर एक कॉलम, और बटन हमेशा साफ़ दिखे” कहने पर वह बिल्कुल सही बनता है।

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

स्टिकी हेडर (sticky header) — यानी ऐसा हेडर जो पेज स्क्रॉल करने पर भी ऊपर ही टिका रहता है — एक ऐच्छिक विकल्प है। यह तब काम आता है जब नेविगेशन ही वापस लौटने का मुख्य रास्ता हो। लेकिन अगर यह छोटे फोन की एक-तिहाई स्क्रीन घेर ले, तो नुकसान पहुँचाता है। इसे तभी माँगें जब वापस लौटने का बटन नीचे लिखे पैराग्राफ़ से ज़्यादा ज़रूरी हो। अगर आप अंग्रेज़ी नाम इस्तेमाल करना चाहते हैं, तो “sticky header” कहें और साथ में शर्त भी जोड़ें: यह छोटा रहे और नीचे के पहले शीर्षक को न ढके।

एक पेज जो दिखने में पूरा था लेकिन इस्तेमाल में बेकार

एक छोटे क्लिनिक ने AI से “एक सुंदर होमपेज” बनाने को कहा। मॉडल ने एक लंबे गलियारे की तस्वीर, उस पर एक बड़ा नारा, और नीचे बिना किसी विवरण के धुंधले आइकनों की एक लाइन बनाकर दे दी। दुकान में लैपटॉप पर तो यह शांत और सुंदर लगा, लेकिन बस स्टॉप पर खड़े होकर जब किसी ने फोन पर खोला, तो नारे ने दरवाज़ा ढक लिया, आइकन सिकुड़कर अपठनीय पट्टी बन गए, और खुलने का समय तस्वीर के अंदर ही लिखा था — जिससे न तो उसका अनुवाद हो सका और न ही स्क्रीन रीडर उसे पढ़ पाया। उस पेज पर हेडर, हीरो, सेक्शन या कार्ड जैसा कुछ भी नहीं था; वह बस एक ऐसा पोस्टर था जो स्क्रॉल हो सकता था।

दूसरी बार में ब्रीफ़ में बुनियादी ढाँचे के नाम दिए गए और सजावट वाले शब्दों को हटा दिया गया: क्लिनिक के नाम और तीन लिंक (सेवाएँ, समय, कैसे आएँ) के साथ हेडर; एक वाक्य और “अपॉइंटमेंट लें” बटन के साथ हीरो; टेक्स्ट के रूप में लिखे तीन सेक्शन; तीन तरह के इलाजों के लिए कार्ड (चौड़ी स्क्रीन पर तीन, फोन पर एक के नीचे एक); और पते के साथ फ़ुटर। पेज बिल्कुल व्यावहारिक बन गया, जिसे बस स्टॉप पर खड़ा व्यक्ति आसानी से इस्तेमाल कर सकता था। गलियारे की तस्वीर अब भी मौजूद थी, लेकिन हीरो के अंदर वाक्य से छोटे आकार में। वह अब पूरा पेज नहीं थी।

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

यह पहली prompt को कैसे बदलता है

आपकी पहली prompt सिर्फ़ एक पैराग्राफ़ की हो सकती है:

Build a page with a header (the name and three links), a hero (one sentence and one button), three sections, a row of cards that becomes a single column on a narrow screen, and a footer with the address as text.

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

लगभग हर छोटे संगठन या काम को असल में इसी तरह के पेज की ज़रूरत होती है। अगर आप सिर्फ़ “आधुनिक और साफ़” (modern and clean) कहेंगे, तो मॉडल इस पर फालतू की सजावट चिपका देगा। “आधुनिक” पेज का कोई हिस्सा नहीं है; जबकि हेडर, हीरो, सेक्शन, फ़ुटर, नेविगेशन और कार्ड असली हिस्से हैं। इन्हें सीखें, अंग्रेज़ी में पेस्ट करें, और जानकारियों को पढ़ने वाले व्यक्ति की भाषा में रखें।

इसके बाद का फ़ैसला किसी नए हिस्से के बारे में नहीं है। वह इस बारे में है कि जब पेज को उपयोगकर्ता से कुछ पूछना हो या उसे कहीं बाहर भेजे बिना और जानकारियाँ दिखानी हों, तब क्या किया जाए। वह सेक्शन से अलग बनावट है, और यही हमारा अगला लेख है।