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

यदि आप इस पृष्ठ के लिंक से किसी सेवा की सदस्यता लेते हैं, तो रीव्स एंड संस लिमिटेड एक कमीशन कमा सकता है। हमारा देखें नैतिक वक्तव्य.

यह पृष्ठ मूल रूप से अंग्रेजी में लिखा गया था। अभी आप एक मशीनी अनुवादित संस्करण हिंदी में देख रहे हैं।

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

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

For example, the background in previous times could actually be used as a practical part of the design. You could put arrows on it, for example, to direct the viewer’s attention to something important.

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

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

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

As you can see from the image above, the top ranked websites don’t bother with backgrounds at all, and it doesn’t seem to have done them the slightest bit of harm with regard to user acceptance.

This flies in the face of conventional thought concerning website design, but it’s hard to argue with cold hard facts. Amazingly enough, the first website on the list with a background doesn’t kick in until you reach number 10, which is Twitter, and that background is only visible if you’re not logged in.

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

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

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

The sole advantage of a site background is that it helps maintain a sense of site identity across multiple pages, but since there are other elements that can achieve this aim just as well and maybe better, that isn’t really a big advantage.

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

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

With so many reasons not to use backgrounds, you might decide to follow in the footsteps of those top-ranked websites and ditch the whole background idea once and for all. But if the brief insists that the site needs to have a background, what can you do? That’s what we’ll try to solve in the rest of this article.

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

Content must always be on a layer above the page background. If you don’t separate your page elements into different layers, it can create problems for you when something needs to be changed.

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

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

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

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

The more degrees of separation you create, the more control you can gain. You may feel like that’s not important to your right now, but it often happens that it becomes a factor later.

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

फ्रेमन

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

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

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

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

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

When you use scaling to keep uniform framing across different device types and orientation, it maintains the integrity of your design, but the result may still not always be what you’d expect or even desire, especially if you use a photographic background.

Let’s check out an example of this technique in action. Starting with the Samsung Galaxy S5 in portrait mode (note that these images are scaled to fit in the article, so the text you can see there is actually legible on the device itself).

This is what it looks like in landscape mode (it’s nearly always better to hold a phone in landscape orientation for everything except making phone calls, yet people still insist on holding their phones in portrait orientation.

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

और परिदृश्य।

The thing you will notice when scaling is used is that there’s little variation between different devices and resolutions, except that there can be a lot of wasted vertical space on the portrait view.

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

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

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

A more practical scenario, and the one most designers will want to use most of the time, is a design where the background (or portions of it) can simply be phased out if there’s not enough room to show it, so the site content always gets maximum attention.

Here is an example of the difference when using this method. We’ll use the same devices and orientations to illustrate. First is Samsung Galaxy S5 portrait.

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

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

iPad लैंडस्केप।

Here you can see a considerable difference between devices. The small screen of the Samsung Galaxy S5 doesn’t allow the background to be displayed, regardless of whether the device is held in portrait or landscape orientation, and what is shown is adjusted to fit the available space.

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

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

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

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

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

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

What you should avoid is tiling of photographic backgrounds unless that can be done in such a way that it’s not noticeable. Stretching is normally best for photographic backgrounds, or to confine them within a predefined space.

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

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

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

बोगदान रैंकी

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

टिप्पणियाँ 0 जवाब

एक जवाब लिखें

आपका ईमेल पता प्रकाशित नहीं किया जाएगा। आवश्यक फ़ील्ड इस तरह चिह्नित हैं *

रेटिंग *

यह साइट स्पैम को कम करने के लिए अकिस्मेट का उपयोग करती है। जानें कि आपका डेटा कैसे संसाधित किया जाता है.