2024 में पृष्ठभूमि डिजाइन करने के लिए एक व्यापक मार्गदर्शिका

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

फ्रेमन

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

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

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

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

के लिए स्केलिंग का उपयोग करना responsiveरास

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

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

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

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

और परिदृश्य।

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

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

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

चरणबद्ध छिपाने और प्रकट करने का उपयोग करना responsiveरास

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

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

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

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

iPad लैंडस्केप।

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

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

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

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

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

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

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

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

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

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

हेडर इमेज सौजन्य से मारिया शनीना