वेब-डिज़ाइन 2013: परंपराएँ, नवाचार, मूल बातें

वेब-डिज़ाइन निरंतर गति में है: हर साल यह विकसित होता है और विभिन्न कारकों के प्रभाव में बदलता है, नए दिलचस्प उपकरण प्राप्त करता है और सब कुछ पुराना और अप्रासंगिक पीछे छोड़ देता है। इस वर्ष को इस तथ्य से जाना जा सकता है कि डिजाइन के विकास का एक कारण मोबाइल उपकरणों और टैबलेटों का बढ़ता प्रसार, एचटीएमएल 5 का उभरना है। लेकिन आइए 2013 में वेब डिज़ाइन के रुझानों पर करीब से नज़र डालें।

यह नए और लोकप्रिय प्रकार की साइटों से शुरू होने लायक है।

उत्तरदायी डिजाइन

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

परमिट

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

सामग्री

सामग्री हमेशा विशेष महत्व की है, और यह उत्तरदायी डिजाइन के लिए विशेष रूप से सच है, क्योंकि हमारे पास दो संस्करण (मोबाइल और डेस्कटॉप) नहीं हैं, इसलिए डिजाइन चरण में आपको यह समझने की आवश्यकता है कि किस सामग्री को प्रदर्शित करना है। सबसे महत्वपूर्ण बात यह है कि अनुकूलन के दौरान साइट अपनी कार्यक्षमता नहीं खोती है, और जितनी जल्दी हो सके प्रदर्शित सामग्री किसी व्यक्ति को वांछित परिणाम में लाती है।
साइट के मोबाइल संस्करण में जानकारी को संक्षिप्त और स्पष्ट रूप से प्रस्तुत किया जाना चाहिए। इसे प्राप्त करने के लिए, डिजाइनर कई तरीकों का उपयोग करते हैं:
1. वीडियो या चित्रों के साथ पाठ की जानकारी का हिस्सा बदलना;
2. नेविगेशन का सरलीकरण;
3. अधिक कैपेसिटिव सामग्री का निर्माण;
4. माल का एक स्पष्ट विवरण;
5. कार्यक्षमता का सरलीकरण (कई माध्यमिक तत्वों से छुटकारा), आदि।

एक-पृष्ठ साइटें ("पफ्स")

सिंगल पेज साइटों को भी अब व्यापक लोकप्रियता मिली है। इस तरह की साइटें कई विशिष्ट विशेषताओं को अलग कर सकती हैं, जो वेब डिज़ाइन में नए रुझान भी हैं:
1. पृष्ठ को फिर से लोड किए बिना साइट;
2. ऊर्ध्वाधर, क्षैतिज स्क्रॉलिंग का उपयोग;
3. एक स्क्रीन - साइट का एक खंड;
4. निश्चित प्रमुख तत्व (हेडर, बास्केट, सोशल नेटवर्क);
5. बड़े फोंट का उपयोग;
6. बड़े विषयगत चित्र;
7. पृष्ठभूमि के रूप में चित्र का उपयोग करना;
8. बड़े बटन;
9. स्क्रीन का पृथक्करण (विभिन्न पृष्ठभूमि चित्र, सभी प्रकार की रेखाएं, भरण, ग्रेडिएंट, छाया);
CSS3 और HTML 5 तकनीकों का उपयोग करके एनिमेशन।
एक पृष्ठ की साइटों में डी 'एंजेलिको , द एंटरप्राइज फाउंडेशन , टैग क्रिएटिव स्टूडियो और स्निपकार्ट शामिल हैं

मॉड्यूलर ग्रिड

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

वेब डिज़ाइन में शैलियाँ

आधुनिक इंटरनेट स्थान साइटों के डिजाइन में कई प्रकार की शैलियों से परिपूर्ण है। हालाँकि, यह अभी भी मुख्य दिशाओं को एकल करने के लिए संभव है। आइए हम कुछ शैलियों पर ध्यान दें।

अतिसूक्ष्मवाद

कई डिजाइनरों के बीच एक लोकप्रिय प्रवृत्ति है। आमतौर पर, अतिसूक्ष्मवाद की शैली में साइटों पर, उपयोगकर्ता कुछ विशेष पर ध्यान केंद्रित करने की कोशिश कर रहे हैं, अर्थात्। एक अलग तत्व तैयार किया गया है जो बाकी सब चीजों से अलग है (स्क्रीन के केंद्र में एक चित्र, या एक बड़ा शिलालेख)। अतिसूक्ष्मवाद की शैली में उज्ज्वल प्रतिनिधि ईस्टवर्क्स लेदर कंपनी , होल और लापका साइटें हैं । अतिसूक्ष्मवाद की विशिष्ट विशेषताओं में शामिल हैं:
1. सादगी और स्पष्टता;
2. ग्राफिक तत्वों की एक न्यूनतम;
3. कार्यात्मक इंटरफ़ेस;
4. काला और सफेद रंग;
5. न्यूनतम छाया।

सपाट डिजाइन

कोई कम लोकप्रिय और शैली में अतिसूक्ष्मवाद के करीब नहीं। फ्लैट डिजाइन एक द्वि-आयामी शैली पर आधारित है। इस शैली का मुख्य विचार किसी तत्व की ज्यामिति को केवल रंगों की सहायता से, गहराई देने के किसी अन्य तरीके के बिना, छाया, बेवेल, राहत, ग्रेडिएंट्स को चित्रित करना है। आप यह जान सकते हैं कि स्पेल टॉवर , लेयर वॉल्ट , येप जैसे संसाधनों पर यह कैसा दिखता है ! उपयोगकर्ता इंटरफ़ेस के प्रत्येक तत्व को स्पष्ट रूप से माना जाना चाहिए, और ऐसे तत्वों के साथ बातचीत उपयोगकर्ताओं के लिए सहज होनी चाहिए। विशेष सुविधाएँ:
1. कोई अतिरिक्त प्रभाव नहीं;
2. सरल आकृतियों का उपयोग;
3. विपरीत रंग योजनाओं;
4. टाइपोग्राफी पर जोर।
इसके अलावा, एक प्रकार का डिज़ाइन है जैसे "लगभग सपाट" डिज़ाइन। "लगभग फ्लैट" डिज़ाइन में फ्लैट डिज़ाइन तकनीकों का उपयोग किया जाता है, लेकिन कुछ तत्वों में अतिरिक्त प्रभाव अभी भी जोड़े जाते हैं। उदाहरण के लिए, बटन में अतिरिक्त ग्रेडिएंट या छाया होते हैं। डिजाइनर, एक नियम के रूप में, कुछ प्रभाव चुनते हैं और "लगभग सपाट" डिजाइन के सभी तत्वों पर लागू होते हैं। मिक्सपैन इसका एक उदाहरण है।

मेट्रो डिजाइन

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

कस्टम ज्यामिति

इस वर्ष कस्टम ज्यामिति ने भी लोकप्रियता हासिल की। मूल रूप से, यह साइट के सभी तत्वों (पृष्ठभूमि, हाइलाइट्स, व्यक्तिगत तत्वों) में पता लगाया जा सकता है। सौभाग्य से, HTML5 और CSS3 अब आपको ऐसा करने की अनुमति देते हैं। तत्वों का सबसे ट्रेंडी ज्यामितीय आकार एक वृत्त, एक रोम्बस और एक षट्भुज (मधुकोश) है, कम सामान्यतः त्रिकोण होते हैं: बफ़ेलो , V2 , AmplifiQEstudio द्वारा निर्मित ।

विंटेज (रेट्रो शैली)

रेट्रो शैली 50-80 साल के युग से उस समय के पोस्टर, पोस्टर और अन्य सामग्री के साथ ली गई है। अक्सर, डिजाइनर, ऐसे काम से प्रेरित होकर, रेट्रो शैली में एक वेबसाइट बनाते हैं। लोकप्रिय डिजाइन तत्वों में शामिल हैं:
1. बनावट का उपयोग (विशेष रूप से, अपने सभी रूपों में कागज - टंकण, फटा हुआ, पीला - या कागज के समान बनावट), साथ ही पुरातनता देने के लिए सभी प्रकार के scuffs का उपयोग;
2. सजावटी तत्व (फ्रेम, पैटर्न, झंडे, रिबन, लाइनें - डबल, ट्रिपल);
3. रेट्रो रंग (रसदार नहीं, लेकिन मौन);
4. विशिष्ट जटिल टाइपोग्राफी (पोस्टर प्रकार के फोंट)।
साइटें वॉन डच , किंडर फोरोग्रैफी , एलेक्स पीयरस , वेब डिजाइन यॉर्कशायर , रोडोलपे सेलेस्टिन , टेइकिडो पूरी तरह से डिजाइन में रेट्रो शैली के उपयोग को प्रदर्शित करते हैं।

आखिरी बात मैं उस पर ध्यान देना चाहता हूं जब वेब डिज़ाइन की मुख्य दिशाओं के विषय पर चर्चा करना 2013 में साइटों पर मौजूद विशेषता तत्व हैं।

ऐसा कोई नया चलन नहीं, बल्कि आज के वेब परिवेश में भी बहुत आम है - लंबन । लंबन साइट की गहराई की भावना पैदा करता है, जो तीन आयामी अंतरिक्ष का भ्रम पैदा करता है: प्रवक्ता , आईओटोपि , मिनर्वा । एक समान प्रभाव विभिन्न गति पर एक दूसरे के सापेक्ष कई परतों के आंदोलन के कारण प्राप्त होता है।

निश्चित मेनू ऊर्ध्वाधर स्क्रॉलिंग वाली साइटों के प्रसार का एक परिणाम है: डिजाइनरों ने महसूस किया कि उपयोगकर्ता को किसी अन्य अनुभाग पर जाने या कुछ प्रमुख कार्यों को करने के लिए प्रत्येक बार ऊपर की ओर लौटने के लिए असुविधाजनक होगा। यही कारण है कि साइट के स्क्रॉलिंग के दौरान मुख्य मेनू को शीर्ष पर तय किया जाने लगा। मेनू के अलावा, साइट के मुख्य तत्व तय किए गए हैं (उदाहरण के लिए, ऑनलाइन स्टोर के मामले में, ऐसा तत्व एक टोकरी होगा)। एक समान मेनू का उपयोग ईयाल शहर , एंगेज इंटरएक्टिव और रयान शर्फ साइटों पर किया गया था।

एक पृष्ठभूमि के रूप में पूर्ण आकार के फोटो और वीडियो में मुख्य रूप से एक वाह प्रभाव होता है जो साइट आगंतुक का ध्यान आकर्षित करता है: फिफ्टी थ्री , थिंकट्यूक ।
वीडियो को पृष्ठभूमि में देखते हुए, उपयोगकर्ता रूचि ले सकता है और साइट के साथ काम करना जारी रख सकता है: MediaBoom , Orange.com , The Power Inside ।

बड़ी डिजाइनर टाइपोग्राफी। बहुत समय पहले ऐसा नहीं था, तकनीक ने अभी तक कस्टम फोंट के व्यापक उपयोग की अनुमति नहीं दी थी, और अधिकांश साइट एरियल, ताहोमा, और ट्रेबुचेट तक सीमित थीं। Google से फोंट के आगमन के साथ, वेब डिजाइनरों के शस्त्रागार को लगभग 30 फोंट के साथ फिर से भर दिया गया है, जो कि Google द्वारा अनुकूलित हैं, और जो, यदि वांछित है, तो आसानी से आपकी साइट से जुड़ा जा सकता है। हालांकि, समय बदल रहा है। आधुनिक लेआउट विधियां आपको लगभग किसी भी गैर-मानक फ़ॉन्ट से कनेक्ट करने की अनुमति देती हैं। इसके अलावा, फ़ॉन्ट संयोजन का उपयोग फोंट के रूप में और खूबसूरती से तैयार चित्रों के रूप में किया जाता है। कस्टम फोंट के सक्रिय उपयोग के उदाहरण यहां देखे जा सकते हैं: Amazee Labs , Denise Chandler , Ryan Scherf ।

मोबाइल उपकरणों से वेब पर चले गए रुझानों में से एक बड़े इंटरफ़ेस बटन हैं। विभिन्न उपकरणों के बीच "प्रेस और टच" अधिक से अधिक लोकप्रिय हो रहा है, यही वजह है कि बड़े बटन वेब डिज़ाइन के लिए "चलते हैं"। यद्यपि विशाल बटन बहुत आसान क्लिक करते हैं, वे बड़ी संख्या में ग्राफिक्स से जुड़े होते हैं, जो पेज लोडिंग गति को धीमा कर देता है, इसलिए साइट बिल्डरों को छवि गुणवत्ता और वेबसाइट लोडिंग गति को खोए बिना अपने विचारों को हल करने के तरीकों की तलाश करनी होगी। UltraKlinika , द ऑनलाइन गिफ्ट कार्ड , प्रीकम्पोज्ड टच जेस्चर , केल्ट स्टूडियो , सिम्बॉलिकन्स द्वारा बड़े बटनों के उपयोग को सक्रिय रूप से संबोधित किया गया है।

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

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

CSS 3 और HTML 5 का उपयोग करते हुए एनिमेशन। अब, इन तकनीकों के विकास के साथ, डिजाइनर आसानी से विभिन्न प्रभाव डाल सकते हैं: विरूपण, प्रवाह, खुलासा, विमानों और कई अन्य, और रचनात्मक लोग सक्रिय रूप से इसका उपयोग करते हैं। नेटवर्क पर कई साइटें हैं जो पहले से ही आपकी साइट में सम्मिलित करने के लिए पूर्वावलोकन और कोड के साथ तैयार एनीमेशन समाधान हैं। यदि आप देखना चाहते हैं कि CSS 3 और HTML 5 का उपयोग करने वाला एनीमेशन कैसा दिखता है, तो आप यहाँ हैं: WWF , Rule of Three , Inception , InTacto10 , RailUp , Agent 008 Ball ।

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

सामग्री एस्ट्रा मीडिया ग्रुप के वेब डिजाइनर निकोलाई लिसोव द्वारा तैयार की गई थी।