2013 के लोकप्रिय वेब डिज़ाइन रुझानों पर एक नज़र

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

गतिशील रूप

यह jQuery plugins के साथ की गई अद्भुत प्रगति के कारण मेरे पसंदीदा चर्चा विषयों में से एक था। मुझे कई अन्य जेएस लाइब्रेरी के डेमो पसंद हैं, हालांकि किसी नए प्रोजेक्ट के लिए jQuery अभी भी मेरी व्यक्तिगत पसंद है।



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

सिंगल पेज लेआउट

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

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

ऑनलाइन पोर्टफोलियो वाले डिजाइनर और रचनात्मक कलाकार कभी-कभी ऐसे लेआउट के लिए तैयार होते हैं। आप अपना काम दिखा सकते हैं और अपने बारे में कुछ बता सकते हैं, HTTP अनुरोधों की संख्या को काफी कम कर सकते हैं। बस एक-पेज की वेबसाइटों के लिए सभी विचारों को देखें, और आप एक अच्छा इंटरफ़ेस बनाने के लिए कई अन्य संभावित तरीकों के साथ आएंगे।

एनिमेटेड पृष्ठ तत्व

मेरा तर्क है कि यह अभी भी सिर पर जिज्ञासु डेवलपर्स के साथ एक बढ़ती प्रवृत्ति है। विशेष रूप से, मैं कई वर्डप्रेस पोर्टफोलियो साइट टेम्प्लेट में थीमफ़ॉरेस्ट एनिमेटेड पृष्ठों पर पाता हूं। Bluap पर एक नज़र डालें कि मैं किस बारे में बात कर रहा हूं।



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

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

अंतहीन स्क्रॉलिंग

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

हालांकि, मेरा मानना ​​है कि उपयोगकर्ताओं को अंतहीन स्क्रॉल करने के लिए उपयोग किया जाता है। Reddit एन्हांसमेंट सूट में स्वचालित रूप से प्रत्येक पृष्ठ के नीचे अंतहीन स्क्रॉलिंग का उपयोग करने का विकल्प है। यह Tumblr और कुछ वाणिज्यिक साइटों के लिए भी सही है । पृष्ठों में सामग्री को विभाजित करने के लिए अजाक्स का उपयोग करना प्रत्येक नए पृष्ठ के लोड होने की प्रतीक्षा करने से बेहतर है।



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

गुणवत्ता टाइपोग्राफी

यद्यपि यह प्रवृत्ति कई वर्षों से विकसित हो रही है, फिर भी मैं कस्टम फ़ॉन्ट परिवारों का उपयोग करके इन सभी साइटों को देखकर चकित हूं। @font-face CSS3 घोषणा सर्वर पर संग्रहीत किसी भी सुरक्षित फ़ॉन्ट तक पहुंच प्रदान कर सकती है।

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



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

वेक्टर प्रतीक

आइकन के बारे में मेरे दिमाग में आने वाली पहली चीज CSS3 वेब फोंट है। फ़ॉन्ट विस्मयकारी एक अत्यंत लोकप्रिय पुस्तकालय है जिसमें सैकड़ों अद्वितीय चिह्न हैं। उन्हें यूजर इंटरफेस बटन पर आइकन या ग्लिफ़ के रूप में भी इस्तेमाल किया जा सकता है। आप फ्लिकॉन वेबसाइट पर चयन को पसंद कर सकते हैं।



लेकिन वेक्टर आइकनों का दायरा इस सर्वव्यापी, फ़ॉन्ट-आधारित दृष्टिकोण से बहुत आगे निकल जाता है। इस फ़ोटो आइकन और इस मुद्रा आइकन पर एक नज़र डालें, दोनों को एक iOS 7 एप्लिकेशन आइकन के रूप में स्टाइल किया गया है। वे शुद्ध सीएसएस कोड का उपयोग करके बनाए गए हैं, और यदि आप चाहें तो उनके आकार को बदल सकते हैं। कई अन्य उदाहरण हैं जो इन बटनों के समान हैं, और मैं केवल अनुमान लगा सकता हूं कि यह प्रवृत्ति कितनी जल्दी बढ़ेगी।

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

हम वर्ष 2014 में जा रहे हैं

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

कस्टम मल्टीमीडिया

जब मैंने पहली बार साइट बनाना शुरू किया था, तो एडोब फ्लैश का उपयोग करके एमपी 3 प्लेयर बनाए गए थे। जावास्क्रिप्ट वास्तव में कम समर्थित था क्योंकि कई ब्राउज़रों ने इसे बंद कर दिया और कोई शक्तिशाली खुला स्रोत पुस्तकालय नहीं थे (जैसे MediaElement.js )।

वीडियो प्लेयर, जैसे कि आप YouTube पर पा सकते हैं, एडोब फ्लैश + एक्शनस्क्रिप्ट पर भी बनाए गए थे। सौभाग्य से, प्रगति के वर्षों में, जावास्क्रिप्ट या फ्लैश में फ़ॉलबैक विकल्पों के साथ HTML5 वीडियो के संयोजन का एक बेहतर समाधान पाया गया है। अन्य विकल्पों के बीच स्क्रिप्ट MediaElement.js को एक क्लासिक YouTube वीडियो प्लेयर के रूप में स्टाइल किया जा सकता है।



समर्थित ब्राउज़रों में, यह प्लेयर HTML5, CSS3, JS का उपयोग करके बनाया जाएगा। चूंकि एचटीएमएल 5 हर जगह समर्थित नहीं है, इसलिए पुराने ब्राउज़र वैकल्पिक फ्लैश या सिल्वरलाइट संस्करण में बदल जाएंगे, जिसे इस शैली में भी स्टाइल किया जा सकता है। समर्थन का समग्र स्तर भिन्न होता है, लेकिन मुझे आशा है कि समय के साथ, नए मीडिया समाधान ऑडियो और वीडियो प्लेबैक के लिए मानक बन जाएंगे।

इंटरएक्टिव वेब अनुप्रयोग

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

वेब उत्साही अक्सर इन मिनी वेब अनुप्रयोगों का अनुभव करने वाले पहले होते हैं। मेरा मतलब है InstantName या GenerateWP जैसे प्रोजेक्ट। लेकिन कल्पना करें कि ये एप्लिकेशन रियल एस्टेट, स्टॉक और बॉन्ड, कुकिंग, इंडस्ट्री इत्यादि में बिखरे हुए हैं। यदि ये विचार फैशनेबल हो जाते हैं, तो हम HTML5 साइटों को बनाने वाले डिजाइनरों की संख्या में वृद्धि देख सकते हैं जो देशी एंड्रॉइड और आईओएस अनुप्रयोगों की तरह दिखेंगे।

लाइव पेज पृष्ठभूमि

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

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

निष्कर्ष

अपने विचारों का सम्मान करने और नए जानने के लिए लगातार व्यस्त रहें। यदि आप लगातार अभ्यास करते हैं, तो आप अनिवार्य रूप से कठिनाइयों का सामना करेंगे, उन्हें हल करेंगे और एक डिजाइनर के रूप में विकसित होंगे। वर्ष 2013 डिजाइन के शौकीनों के लिए चौंकाने वाला और खुशी देने वाला था। मुझे और भी रचनात्मक ऊर्जा देखने की उम्मीद है जिसे हम 2014 में फेंक देंगे।