2012 में देखने के लिए 15 वेब डिज़ाइन रुझान

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

मैं उन 15 विचारों को पेश करना चाहता हूं जो पिछले एक साल में बहुत तेजी से बढ़े हैं। ये रुझान वेब और ग्राफिक्स डिज़ाइन तकनीकों को शामिल करते हैं जो संभवतः 2012 में एक बड़ी भूमिका निभाएंगे। आपने शायद इनमें से कुछ को अपनी कई पसंदीदा साइटों पर ऑनलाइन देखा है।.

शुक्र है कि इन सुविधाओं को लागू करने के तरीके समझने में आसान हो रहे हैं और कोड में बहुत अधिक स्लिमर हैं.

1. उत्तरदायी इंटरफ़ेस डिजाइन

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

MooTools और jQuery के रूप में प्रसिद्ध जावास्क्रिप्ट पुस्तकालयों सहित, इन सुविधाओं को और भी अधिक आसान करना आसान हो गया है। अधिकांश आधुनिक-दिन के ब्राउज़र इस कोड का समर्थन करते हैं और लिपियों के उपलब्ध न होने पर भी इनायत से नीचा दिखाते हैं। अंततः आप डिज़ाइन में कहीं भी बातचीत करते समय उपयोगकर्ता को सहज महसूस कराना चाहते हैं.

इसी तरह आपको फॉर्म इनपुट और डेटा जाँच को ध्यान में रखना चाहिए। कई पंजीकरण पृष्ठों पर आप प्रत्येक इनपुट क्षेत्र के माध्यम से काम करते हुए छोटी प्रतिक्रियाएँ प्राप्त करेंगे। आप मान्य ई-मेल पते, डुप्लिकेट उपयोगकर्ता नाम, और यहां तक ​​कि पासवर्ड जांच के लिए जाँच स्वचालित कर सकते हैं। यह उपयोगकर्ता के अंत में समय बचाएगा और साइनअप प्रक्रिया के दौरान एक आसान गाइड प्रदान करता है.

2. टचस्क्रीन मोबाइल डिवाइस

पिछले कुछ वर्षों में यह स्पष्ट हो गया है कि स्मार्टफ़ोन गैर-तकनीकी उत्साही लोगों के बीच समर्थन प्राप्त कर रहे हैं। लेकिन केवल 2011 के बाद से हमने मोबाइल साइटों और मोबाइल-विशिष्ट टेम्पलेट्स का विस्फोट देखा है.

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

3. मुफ्त के टोंस!

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

मेरे व्यक्तिगत पसंदीदा में से दो Download PSD और Designmoo हैं, दोनों ही उच्च गुणवत्ता वाले सदस्यों द्वारा अक्सर अपडेट किए जाते हैं। इसके अतिरिक्त होंगकीट फ्रीबीज़ आर्काइव में बहुत सारे मीठे उपहार हैं। किसी भी युग में इससे पहले कि यह मुफ्त वेब इंटरफेस, लेआउट, लोगो, बैनर और व्यावहारिक रूप से किसी भी अन्य प्रकार के PSD / AI फ़ाइल को डाउनलोड करने के लिए शाब्दिक रूप से आसान नहीं है।!

कुछ नीट डाउनलोड

नीचे 2011 से पहले की जाँच करने के लिए बस कुछ शांत मुफ्त दिए गए हैं। और अगर आपको लगता है कि इस सूची में कुछ बेहतरीन फाइलें हैं, तो बस 2012 तक प्रतीक्षा करें!

मिनी वेब यूआई सेट

डार्क मिनी म्यूजिक प्लेयर

स्लाइडिंग टैग

डार्क फोटो स्लाइडर

बक्से खोजें

लॉग इन / साइन इन फॉर्म

मोडल बॉक्स लॉगिन करें

क्लीन लॉग इन फॉर्म

मूल्य निर्धारण तालिकाएँ

न्यूनतम लोड हो रहा है बार

आसक्ति पॉप-अप

4. HTML5 और CSS3 मानक

इन दोनों नए डिज़ाइन आर्कटाइप्स ने 2011 के बाद कभी-कभी बढ़ते हुए संचय किया है। सिमेंटिक वेब डिज़ाइनर सीएसएस-केवल डिज़ाइनों को गोल कोनों और ड्रॉप शैडोज़ को मंथन करने के लिए वर्षों से इंतजार कर रहे हैं। इसके अतिरिक्त W3C ने सबसे लोकप्रिय ब्राउज़रों के समर्थन में बहुत अधिक बढ़त बना ली है.

मैं केवल HTML5 / CSS3 वेब विकास के भविष्य के लिए अच्छी चीजें देख सकता हूं। फ्रंट-एंड डिजाइनरों को अक्सर आज के क्षेत्र में अनदेखा किया जाता है, फिर भी वे पूरी रचना प्रक्रिया के लिए इतना बड़ा महत्व रखते हैं। अपने आप को जानने और अभ्यास करने वाली तकनीकों के आधार पर किसी भी सेट 'लेबल' में खुद को निचोड़ने की कोशिश न करें। यदि आप को पकड़ने की आवश्यकता महसूस होती है तो हम HTML5 / CSS3 कोडिंग के लिए एक शुरुआती कैसे-कैसे मार्गदर्शन करते हैं.

इन नए मानकों के साथ चिपके रहने से जावास्क्रिप्ट और jQuery में भी विकास करना आसान हो जाएगा। डेवलपर्स पहले से ही अपने HTML5 / CSS3 परियोजना कोड को पहले से ही प्रकाशित और साझा कर रहे हैं, और अगर चीजें जारी रहती हैं, तो हम निश्चित रूप से अगले वर्ष इसके बारे में पूरी जानकारी देंगे।.

5. रिबन और बैनर

हालांकि यह डिजाइन तकनीक बिल्कुल नहीं है “नया” यह हाल ही में कभी भी मुख्यधारा से नहीं टूटा। आपने शायद कोने के रिबन, बैनर नेविगेशन बार और छोटे रिबन बैज के उदाहरण देखे होंगे। इन रुझानों में विस्तृत ट्यूटोरियल के भारी संचय के कारण विस्फोट की संभावना है जो कि Google के माध्यम से सभी को मिल सकते हैं.

वेब डिजाइनर सूचना साझा करने के लिए अपने स्वयं के ब्लॉग लॉन्च करने में इन दिनों अधिक सक्षम हैं। अब सरल तकनीकों को सबसे लोकप्रिय प्रभावों की नकल करने के लिए डिजाइनरों के बीच आसानी से पारित किया जा सकता है। वहाँ भी मुक्त PSDs आप अपने आप को प्रयास बचाने के लिए डाउनलोड कर सकते हैं.

6. प्रीमियम वर्डप्रेस थीम्स

वर्डप्रेस 3.0 के अंतिम रिलीज में लंबे समय से प्रतीक्षित सुविधाओं जैसे कि कस्टम पोस्ट प्रकार और अद्वितीय लेख चित्र शामिल थे। फिर भी मैंने जो सबसे गहरा बदलाव देखा है वह वर्डप्रेस विकास की दुकानों से आ रहा है जो प्रीमियम WP थीम के विशेषज्ञ हैं.

आपके द्वारा ऐसी थीम खरीदने के बाद स्थापना प्रक्रिया किसी अन्य के समान है। अभी तक कस्टम प्लग-इन कार्यक्षमता, बाल थीम, नए व्यवस्थापक मेनू और थीम के भीतर से अन्य विशेषताओं का एक पूरा गुच्छा शामिल करना संभव है! WooThemes, ElegantThemes और Rocket Themes कुछ ही ब्रांड हैं जो बाकी सभी चीजों से ऊपर हैं। उनकी गुणवत्ता त्रुटिहीन है और मुझे लगता है कि उनके डेवलपर्स सर्वश्रेष्ठ टेम्पलेट और सबसे सहज व्यवस्थापक मेनू बनाने के लिए ऊपर-और-परे जाते हैं.

2012 में जाने पर मैं केवल कल्पना कर सकता हूं कि वर्डप्रेस का उपयोग करना और भी आसान हो जाएगा। इसका मतलब है कि अधिक उच्च गुणवत्ता वाले थीम जारी किए जाएं, और लॉन्च किए जाने वाले अधिक अद्भुत ब्लॉग.

7. ऑनलाइन पत्रिका

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

जैसे-जैसे पत्रिकाएं ऑनलाइन बढ़ने लगती हैं, वे कई लेखकों के लिए आय का स्रोत बन जाएंगे। गेमिंग या अर्थशास्त्र की तुलना में 'वेब डिज़ाइन' जैसे विषय को एक छोटे से स्थान पर लक्षित करता है। लेकिन यह तथ्य कि हम प्रिंट से अधिक डिजाइन पत्रिकाएं ऑनलाइन देख रहे हैं, यह दिखाने के लिए कि दुनिया आने वाले वर्षों में कहां जा रही है.

8. आसान ड्रॉप छाया

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

टेक्स्ट-शैडो सिंटैक्स को याद रखना बहुत आसान है और बॉक्स-शैडो के रूप में अनुसरण करता है। इन प्रभावों को प्रस्तुत करने में अनावश्यक अब छवियों के साथ, वेब डेवलपर्स इन मूल विचारों को आगे बढ़ाने पर ध्यान केंद्रित कर सकते हैं.

9. डायनेमिक टाइपोग्राफी

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

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

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

10. छवि गैलरी स्लाइडशो

JQuery की बाद की लोकप्रियता के साथ मैंने अधिक से अधिक छवि स्लाइडशो को वेब लेआउट में गिराया है। गैलरी आंतरिक पृष्ठ सामग्री की एक त्वरित झलक प्रदर्शित करने के लिए एकदम सही हैं। यह विशेष रुप से प्रदर्शित छवियों, डेमो स्क्रीनशॉट, आदि के साथ पोर्टफोलियो प्रविष्टियों, तस्वीरों, ब्लॉग पोस्ट का एक सेट हो सकता है.

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

11. मोडल पॉपअप बॉक्स

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

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

अपनी खुद की वेबसाइटों के लिए विचार प्राप्त करने के लिए कुछ अधिक लोकप्रिय सामाजिक समाचार साझा करने वाले समुदायों की जाँच करें। Reddit और Digg पहले दो हैं जो मन में आते हैं क्योंकि वे दोनों एक विशिष्ट लेआउट के साथ रजिस्टर / लॉगिन मोडल बॉक्स को पंजीकृत करते हैं। इसके अतिरिक्त, Google+ के लिए UI प्रभाव काफी मात्रा में मोडल कार्यक्षमता का दावा करता है.

12. प्रेरणादायक सूचियाँ

वेब डिज़ाइन के बहुत शुरुआती दिनों से सूची वस्तुओं के संग्रह दिखाई दिए हैं। जैसा कि हम नई सदी में चले गए, डिजाइनरों ने एचटीएमएल ऑर्डर और अनऑर्डर की गई सूचियों को घर के नेविगेशन मेनू का उपयोग करना शुरू कर दिया। लेकिन आजकल सूचियों का उपयोग और अधिक के लिए किया जा रहा है.

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

13. उत्पन्न छवि थंबनेल

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

ब्लॉग आज विशेष रुप से प्रदर्शित छवि को अपनाने के लिए जारी है, तो क्यों न अपने विषय में उत्पन्न थंबनेल लागू करें? ये अक्सर लेख के शीर्षक की ओर मेरा ध्यान आकर्षित करते हैं और पाठ लिंक से भरे पृष्ठ को तोड़ने में मदद करते हैं.

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

14. ओवरसाइज़्ड आइकॉन

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

यह अनुमान लगाना मुश्किल है कि 2012 में बढ़ने पर ये रुझान कितने सही होंगे। एक तरफ ये आइकन क्लंकी हो सकते हैं और ज़रूरत से ज़्यादा जगह ले सकते हैं। फिर भी हम iOS / OSX ऐप्स की कमी को पूरा करने के करीब नहीं हैं और डिज़ाइनर अभी भी पिक्सेल-परफेक्ट आइकन स्पेक्स को मंथन कर रहे हैं। यह उल्लेख करने के लिए नहीं कि वेब डिज़ाइनर अब किसी भी पृष्ठ ब्रांडिंग के बारे में ओवरसाइज़्ड आइकॉन सहित हैं! यह एक अच्छा तरीका है अपने आगंतुक का सीधा ध्यान रखें और अपनी कंपनी के लिए एक नाम बनाएँ.

15. अतिरंजित हाइपरलिंक

एंकर लिंक निश्चित रूप से किसी भी वेबसाइट के शीर्ष पांच सबसे महत्वपूर्ण तत्वों में हैं। ये स्पष्ट रूप से 1990 के दशक के बाद से एक लंबा सफर तय कर चुके हैं और लोकप्रिय डिजाइन के रुझान केवल तेजी से बढ़ रहे हैं। ऐसा प्रतीत होता है कि हम एक ऐसे युग में जा रहे हैं जहाँ अतिरंजित डिजाइन पूर्वता लेता है.

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

निष्कर्ष

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