वेबसाइटों के लिए पृष्ठभूमि डिजाइनिंग

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

आज, पृष्ठभूमि को ठीक से बनाना एक बार की तुलना में अधिक कठिन है, और कुछ नई चुनौतियों को प्रस्तुत करता है, जबकि कुछ संभावितों को प्रतिबंधित करना जो अन्यथा होता।

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

क्यों चीजें बदल गई हैं क्योंकि उत्तरदायी डिजाइन की आवश्यकता है, और विभिन्न स्क्रीन आकार और स्क्रीन प्रकार लोगों की विविधता का उपयोग कर सकते हैं।

नतीजतन, पृष्ठभूमि आज साइट डिजाइन में एक कम महत्वपूर्ण तत्व बन गई है, और बहुत सारी साइटों की कोई आधिकारिक पृष्ठभूमि नहीं है।

क्या पृष्ठभूमि वास्तव में महत्वपूर्ण हैं? यह पता लगाने के लिए, हमने शीर्ष 30 रैंक वाली वेबसाइटों (दोहराव सहित) का निरीक्षण किया और परिणाम बहुत दिलचस्प हैं।

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

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

30 के लिए शीर्ष 2017 वेबसाइटों में, उचित पृष्ठभूमि वाली एकमात्र साइटें थीं:

  • ट्विटर, एक फोटोग्राफिक पृष्ठभूमि के साथ (10th स्थान पर)
  • लाइव (आउटलुक), एक ठोस रंग पृष्ठभूमि (12th रैंक) के साथ
  • नेटफ्लिक्स, एक कोलाज पृष्ठभूमि के साथ (21st रैंक)
  • वर्डप्रेस, एक ठोस रंग पृष्ठभूमि (26 रैंक) के साथth)
  • बिंग, एक फोटोग्राफिक पृष्ठभूमि के साथ (29 रैंक पर)th)
  • Tumblr, एक फोटोग्राफिक बैकग्राउंड (30 को रैंक किया गया) के साथth)

इसलिए शीर्ष 20 वेबसाइटों के केवल 30 प्रतिशत की पृष्ठभूमि थी, और जिन लोगों ने सूची में अच्छा किया था।

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

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

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

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

पृष्ठभूमि निहित होनी चाहिए

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

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

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

यह चित्र पृष्ठभूमि डिज़ाइन टेम्पलेट के लिए आदर्श संरचना दिखाता है:

प्रत्येक परत के भीतर (आधार परत को छोड़कर) अलगाव की अधिक से अधिक डिग्री के लिए अतिरिक्त परत बनाने की गुंजाइश है यदि आपको उनकी आवश्यकता होनी चाहिए।

आप जितने अधिक अलगाव पैदा करते हैं, उतना अधिक नियंत्रण आप हासिल कर सकते हैं। आपको ऐसा लग सकता है कि यह अभी आपके लिए महत्वपूर्ण नहीं है, लेकिन अक्सर ऐसा होता है कि यह बाद में एक कारक बन जाता है।

समझने के लिए सबसे महत्वपूर्ण बात यह है कि "पृष्ठभूमि" कुछ भी है जो सामग्री नहीं है। तो पाठ या चित्र जो पृष्ठ पर होने के लिए हैं, लेकिन पृष्ठभूमि के भाग के रूप में सामग्री की गिनती के रूप में नहीं हैं, लेकिन हर कोई उन्हें इस तरह से वर्गीकृत नहीं करेगा।

फ्रेमन

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

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

दूसरा विकल्प पृष्ठभूमि के वर्गों को चरणबद्ध करना है, या यहां तक ​​कि संपूर्ण पृष्ठभूमि को, अधिक सामान्य स्थिति में जहां सामग्री की सुगमता डिजाइन अखंडता से अधिक महत्वपूर्ण है।

"डिजाइन अखंडता" का यह मुद्दा, वैसे, इसका मतलब है कि डिजाइन हमेशा एक ही दिखता है, चाहे वह किस तरह की स्क्रीन पर देखा गया हो। विपरीत वह जगह है जहाँ सामग्री हमेशा (कमोबेश) एक ही दिखाई देती है, चाहे वह किसी भी प्रकार की स्क्रीन पर क्यों न हो।

जवाबदेही के लिए स्केलिंग का उपयोग करना

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

आइए कार्रवाई में इस तकनीक का एक उदाहरण देखें। पोर्ट्रेट मोड में सैमसंग गैलेक्सी S5 से शुरू करें (ध्यान दें कि ये चित्र लेख में फिट किए गए हैं, इसलिए आप जो पाठ देख सकते हैं वह वास्तव में डिवाइस पर ही उपलब्ध है)।

लैंडस्केप मोड में ऐसा दिखता है (फोन कॉल करने के अलावा हर चीज के लिए लैंडस्केप ओरिएंटेशन में फोन पकड़ना लगभग हमेशा बेहतर होता है, फिर भी लोग अपने फोन को पोर्ट्रेट ओरिएंटेशन में रखने पर जोर देते हैं।

जैसा कि आप देख सकते हैं, लेआउट पूरी तरह से ठीक है जब स्केल किया गया है, तब भी जब आपके पास काम करने के लिए केवल 640 x 360 पिक्सेल हों। अगली बार हमारे पास पोर्ट्रेट ओरिएंटेशन में iPad है।

और परिदृश्य।

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

पृष्ठभूमि और सामग्री भागों पर विभिन्न तरीकों का उपयोग करना वास्तव में बेहतर होगा, ताकि मेनू आइटम 2 × 2 लेआउट में हमेशा शेष रहने के बजाय एक 1 × 4 ग्रिड में लपेटें, लेकिन इसका कारण यह नहीं है कि ऐसा इसलिए है क्योंकि यह अनुमान लगाना असंभव है कि कितना ऊर्ध्वाधर स्थान उपलब्ध होगा।

इस प्रकार स्केलिंग का लाभ यह है कि जब आप यह सुनिश्चित करना चाहते हैं कि कुछ घटक हमेशा देखने में रहें, चाहे परिस्थितियां कुछ भी हों।

चरणबद्ध छिपाने और जवाबदेही प्रकट करना

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

इस विधि का उपयोग करते समय अंतर का एक उदाहरण है। हम उन्हीं उपकरणों और अभिविन्यासों का वर्णन करने के लिए उपयोग करेंगे। सबसे पहले सैमसंग गैलेक्सी S5 पोर्ट्रेट है।

सैमसंग गैलेक्सी S5 परिदृश्य।

आईपैड पोर्ट्रेट।

iPad लैंडस्केप।

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

जब एक ही साइट को iPad पर देखा जाता है, तो पृष्ठभूमि हमेशा अभिविन्यास की परवाह किए बिना दिखाई जाती है, लेकिन जो देखा जाता है उसमें कुछ अंतर होता है।

पृष्ठभूमि डिजाइन के लिए सर्वश्रेष्ठ अवधारणाएं (क्रम में)

1। ठोस रंग (या कोई रंग नहीं)

2। फोटोग्राफिक (फैला हुआ)

3। छोटी टाइल (उत्तम सीमलेस)

4। बड़ी टाइल (सही सीमलेस)

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

केवल एक डेस्कटॉप पर देखने के लिए विशेषज्ञ साइटों को छोड़कर बड़ी छपती पृष्ठभूमि का युग बहुत अधिक मृत है। फोन पर देखे जाने पर डेस्कटॉप के लिए डिज़ाइन की गई अधिकांश पृष्ठभूमि अच्छी नहीं लगेगी।

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

हेडर इमेज सौजन्य से

बोगदान रैंकी

बोगदान इंसपायर्ड मैग का एक संस्थापक सदस्य है, जिसके पास इस अवधि में लगभग 6 वर्षों का अनुभव है। अपने खाली समय में वह शास्त्रीय संगीत का अध्ययन करना और दृश्य कला का पता लगाना पसंद करते हैं। वह भी Fixies के साथ काफी जुनूनी है। वह पहले से ही 5 का मालिक है।