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

डिजाइन कन्वर्जेंस पर एक नोट 

शब्द "डिज़ाइन कनवर्जेन्स" का अर्थ है कि किस तरह से डिज़ाइन को समय-समय पर समानता, एकीकरण  होने की आदत है। हाल ही में @jongold ने निम्नलिखित ट्वीट किया: 

निम्नलिखित दो संभावित वेबसाइटों में, उनमें से कौन एक आप वर्तमान में डिजाइन कर रहे हैं?  pic.twitter.com/ZD0uRGTqqm

— gold (@jongold) February 2, 2016 

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

या, पॉल बोआ के अनुसार, क्या हम केवल एक परिपक्व वेब डिज़ाइन दृश्य का हिस्सा हैं?  क्या हम जो प्रयोक्ताएं (users) चाहते हैं उसको निर्माण कर रहे हैं; वे क्या उम्मीद करते हैं, और जिससे हमारे उत्पादों का उपयोग करना आसान है? 

"जितना लंबे समय तक कोई ऑब्जेक्ट आसपास रहता है, उतना ही इसकी डिज़ाइन का मानकीकरण होता है" - पॉल बोआग 

मैं निर्णय लेने के लिए इसे आपके ऊपर छोड़ दूँगा।  इस बीच, चलो कुछ फुल-ऑन फुल स्क्रीन वेब डिज़ाइन पर एक नज़र डालें!

ऊपर से नीचे, बाएं से दाएं 

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

मैकशिफ्ट स्क्रीन के नीचे एक द्वितीयक नेवीगेशन संलग्न करने के लिए इस पैटर्न का उपयोग करते हैं, कुछ पिछले/अगले अंक लिंक्स बाएं और दाएं के साथ।  पृष्ठभूमि छवि background-size: cover; का उपयोग करती है एक विशाल figure तत्व (element) पर। 

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

जेम्स ट्यूपर  background-position: center bottom; के साथ अपने फेस ग्राफ़िक रखकर स्क्रीन के नीचे से देखता है।  विशाल पीले रंग की छप सुंदर रूप से नेटिव सीएसएस height: 100vh; द्वारा व्यूपोर्ट ऊंचाई के बराबर बनाया जाता है।

इन दो सीएसएस तकनीकों के बारे में अधिक जानें: 

• सीएसएस
  7 सीएसएस इकाइयां जिन्हें आप नहीं जानते हैं 
  जोनाथन कतरल 
• सीएसएस 
  सीएसएस पृष्ठभूमि (बैक्ग्राउन्ड) विशेषता की समीक्षा 
  थोरिफ फ़िरदौस 

लाइफस्टाइल पत्रिका लैगोम, इलियट जे और सामन्था स्टॉक की दिमागी उपज, एक होमपेज का उपयोग करता है जो स्क्रीन को पूरी तरह से भरता है। यहां कोई स्क्रॉल नहीं किया गया है (जब तक कि एक छोटी स्क्रीन पर नहीं देखा जाए)।  लैगॉम (Lagom) अपने सोशल लिंक को पैक करने के लिए नीचे किनारे का उपयोग करता है।

सोल (Soul) एक Shopify टेम्पलेट है, और इसके लेआउट में से एक दाईं ओर स्थित नेविगेशन लिंक के साथ एक पूर्ण स्क्रीन स्लाइडर है।

कृपया स्क्रॉलिंग करते रहो ↓

परिचय की एक रूप में पूर्ण स्क्रीन का उपयोग करने के खतरे यह है कि उपयोगकर्ताओं को पता ही नहीं होता कि स्क्रॉलिंग के द्वारा और भी सामग्री मिलना बाकी है। हमारे स्वयं के एन्वाटो (Envato) होम पेज ने इसे "स्क्रॉल" आइकन से ज़ोर दिया है, यह सुझाव दे रहा है कि आपको परत से नीचे एक बार झांकना चाहिए।

Blandly "नीचे देखें" कहने के लिए उत्साहजनक नीचे की ओर इशारा करने वाले तीर को चुनते हैंI 

Kindeo होम पेज मेरे पसंद का एक तकनीक का उपयोग करता है; यह सुनिश्चित करता है कि अगले भाग का एक छोटा सा टुकड़ा हमेशा व्यूपोर्ट के नीचे दिखाई देता है। इसमें "अधिक जानकारी प्राप्त करें" के साथ एक तीर भी है, इसलिए उपयोगकर्ता को कभी शक नहीं है कि फोल्ड से नीचे सामग्री पाया जा सकता है।

किलानी (Kilani) ने बजाय आटोप्लेइंग ध्वनि के संदिग्ध दृष्टिकोण को लिया है; स्क्रीन के नीचे दाईं ओर म्यूट बटन है। आपको आगे स्क्रॉल करने का सुझाव देने का उनका तरीका भी माउस कर्सर के लिए "स्क्रॉल डाउन" निर्देश को दिलचस्प बनाता है: 

वीडियो

दमिर कोटरिक, एन्वाटो (Envato) में पूर्व यूएक्स डिजाइनर (UX Designer), ने हवाई (एरीअल) फोटोग्राफी के लिए अपने जुनून के परिणामस्वरूप फाल्कन फिल्म्स की शुरुआत की।  यह केवल उचित है कि वीडियो फाल्कन फिल्मों के होम पेज में एक बड़ा हिस्सा है; पृष्ठभूमि <video> की जांच करें, फिर रसदार मेलबोर्न ड्रोन फुटेज के लिए शोरेल (showreel) देखें।

फिर से, दमिरे ने एक फुल स्क्रीन हिरो अनुभाग बनाने के लिए नेटिव सीएसएस  min-height: 100vh;  का उपयोग किया है।

लैंडस्केप एक ही प्रभाव को प्राप्त करता है; एक फुल स्क्रीन, अतिरिक्त शोरील के साथ ऑटोप्लेइंग वीडियो, लेकिन फुल स्क्रीन प्राप्त करने के लिए जावास्क्रिप्ट का उपयोग करता है। ऑटोप्लेइंग एमपी4 (mp4) वीडियो फ़ाइल ही 1.3 एमबी है, लेकिन आपके बैंडविड्थ को रोकने के लिए कुछ और नहीं है।

स्टाइल

एक बात जिसने हमने अभी तक उल्लेख नहीं किया है वह फुल स्क्रीन हमें देता है: एक कैनवास! एक उत्पाद (प्राडक्ट) पेश करने के लिए जगह का उपयोग करते हुए, एक कंपनी, एक विचार, इस पैटर्न का पूरा मुद्दा है। यह बाकी की सामग्री के अव्यवस्था को हटा देता है और संदेश और व्यक्तित्व पर केंद्रित है।

लैंडस्केप का उदाहरण पहले से एक खूबसूरत कोबाल्ट ब्लू का उपयोग करता है (यह एक वजह है कि मुझे यह पसंद क्यों है) और Voog ऐसा कुछ करता है, जो बहुत अच्छा  लग रहा है।

मैं हमेशा यह कहता हूं- यह छवि डूओटोन है, इसलिए इसकी वर्तमान 540kb साइज़ आसानी से कम किया जा सकता है।  कुछ मामूली धुंधला, फिर जेपीजी (JPG) की गुणवत्ता को 50% तक कम करने से इसे प्रभाव से समझौता किए बिना लगभग 50kb तक लाया जाता है।

ब्लूमबर्ग बिजनेसविक डिजाइन कॉन्फ्रेंस (आप जा रहे हैं?) अपनी संकेत बनाने के लिए एक सार (abstract) टाइपोग्राफिक लेआउट का उपयोग करता है। डिजाइन अभिसरण? यहाँ नहीं, दोस्त।

क्या मैंने कभी भी एनवाटो टट्स+ अनुवाद परियोजना का उल्लेख किया है?  संभवतः .. वैसे भी, मैं आरटीएल स्क्रिप्ट (RTL script) के इस थीम के प्रदर्शन से प्यार करता हूं- प्रोलैंड, कई पूर्ण स्क्रीन लेआउट विकल्पों के साथ एक बूटस्ट्रैप से बनाया गया लैंडिंग पेज टेम्पलेट। 

निष्कर्ष (Had Your Fill?)

फुल स्क्रीन होम पेज एक पैटर्न है जिसे हम जल्द ही किसी भी समय गायब होने की संभावना नहीं देखते हैं। और यह क्यों होना भी चाहिए? यह उपयोगकर्ताओं को सभी प्रकार की वेबसाइटों के लिए शुरू करने का एक प्रभावी तरीका है।  आपके कुछ पसंदीदा कौन-कौन हैं?  आपने इस पैटर्न का इस्तेमाल किस स्थान पर देखा है, बेहतर या बदतर के लिए ? हमें टिप्पणियों (कामेन्टस) में बताएं!