मुफ्त के साथ खूनी वेब यूआई लेआउट डिजाइनिंग - अंतिम गाइड

वेब डिज़ाइन के क्षेत्र ने कुछ ही वर्षों में अपनी सांस ली है। अब पहले से कहीं अधिक सक्रिय डिजाइनर दुनिया भर में हैं, सभी अभिनव परियोजना विचारों पर सहयोग कर रहे हैं। और इन रुझानों में से कई के पीछे की अवधारणाओं को पेशेवर ग्राफिक्स डिजाइनरों के माध्यम से विकसित किया गया है.

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

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

पूर्ण टेम्पलेट के साथ अभ्यास करें

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

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

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

मूल स्रोत - डाउनलोड करें

लैंडिंग पृष्ठ डिजाइन करना

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

मूल स्रोत - डाउनलोड करें

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

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

अधिक टेम्पलेट्स:

यहाँ नि: शुल्क PSD टेम्पलेट्स के कुछ जोड़े हैं जिन्हें हमने पास में जारी किया है:

• "BiZ" बिजनेस वेबसाइट PSD टेम्प्लेट्स
• "थिंकजुइस" उत्पाद साइट पीएसडी टेम्पलेट
• व्यावसायिक व्यवसाय साइट PSD टेम्पलेट
• "Polo360" पोर्टफोलियो साइट PSD टेम्पलेट

आप इन निम्नलिखित में भी रूचि ले सकते हैं:

• व्यापार वेबसाइट टेम्पलेट्स
• "जल्द ही आ रहा है" पृष्ठ ट्यूटोरियल + टेम्पलेट

मुख्य साइट नेविगेशन

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

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

मूल स्रोत - डाउनलोड करें

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

मूल स्रोत - डाउनलोड करें

वैकल्पिक मेनू शैलियाँ

सामान्य क्षैतिज नेविगेशन पट्टी के अलावा डिजाइन की अन्य शैलियों पर विचार करना है। ऊर्ध्वाधर लिंक को विभिन्न उप-शीर्षों में विभाजित किया जा सकता है जो पृष्ठ सामग्री के लिए अधिक जगह छोड़ देता है.

उदाहरण के लिए वेबसाइट Icojam द्वारा नीचे दिए गए मेनू फ्रीबी को लें.

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

मूल स्रोत - डाउनलोड करें

नेविगेशन युक्तियाँ / ट्यूटोरियल:

• 50+ साफ सीएसएस टैब आधारित नेविगेशन लिपियों
• ब्रेडक्रंब नेविगेशन सर्वश्रेष्ठ अभ्यास और उदाहरण
• JQuery के साथ मोबाइल नेविगेशन का निर्माण
• CSS3 में ब्रेडक्रंब नेविगेशन को कोड करना
• लेस सीएसएस के साथ डिजाइनिंग नेविगेशन

क्लीनर वेब प्रपत्र

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

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

लॉगिन फ़ील्ड

जांचने के लिए लॉगिन फ़ॉर्म PSDs के कुछ बेहतरीन उदाहरण हैं। इस लॉगिन के माध्यम से फ्रीबी WP वैज्ञानिक आपके सभी मानक तत्व हैं। सत्र कुकीज़ को प्रबंधित करने के लिए लॉगिन / पासवर्ड, सबमिट बटन और चेक बॉक्स के लिए दो इनपुट फ़ील्ड.

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

मूल स्रोत - डाउनलोड करें

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

मूल स्रोत - डाउनलोड करें

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

संपर्क

एक अन्य रूप जो आपको व्यावहारिक रूप से हर वेबसाइट पर मिलेगा वह एक संपर्क फ़ॉर्म है। इसमें सामान्य रूप से प्रेषक के नाम, ई-मेल और संदेश सामग्री के लिए फ़ील्ड शामिल होंगे.

नीचे दिए गए फ्रीबी कस्टम बनावट और आइकन का उपयोग करने का एक शानदार उदाहरण है.

डिजाइन भी उपयोग करता है प्लेसहोल्डर पाठ लेबल के बजाय। इसका मतलब यह है कि जब प्रपत्र पहली बार लोड होता है तो प्रत्येक फ़ील्ड एक डिफ़ॉल्ट मान (उदा: आपका नाम) के साथ सेट की जाती है। लेकिन फिर जैसे ही आप प्लेसहोल्डर क्लीयर करना शुरू करते हैं और आपकी सामग्री इसके बजाय प्रदर्शित होती है। सभी मानकों के अनुरूप ब्राउज़र इस आशय का समर्थन करेंगे और यह आपको पृष्ठ पर कुछ स्थान बचा सकता है.

मूल स्रोत - डाउनलोड करें

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

मूल स्रोत - डाउनलोड करें

संपर्क सूत्र ट्यूटोरियल:

• लॉगिन / पंजीकरण फॉर्म: विचार और सुंदर उदाहरण
• एक स्टैक्ड-पेपर इफ़ेक्ट लॉग इन फॉर्म बनाएँ
• एक अजाक्स-आधारित HTML5 / CSS3 संपर्क फ़ॉर्म बनाएँ

रिबन और बैनर

महज 6 या 7 साल पहले लोकप्रिय डिजाइन ट्रेंड में गोल कोनों की शुरुआत हुई थी। अब हम ड्रॉप शैडो और कॉर्नर रिबन के साथ और भी आगे आ गए हैं.

मूल स्रोत - डाउनलोड करें

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

ये छोटे पृष्ठ प्रभाव आपके लेआउट को बढ़ाने के लिए एक लंबा रास्ता तय करते हैं। आगंतुक नोटिस लेते हैं और इन सौंदर्य संबंधी आनंदों को पसंद करेंगे। लेकिन विचार करें कि छोटे कोने वाले रिबन केवल इस डिजाइन प्रवृत्ति का हिस्सा हैं.

मूल स्रोत - डाउनलोड करें

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

कॉर्नर लपेटना

एक और बहुत विशिष्ट रिबन बैनर प्रभाव आपके पृष्ठ कोने के आसपास के डिज़ाइन को लपेटकर किया जाता है। इससे आपके पृष्ठ का भ्रम 3-D हो जाता है और रिबन आपकी वेबसाइट के शीर्ष भाग के चारों ओर लिपटा रहता है.

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

मूल स्रोत - डाउनलोड करें

बटन के साथ डिजाइनिंग

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

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

मूल स्रोत - डाउनलोड करें

विविधताएँ कैसे बनाएँ

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

मूल स्रोत - डाउनलोड करें

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

मूल स्रोत - डाउनलोड करें

लकड़ी + कागज बनावट

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

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

मूल स्रोत - डाउनलोड करें

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

28 उच्च संकल्प लकड़ी बनावट

निष्कर्ष

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