अगर आप क्लाइंट्स के लिए फ्रीलांस वेबसाइट बनाने की कोशिश कर रहे हैं, या सिर्फ अपना पोर्टफोलियो बनाने की कोशिश कर रहे हैं, तो आप इस दुविधा का सामना कर चुके होंगे:
अगर आपके पास कोई वेब डिज़ाइन कौशल नहीं है तो वेबसाइट कैसे बनाएं?
यहाँ कुछ विकल्प हैं:
- आप डिज़ाइन बनाने के लिए एक वेब डिज़ाइनर को हायर कर सकते हैं - लेकिन (अच्छे) डिज़ाइनर सस्ते नहीं हैं।
- आप Fiverr या Upwork पर सस्ते डिज़ाइनर ढूंढ सकते हैं - लेकिन आप जानते हैं कि यह जोखिम भरा हो सकता है।
- या आप एक फ्री या प्रीमियम थीम या टेम्पलेट डाउनलोड कर सकते हैं - लेकिन कभी-कभी वे वह सब नहीं करते जो आप चाहते हैं।
आपके लिए एक अन्य विकल्प है वेबसाइट लेआउट और डिज़ाइन करने के लिए कुछ बुनियादी कौशल सीखना, और अपना फ्रंट एंड खुद बनाना।
अब, आप इस लेख को पढ़ने में लगने वाले समय में एक अद्भुत डिज़ाइनर नहीं बनने वाले हैं। और जटिल वेबसाइट्स के लिए, आपको अंत में एक पेशेवर डिज़ाइनर के साथ काम करना पड़ सकता है।
लेकिन मेरा मानना है कि आप सरल वेबसाइटों की योजना बनाने और डिज़ाइन करने का तरीका सीख सकते हैं जो अधिकांश छोटे व्यवसायों के लिए काम करेगी।
इस विधि में शामिल है:
- दृष्टिगत रूप से वेबसाइटों को कैसे रखा जाता है, इसकी मूल बातें सीखना,
- और मौजूदा वेब डिज़ाइन पर शोध करके अपने लिए प्रेरणा और विचार प्राप्त करना।
यह वास्तव में वही रणनीति है जिसका उपयोग मैंने कोडर कोडर वेबसाइट बनाने के लिए किया था! दी गई, यह एक बहुत ही सरल डिज़ाइन है, कुछ भी बहुत फैंसी नहीं। लेकिन कभी-कभी सरल ही वह सब है जो आपको चाहिए।
एक बार जब आप वेब के लिए लेआउट और डिज़ाइन की मूल बातें जान लेते हैं, तो आप कस्टम वेबसाइट बनाने में सक्षम होंगे जिनका उपयोग आप अपने पोर्टफोलियो और फ्रीलांस क्लाइंट्स के लिए कर सकते हैं।
और, निश्चित रूप से, आपके द्वारा बनाई गई प्रत्येक वेबसाइट आपको अनुभव देगी। समय के साथ, आप अपने शिल्प का अभ्यास जारी रखते हुए अधिक से अधिक जटिल डिज़ाइन बनाने में सक्षम होंगे।
इस प्रक्रिया के मुख्य चरण हैं:
- अपनी वेबसाइट की मूल बातें तय करें
- अपनी वेबसाइट के लेआउट की योजना बनाएं
- डिज़ाइन को एक साथ रखें
- अंतिम उत्पाद बनाएं
प्रत्येक चरण शोध द्वारा संचालित होगा - अन्य वेबसाइटों को देखकर कि वे क्या करते हैं, और उन भागों को निकालकर जिन्हें आप अपनी वेबसाइट के लिए पुन: उपयोग करना चाहते हैं।
एक महत्वपूर्ण नोट: मैं बिल्कुल भी यह वकालत नहीं कर रहा कि आप CSS या इमेज चुराएं जो आपकी नहीं हैं। (एक बात के लिए, आप कॉपी-पेस्ट जॉब से कुछ नहीं सीखेंगे।) यहां विचार रचनात्मक विचारों और अवधारणाओं को प्राप्त करना है, और उनका उपयोग करके कुछ समान बनाना है।
1. अपनी वेबसाइट की मूल बातें तय करें
रंग या फॉन्ट चुनना शुरू करने से पहले, आइए इस वेबसाइट के बारे में कुछ सामान्य सवालों के जवाब दें:
1. वेबसाइट किस प्रकार के व्यवसाय को बढ़ावा देगी?
एक पिज़्ज़ा स्थान, फोटोग्राफर का स्टूडियो, या किताबों की दुकान? किसी भी प्रकार का व्यवसाय वेबसाइट से लाभ उठा सकता है, इसलिए आप कुछ भी चुन सकते हैं।
हमारे उद्देश्यों के लिए, हम सेंट्रल कॉफी नामक एक काल्पनिक कॉफी शॉप चुनेंगे। क्योंकि हर किसी को कॉफी पसंद है, है ना?
2. वेबसाइट में कौन से पेज होंगे?
कुछ सामान्य पेज होंगे होमपेज, अबाउट पेज, कॉन्टैक्ट पेज, और उस उद्योग के लिए विशिष्ट पेज जिसमें व्यवसाय है।
वेबसाइट के पेज और अन्य सामान्य संरचनात्मक पहलुओं का पता लगाने का सबसे अच्छा तरीका कुछ त्वरित ऑनलाइन शोध करना है।
2. मौजूदा वेबसाइटों पर शोध करें
समान प्रकार के व्यवसायों के लिए अन्य मौजूदा वेबसाइटों को देखें। इनमें से 3-4 वेबसाइटों को देखें और देखें कि उनके पास कौन से पेज हैं।
यह नोटिस करने की कोशिश करें कि वेबसाइट कैसे डिज़ाइन की गई है और इस पर नोट्स लें:
- वेबसाइट में कौन से पेज हैं,
- समग्र शैली क्या है,
- नेविगेट करना और चीजों को ढूंढना कितना आसान है,
- और कुछ और जो आपकी रुचि को बढ़ाता है।
उदाहरण वेबसाइट खोजने के लिए एक अच्छी जगह थीम फॉरेस्ट है। इसमें ढेर सारे फ्री और प्रीमियम वेबसाइट टेम्पलेट और वर्डप्रेस थीम हैं। और अगर आप सबसे लोकप्रिय थीम के साथ रहते हैं, तो आप जानते हैं कि आम तौर पर वे अच्छे डिज़ाइन के उदाहरण होंगे।
यहाँ एक थीम से मिला एक कॉफी शॉप उदाहरण है।
The7
पेज:
वन-पेज वेबसाइट जिसमें सेक्शन हैं: होम, अबाउट, लोकेशन, ऑफर्स, मेनू, न्यूज़, प्रेस, ब्लॉग पोस्ट
शैली:
आधुनिक और साफ, अच्छी तस्वीरों के साथ
नेविगेशन:
नेविगेट करना आसान
और यहाँ कुछ वेबसाइटें हैं जो मुझे "शिकागो में कॉफी शॉप" खोज से मिलीं:
The Wormhole Coffee
पेज:
होमपेज, ब्लॉग, लोकेशन/कॉन्टैक्ट, जॉब अवसर
शैली:
आधुनिक प्रकार का; दुकान की तस्वीरें अधिक पुरानी यादों वाली हैं
नेविगेशन:
तुरंत स्पष्ट नहीं है कि यह एक कॉफी शॉप है। साइट को नेविगेट करना थोड़ा मुश्किल है।
Caffe Streets
पेज:
वन-पेज वेबसाइट, सेक्शन हैं: होम, कैफे (अबाउट), मेनू, रोस्टिंग, टाइम मशीन (जूस), कॉन्टैक्ट फॉर्म
शैली:
सरल और आधुनिक (स्क्वेयरस्पेस)
नेविगेशन:
नेविगेट करना काफी आसान; मुझे शीर्ष पर स्टिकी मेनू बार पसंद है जो आपको प्रत्येक सेक्शन तक स्क्रॉल करता है।
Build Coffee
पेज:
वन-पेज वेबसाइट, सेक्शन हैं: होमपेज, अबाउट, आवर्स, लोकेशन, शॉप, कैटरिंग, इवेंट्स, कॉन्टैक्ट
शैली:
सरल, डिज़ाइन सेक्शन के बीच फुल-विड्थ तस्वीरों का संयोजन है जिनमें व्हाइट बैकग्राउंड और टेक्स्ट है।
नेविगेशन:
नेविगेट करना काफी आसान
Sawada Coffee
पेज:
होमपेज, अबाउट, फूड एंड ड्रिंक, प्रेस, कॉन्टैक्ट एंड आवर्स, आवर रेस्टोरेंट्स, जॉब्स
शैली:
डिज़ाइन ज्यादातर फोटोग्राफी के बारे में है, और टेक्स्ट लगभग एक बाद का विचार लगता है
नेविगेशन:
नेविगेट करना थोड़ा मुश्किल है - दाएं कोने में हैमबर्गर मेनू लगभग नहीं दिखा।
3. अपनी वेबसाइट के लिए नोट्स लिखें
अब, कई कॉफी शॉप वेबसाइटों को देखने के बाद, हमें इस बात का बेहतर अंदाजा है कि कौन सी सुविधाएं सामान्य हैं। और हमारे पास कुछ विचार हैं कि हमें क्या काम करता है और क्या नहीं लगता।
अपने शोध के आधार पर, आप अब अपनी साइट के लिए नोट्स लिखना शुरू कर सकते हैं।
सेंट्रल कॉफी के लिए, मुझे लगता है कि हम एक साधारण वन-पेज वेबसाइट के साथ रहेंगे, जिसमें निम्नलिखित सेक्शन होंगे:
- हेडर
- होम
- अबाउट
- मेनू
- लोकेशन/कॉन्टैक्ट
- फूटर
4. अपनी वेबसाइट के लेआउट की योजना बनाएं
अब जब हमने साइट का कंकाल निकाल लिया है, तो हम प्रत्येक पेज या सेक्शन को उन तत्वों से भर देंगे जिन्हें हम प्रत्येक में रखना चाहते हैं। हम जो लेआउट बनाएंगे उसे वायरफ्रेम भी कहा जाता है।
वायरफ्रेम में, हम वास्तव में कुछ भी डिज़ाइन नहीं कर रहे हैं, मतलब अभी कोई फॉन्ट, रंग, या तस्वीरें नहीं। हम सिर्फ यह पता लगा रहे हैं कि हम किस तरह का कंटेंट चाहते हैं, और यह पेज पर लगभग कहां होगा। यह इस बिंदु पर ब्लूप्रिंट या आरेख की तरह अधिक है।
हेडर
मुझे सेवन कॉफी डेमो पेज और कैफे स्ट्रीट्स वेबसाइट पर शीर्ष नेविगेशन बार पसंद है।
हालांकि दोनों पेजों पर यह केंद्रित है, और मैं इसे बाएं अलाइन रखना पसंद करूंगा, पहले लोगो और फिर सेक्शन।
यह डेस्कटॉप संस्करण के लिए है। टैबलेट और मोबाइल के लिए, हमारे पास डिफ़ॉल्ट रूप से हेडर में सिर्फ लोगो और हैमबर्गर मेनू होगा।
हैमबर्गर पर क्लिक करने से एक ऑफ-कैनवास मेनू खुलेगा जो दाएं से स्लाइड करेगा और सेक्शन नेविगेशन प्रदर्शित करेगा।
होम
चूंकि यह एक वन-पेज साइट है, "होमपेज" वह होगा जो आप शुरू में स्क्रीन पर देखते हैं जब आप वेबसाइट लोड करते हैं। और मुझे पसंद है कि सेवन कॉफी का नाम के नीचे एक छोटा टैगलाइन है।
मुझे लगता है कि यहां मेरे पास बैकग्राउंड में एक इमेज होगी (बिल्ड कॉफी की तरह) जिसके ऊपर टेक्स्ट होगा। यह डेस्कटॉप और मोबाइल दोनों पर समान होगा।
अबाउट
सभी वेबसाइटों में एक छोटा अबाउट सेक्शन होता है, कुछ तस्वीरों के साथ। मैं कैफे के बारे में एक पैराग्राफ डालूंगा और दुकान के इंटीरियर की कुछ तस्वीरें भी शामिल करूंगा ताकि उपयोगकर्ता आने के लिए ललचाएं।
मेनू
प्रत्येक वेबसाइट मेनू को अलग तरीके से संभालती है:
- सेवन कॉफी में कीमतों के साथ मेनू आइटम का एक ग्रिड है,
- कैफे स्ट्रीट्स में सिर्फ आइटम की सूची है,
- और बिल्ड और सवादा PDF मेनू से लिंक करते हैं।
व्यक्तिगत रूप से मुझे नफरत है जब मैं अपने फोन पर वेबसाइट ब्राउज़ कर रहा होता हूं और मुझे PDF डाउनलोड करना पड़ता है। इसलिए मैं पेय और खाद्य पदार्थों के साथ एक सरलीकृत मेनू पर रहूंगा, और कुछ तस्वीरें शामिल करूंगा।
लोकेशन/कॉन्टैक्ट
मैं वेबसाइट के नीचे लोकेशन, आवर्स, और कॉन्टैक्ट जानकारी रखना चाहता हूं। मेरा अनुमान है कि उपयोगकर्ता साइट के शीर्ष से शुरू करेंगे और नीचे तक स्क्रॉल करेंगे।
कॉल टू एक्शन को नीचे रखने से सवाल का जवाब मिलेगा, "अब क्या?" यह आगंतुकों को कार्रवाई करने में मदद करेगा, विशेष रूप से कैफे के लिए दिशा-निर्देश प्राप्त करके और उम्मीद है कि विज़िट करेंगे!
फूटर
फूटर काफी न्यूनतम होगा। यह सिर्फ कॉपीराइट जानकारी के साथ एक छोटा बार होगा।
5. अपना पूरा वायरफ्रेम बनाएं
यहाँ वेबसाइट के डेस्कटॉप और मोबाइल संस्करण के पूर्ण वायरफ्रेम हैं। मैंने इन्हें मॉकफ्लो नामक एक फ्री ऑनलाइन टूल का उपयोग करके बनाया है। वे आपको एक प्रोजेक्ट मुफ्त में बनाने देते हैं, और अगर आप एक से अधिक प्रोजेक्ट चाहते हैं तो उनके पास पेड प्लान हैं।
यह उपयोग करने में काफी आसान है, और मुझे स्केची स्टाइल विकल्प पसंद है क्योंकि यह मजेदार है 🙂
(पूर्ण छवियों को नए टैब में देखने के लिए थंबनेल पर क्लिक करें)
6. बुनियादी डिज़ाइन विनिर्देश तय करें
फिर से, हम सुपर डिटेल्ड और फैंसी स्टाइल नहीं बनाने जा रहे हैं। हमें हालांकि कुछ बुनियादी चीजों का पता लगाने की जरूरत है... जैसे:
रंग योजना
रंग योजना केवल वे अलग-अलग रंग हैं जिनका आप वेबसाइट पर उपयोग कर रहे हैं। इसे अपने घर को पेंट करने और सजाने की तरह समझें। आमतौर पर आप तटस्थ टोन जैसे ग्रे और सफेद के साथ रहना चाहेंगे, अधिकांश स्थानों के लिए। और एक या दो चमकीले एक्सेंट रंग उन महत्वपूर्ण तत्वों के लिए जिन्हें आप पॉप आउट करना चाहते हैं, जैसे लिंक और बटन।
अगर आपको कुछ रंग प्रेरणा चाहिए, तो कैनवा में कुछ सैंपल कलर पैलेट हैं जिन्हें आप आज़मा सकते हैं।
सेंट्रल कॉफी वेबसाइट के लिए, मैं उस कैनवा लिंक से फॉल कलेक्शन का उपयोग करने जा रहा हूं - यह ब्राउन पर आधारित एक गर्म रंग पैलेट है।
मैं कॉफी शॉप से जुड़ी उस पुरानी यादों वाली, आरामदायक भावना को जगाने की कोशिश कर रहा हूं।
फॉन्ट्स
वेबसाइटों पर वापस जाने पर, उनमें से लगभग सभी सैंस-सेरिफ़ फॉन्ट का उपयोग करते हैं (यानी ऐसे अक्षर जिनमें "सेरिफ़" नहीं होता, या टाइपराइटर टेक्स्ट की तरह अंत में बार नहीं होते)। मैं आपके अधिकांश टेक्स्ट के लिए एक सरल फॉन्ट चुनूंगा, और फिर आप शीर्षक और हेडलाइन के लिए थोड़ा अधिक फैंसी भारी वजन वाले फॉन्ट के साथ जा सकते हैं।
गूगल फॉन्ट्स आपकी वेबसाइट पर मुफ्त में लोड करने के लिए फॉन्ट खोजने के लिए एक बेहतरीन जगह है। बस बहुत सारे न लें, क्योंकि हर फॉन्ट फैमिली, वजन, और शैली साइट पर अतिरिक्त लोड जोड़ देगी।
इमेज/फोटोग्राफी
एक सामान्य शैली या मूड चुनें जो उस व्यवसाय के प्रकार के अनुकूल हो जिसके लिए वेबसाइट है। कॉफी शॉप के लिए, आप आमतौर पर नरम रोशनी के साथ आमंत्रित तस्वीरें, इंटीरियर शॉट्स के लिए आरामदायक या पुरानी यादों वाली भावना, कॉफी शॉप में बातचीत करते और आराम करते लोग, और भोजन और पेय की छवियां चाहते हैं।
इलस्ट्रेशन और लोगो के लिए, कुछ फ्री ऑनलाइन ग्राफिक डिज़ाइन टूल हैं जो आपकी वेबसाइट पर उपयोग करने के लिए छवियों के साथ आते हैं। कुछ उदाहरण हैं:
- कैनवा
- वेक्टर
- स्नैपा
7. वेबसाइट बनाएं!
अब हमारे पास वायरफ्रेम हैं जो हमें बताते हैं कि आम तौर पर सब कुछ कैसे रखा गया है। और हमारे पास डिज़ाइन रेफरेंस हैं, जो फ्रंट एंड स्टाइल को गाइड करने में मदद करते हैं।
चूंकि हमारे पास डिटेल्ड PSD बनाने के लिए डिज़ाइनर नहीं है, हम बस आगे बढ़ेंगे और उन वायरफ्रेम से वेबसाइट बनाना शुरू कर दें जो हमने अभी बनाए हैं।
यहाँ मैं आमतौर पर वेबसाइट के फ्रंट एंड को बनाने के लिए कैसे दृष्टिकोण करता हूं:
- वेबसाइट फाइलें सेटअप करें
- फोल्डर्स और फाइलें बनाएं और संरचना करें।
- टास्क रनर चालू करें। (इस प्रोजेक्ट के लिए मैं गल्प का उपयोग कर रहा हूं।)
- प्रत्येक टेम्पलेट के लिए एक अलग HTML फ़ाइल बनाएं।
फिर प्रत्येक HTML टेम्पलेट के लिए इन चरणों से गुजरें:
- बुनियादी HTML एलिमेंट्स के साथ कंकाल संरचना बनाएं।
- पेज एलिमेंट्स को एक-एक करके बनाएं।
- प्रत्येक एलिमेंट के लिए, CSS स्टाइल जोड़ें, पहले यह सुनिश्चित करते हुए कि प्रत्येक सेक्शन सही ढंग से रखा गया है।
- जैसे ही आप काम करते हैं, ब्राउज़र में पेज कैसा दिखता है, इसकी जांच करें, सुधार जारी रखते हुए।
सुनिश्चित करें कि आपकी वेबसाइट रिस्पॉन्सिव है
जब आप साइट बना रहे हों, तो आम तौर पर यह जांचना एक अच्छा विचार है कि आपके स्टाइल डेस्कटॉप, टैबलेट और मोबाइल पर सहज दिख रहे हैं।
आप अपने कंप्यूटर पर विभिन्न ब्राउज़रों के साथ डेस्कटॉप स्टाइल को आसानी से जांच सकते हैं। मोबाइल के लिए, आप क्रोम के डेवलपर टूल्स का उपयोग कर सकते हैं, जो विभिन्न मोबाइल डिवाइस पर वेबसाइट का अनुकरण करता है।
ध्यान रखें कि कोई भी अनुकरण टूल 100% वास्तव में फोन या टैबलेट पर दिखने जैसा नहीं होगा। इसलिए अपने स्टाइल का परीक्षण करते समय, आप अंततः इसे एक वास्तविक फोन पर जांचना चाहेंगे जब वेबसाइट इंटरनेट पर हो।
यहाँ कुछ डिवाइस एमुलेटर हैं जिनका उपयोग आप वेबसाइट डिस्प्ले का परीक्षण करने के लिए कर सकते हैं:
- Responsinator.com (फ्री)
- क्विर्कटूल्स द्वारा Screenfly (फ्री)
- Browserstack (पेड) — Browserstack आपको वास्तविक डिवाइस पर वर्चुअल मशीन का परीक्षण करने की अनुमति देता है।
तैयार उत्पाद!
यहाँ तैयार सेंट्रल कॉफी वेबसाइट का स्क्रीनशॉट है:
आप असली साइट को मेरे गिटहब.आईओ पेज पर स्वयं देख सकते हैं।
और इस तरह मैंने एक डिज़ाइनर को हायर किए बिना एक वेबसाइट डिज़ाइन और बनाई।
मुझे आशा है कि आपको यह पोस्ट उपयोगी लगी! नीचे कमेंट्स में अपने विचार मुझे बताएं।
कोई पोस्ट मिस नहीं करना चाहते? अगर आपने अभी तक सब्सक्राइब नहीं किया है, तो यहां क्लिक करें और जब भी ब्लॉग पर नई पोस्ट होगी आपको सूचित किया जाएगा।
