वेबसाइट का लेआउट और डिज़ाइन कैसे करें (बिना किसी डिज़ाइन कौशल के!)

यदि आप ग्राहकों के लिए फ्रीलांस वेबसाइट बनाने की कोशिश कर रहे हैं, या यहां तक ​​कि सिर्फ अपना पोर्टफोलियो बनाने की कोशिश कर रहे हैं, तो आप इस पहेली में आ सकते हैं:

यदि आपके पास कोई वेब डिज़ाइन कौशल नहीं है तो आप वेबसाइट कैसे बनाते हैं?

यहां कुछ विकल्प दिए गए हैं:

• आप अपने लिए डिज़ाइन बनाने के लिए एक वेब डिज़ाइनर को काम पर रख सकते हैं- लेकिन (अच्छे) डिज़ाइनर सस्ते नहीं हैं।
• आपको Fiverr या Upwork पर एक सस्ता डिज़ाइनर मिल सकता है- लेकिन आप जानते हैं कि यह जोखिम भरा हो सकता है।
• या आप एक मुफ्त या प्रीमियम थीम या टेम्प्लेट डाउनलोड कर सकते हैं- लेकिन कभी-कभी वे वह सब कुछ नहीं करते जो आप चाहते हैं।

आपके लिए एक अन्य विकल्प वेबसाइटों को लेआउट और डिज़ाइन करने के लिए कुछ बुनियादी कौशल सीखना और अपना स्वयं का फ्रंट एंड आउट बनाना है।

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

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

इस पद्धति में शामिल हैं:

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

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

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

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

यहां इस प्रक्रिया के मुख्य चरण दिए गए हैं:

• अपनी वेबसाइट की मूल बातें तय करें
• अपनी वेबसाइट के लेआउट की योजना बनाएं
• डिज़ाइन को एक साथ रखें
• अंतिम उत्पाद तैयार करें

प्रत्येक चरण अनुसंधान से प्रेरित होगा- अन्य वेबसाइटों को देखने के लिए कि वे क्या करते हैं, और उन हिस्सों को बाहर निकालना जिन्हें आप अपनी वेबसाइट के लिए पुन:उपयोग करना चाहते हैं।

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

इससे पहले कि आप रंग या फ़ॉन्ट चुनना शुरू करें, आइए इस वेबसाइट के बारे में कुछ सामान्य प्रश्नों के उत्तर दें:

<मजबूत>1. वेबसाइट किस प्रकार के व्यवसाय को बढ़ावा देगी?

एक पिज्जा जगह, फोटोग्राफर का स्टूडियो, या किताबों की दुकान? वेबसाइट से किसी भी प्रकार का व्यवसाय लाभान्वित हो सकता है, इसलिए आप कुछ भी चुन सकते हैं।

यहां हमारे उद्देश्यों के लिए, हम सेंट्रल कॉफी नामक एक काल्पनिक कॉफी शॉप चुनेंगे। क्योंकि सभी को कॉफी पसंद है, है ना?

<मजबूत>2. वेबसाइट में कौन से पेज होंगे?

कुछ सामान्य पृष्ठ मुखपृष्ठ, पृष्ठ के बारे में, संपर्क पृष्ठ, और उस उद्योग के लिए विशिष्ट पृष्ठ होंगे जिसमें व्यवसाय है।

वेबसाइट के पृष्ठों और अन्य सामान्य संरचनात्मक पहलुओं का पता लगाने का सबसे अच्छा तरीका कुछ त्वरित ऑनलाइन शोध करना है।

2. मौजूदा वेबसाइटों पर शोध करें

इसी तरह के व्यवसायों के लिए अन्य मौजूदा वेबसाइटों को देखें। इनमें से 3-4 वेबसाइटों को देखें और देखें कि उनके पास कौन से पेज हैं।

यह देखने की कोशिश करें कि वेबसाइट कैसे डिज़ाइन की गई है और इस पर ध्यान दें:

• वेबसाइट के कौन से पृष्ठ हैं,
• समग्र शैली क्या है,
• नेविगेट करना और चीज़ों को ढूंढना कितना आसान है,
• और कुछ भी जो आपकी रुचि को बढ़ाता है।

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

मुझे मिली थीम से कॉफी शॉप का एक उदाहरण यहां दिया गया है।

The7

पेज:
अनुभागों वाली एक पृष्ठ की वेबसाइट:होम, परिचय, स्थान, ऑफ़र, मेनू, समाचार, प्रेस, ब्लॉग पोस्ट

शैली:
आधुनिक और स्वच्छ, अच्छी तस्वीरों के साथ

नेविगेशन:
नेविगेट करने में आसान

और यहां कुछ वेबसाइटें हैं जो मुझे "शिकागो में कॉफी शॉप" खोज से मिलीं:

द वर्महोल कॉफी

पेज:
मुखपृष्ठ, ब्लॉग, स्थान/संपर्क, नौकरी के अवसर

शैली:
आधुनिक की तरह; दुकान की तस्वीरें अधिक उदासीन हैं

नेविगेशन:
तुरंत स्पष्ट नहीं है कि यह एक कॉफी शॉप है। साइट पर नेविगेट करना थोड़ा मुश्किल है।

कैफे सड़कें

पेज:
एक पृष्ठ की वेबसाइट, अनुभाग हैं:होम, कैफ़े (के बारे में), मेनू, रोस्टिंग, टाइम मशीन (रस), संपर्क फ़ॉर्म

शैली:
सरल और आधुनिक (स्क्वायरस्पेस)

नेविगेशन:
नेविगेट करना बहुत आसान है; मुझे ऊपर की ओर स्टिकी मेनू बार पसंद है जो आपको नीचे प्रत्येक अनुभाग तक स्क्रॉल करता है।

कॉफी बनाएं

पेज:
एक पृष्ठ की वेबसाइट, अनुभाग हैं:मुखपृष्ठ, परिचय, घंटे, स्थान, दुकान, खानपान, कार्यक्रम, संपर्क

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

नेविगेशन:
नेविगेट करना बहुत आसान है

सवादा कॉफी

पेज:
मुखपृष्ठ, के बारे में, भोजन और पेय, प्रेस, संपर्क और घंटे, हमारे रेस्तरां, नौकरियां

शैली:
डिज़ाइन ज़्यादातर फ़ोटोग्राफ़ी के बारे में है, और टेक्स्ट लगभग बाद का लगता है

नेविगेशन:
नेविगेट करना थोड़ा मुश्किल है- दाएं कोने में हैमबर्गर मेनू लगभग नहीं देखा।

3. अपनी वेबसाइट के लिए नोट्स लिखें

अब, कई कॉफ़ी शॉप वेबसाइटों को देखने के बाद, हमारे पास इस बात का बेहतर विचार है कि कौन सी विशेषताएं सामान्य हैं। और हमारे पास कुछ विचार हैं कि हम क्या सोचते हैं और क्या काम नहीं करते हैं।

अपने शोध के आधार पर, अब आप अपनी साइट के लिए नोट्स लिखना शुरू कर सकते हैं।

सेंट्रल कॉफ़ी के लिए, मुझे लगता है कि हम निम्नलिखित अनुभागों के साथ एक साधारण एक पेज की वेबसाइट के साथ बने रहेंगे:

• शीर्षक
• होम
• के बारे में
• मेनू
• स्थान/संपर्क
• पाद लेख

4. अपनी वेबसाइट के लेआउट की योजना बनाएं

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

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

हेडर

मुझे सेवन कॉफ़ी डेमो पेज और कैफ़े स्ट्रीट्स वेबसाइट पर शीर्ष नेविगेशन बार पसंद है।

हालाँकि उन दोनों पृष्ठों पर यह केंद्रित है, और मैं इसे बाईं ओर संरेखित करना चाहूंगा, पहले लोगो और बाद के अनुभागों के साथ।

वह डेस्कटॉप संस्करण के लिए है। टैबलेट और मोबाइल के लिए, हमारे पास हेडर में डिफ़ॉल्ट रूप से लोगो और हैमबर्गर मेनू होगा।

हैमबर्गर पर क्लिक करने से एक ऑफ कैनवास मेनू खुल जाएगा जो अनुभाग नेविगेशन प्रदर्शित करने के लिए दाईं ओर से स्लाइड करेगा।

होम

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

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

के बारे में

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

मेनू

प्रत्येक वेबसाइट मेनू को अलग तरह से संभालती है:

• सेवन कॉफ़ी में कीमतों के साथ मेनू आइटम का ग्रिड होता है,
• कैफे स्ट्रीट्स में केवल वस्तुओं की एक सूची है,
• और बिल्ड और सवादा मेनू के PDF से लिंक करते हैं।

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

स्थान/संपर्क

मैं वेबसाइट के नीचे स्थान, घंटे और संपर्क जानकारी रखना चाहता हूं। मेरा अनुमान है कि उपयोगकर्ता साइट के शीर्ष पर शुरू करेंगे और नीचे तक अपना रास्ता स्क्रॉल करेंगे।

कॉल टू एक्शन को सबसे नीचे रखने से इस सवाल का जवाब मिलेगा, "अब क्या?" यह आगंतुकों को कार्रवाई करने में मदद करेगा, विशेष रूप से कैफ़े के लिए दिशा-निर्देश प्राप्त करने और  उम्मीद से आने में!

पाद लेख

पाद लेख बहुत कम होगा। यह कॉपीराइट जानकारी वाला एक छोटा सा बार होगा।

5. अपना पूरा वायरफ्रेम बनाएं

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

इसका उपयोग करना बहुत आसान है, और मुझे स्केची स्टाइल विकल्प पसंद है क्योंकि यह मजेदार है 🙂

(एक नए टैब में पूर्ण चित्र देखने के लिए थंबनेल क्लिक करें)

6. मूल डिज़ाइन विनिर्देश तय करें

फिर से, हम सुपर विस्तृत और फैंसी स्टाइल नहीं बनाने जा रहे हैं। हालांकि हमें कुछ बुनियादी बातों का पता लगाने की ज़रूरत है... चीज़ें जैसे:

रंग योजना

रंग योजना बस अलग-अलग रंग हैं जिनका आप वेबसाइट पर उपयोग कर रहे हैं। इसे अपने घर को पेंट करने और सजाने के बारे में सोचें। आमतौर पर आप ज्यादातर जगहों के लिए ग्रे और व्हाइट जैसे न्यूट्रल टोन के साथ रहना चाहेंगे। और उन महत्वपूर्ण तत्वों के लिए एक या दो चमकीले उच्चारण रंग जिन्हें आप पॉप आउट करना चाहते हैं, जैसे लिंक और बटन।

यदि आपको कुछ रंग प्रेरणा की आवश्यकता है, तो कैनवा के पास कुछ नमूना रंग पट्टियाँ हैं जिन्हें आप आज़मा सकते हैं।

सेंट्रल कॉफी वेबसाइट के लिए, मैं उस कैनवा लिंक से फॉल कलेक्शन का उपयोग करने जा रहा हूं- यह भूरे रंग के आसपास एक गर्म रंग पैलेट है।

मैं कॉफ़ी की दुकानों से जुड़े उस उदासीन, आरामदायक एहसास को जगाने की कोशिश कर रहा हूँ।

फ़ॉन्ट

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

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

छवियां/फ़ोटोग्राफ़ी

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

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

• कैनवा
• वेक्टर
• स्नप्पा

7. वेबसाइट बनाएं!

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

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

यहां बताया गया है कि मैं आमतौर पर वेबसाइट के फ्रंट एंड को कैसे तैयार करता हूं:

1. वेबसाइट फ़ाइलें सेट करें
2. फ़ोल्डर और फ़ाइलें बनाएं और उनकी संरचना करें।
3. कार्य उपविजेता और चल रहा है। (मैं इस परियोजना के लिए गल्प का उपयोग कर रहा हूं।)
4. प्रत्येक टेम्पलेट के लिए एक अलग HTML फ़ाइल बनाएँ।

फिर प्रत्येक HTML टेम्पलेट के लिए इन चरणों का पालन करें:

1. मूल HTML तत्वों के साथ कंकाल संरचना बनाएं।
2. पृष्ठ तत्वों को एक-एक करके तैयार करें।
3. प्रत्येक तत्व के लिए, सीएसएस शैलियों में जोड़ें, पहले सुनिश्चित करें कि प्रत्येक अनुभाग सही ढंग से निर्धारित किया गया है।
4. जांचें कि आपके काम करते समय ब्राउज़र में पृष्ठ कैसा दिखता है, सुधार करना जारी रखें।

सुनिश्चित करें कि आपकी वेबसाइट प्रतिक्रियाशील है

जब आप कोई साइट बना रहे हों, तो आमतौर पर यह जांचना एक अच्छा विचार है कि आपकी शैलियाँ डेस्कटॉप, टैबलेट और मोबाइल पर निर्बाध दिख रही हैं।

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

ध्यान रखें कि कोई भी इम्यूलेशन टूल वास्तविक फोन या टैबलेट की तरह 100% नहीं होगा। इसलिए अपनी शैलियों का परीक्षण करते समय, वेबसाइट के इंटरनेट पर होने पर आप अंततः इसे वास्तविक फ़ोन पर जांचना चाहेंगे।

यहां कुछ उपकरण अनुकरणकर्ता दिए गए हैं जिनका उपयोग आप वेबसाइट प्रदर्शन का परीक्षण करने के लिए कर सकते हैं:

• Responsinator.com (फ्री)
• Quirktools द्वारा स्क्रीनफ्लाई (फ्री)
• ब्राउज़रस्टैक (सशुल्क) — ब्राउजरस्टैक आपको वास्तविक उपकरणों पर वर्चुअल मशीनों का परीक्षण करने की अनुमति देता है।

तैयार उत्पाद!

तैयार सेंट्रल कॉफी वेबसाइट का स्क्रीनशॉट यहां दिया गया है:

आप मेरे Github.io पेज पर अपने लिए वास्तविक साइट देख सकते हैं।

और इसी तरह मैंने बिना किसी डिज़ाइनर को काम पर रखे एक वेबसाइट डिज़ाइन की और बनाई।

मुझे आशा है कि आपको यह पोस्ट मददगार लगी होगी! अपने कोई भी विचार मुझे नीचे कमेंट्स में बताएं।

एक पोस्ट मिस नहीं करना चाहते हैं? अगर आपने अभी तक सदस्यता नहीं ली है, तो यहां क्लिक करें और ब्लॉग पर कोई नई पोस्ट आने पर आपको सूचित किया जाएगा।