यह wikiHow आपको सिखाता है कि कैसे एक वेबसाइट डिज़ाइन करें जो पेशेवर दिखाई दे और अच्छा प्रदर्शन करे। जबकि आपकी वेबसाइट का अधिकांश डिज़ाइन अंततः आप पर निर्भर करता है, वेबसाइट बनाते समय कुछ महत्वपूर्ण चीज़ें करने और टालने की आवश्यकता होती है।
कदम
भाग 1 का 2: अपनी वेबसाइट कैसे डिज़ाइन करें
चरण 1. निर्धारित करें कि क्या आप एक वेबसाइट निर्माता का उपयोग करना चाहते हैं।
स्क्रैच से बनाई गई वेबसाइटों को HTML कोडिंग की काफी विस्तृत समझ की आवश्यकता होती है, लेकिन आप Weebly, Wix, WordPress, या Google Sites जैसी मुफ्त होस्टिंग सेवा का उपयोग करके आसानी से एक वेबसाइट बना सकते हैं। पहली बार डिजाइनरों के लिए HTML की तुलना में वेबसाइट निर्माता अधिक आसान होते हैं।
- यदि आप अपनी वेबसाइट को कोड करने का निर्णय लेते हैं, तो आपको HTML और CSS दोनों कोडिंग सीखने की आवश्यकता होगी।
- यदि अपनी वेबसाइट बनाने के लिए समय और ऊर्जा का निवेश आकर्षक नहीं लगता है, तो आप अपने लिए अपनी साइट बनाने के लिए एक वेबसाइट डिज़ाइनर को भी नियुक्त कर सकते हैं। फ्रीलांस डिजाइनरों की लागत $ 30 प्रति घंटे और अच्छी तरह से $ 100 प्रति घंटे के बीच कहीं भी हो सकती है।
चरण 2. अपनी साइट का नक्शा तैयार करें।
इससे पहले कि आप कोई वेबसाइट क्रिएटर भी खोलें, आपको लगभग पता होना चाहिए कि आप अपनी वेबसाइट पर कितने पेज चाहते हैं, उनमें से प्रत्येक पेज की सामग्री क्या होनी चाहिए, और होम पेज और "अबाउट" जैसे महत्वपूर्ण पेजों का सामान्य लेआउट। पृष्ठ।
आपकी वेबसाइट के पृष्ठों की कल्पना करना आसान हो सकता है यदि आप केवल यह निर्धारित करने के बजाय कि कौन सी सामग्री दिखाई देनी चाहिए, आप उनमें से प्रत्येक के मोटे चित्र बनाते हैं।
चरण 3. सहज ज्ञान युक्त डिजाइन का प्रयोग करें।
जबकि नए विचारों के लिए कुछ कहा जाना है, आपकी वेबसाइट के मूल डिज़ाइन को निम्नलिखित जैसे स्थापित दिशानिर्देशों का पालन करना चाहिए:
- नेविगेशन विकल्प (उदाहरण के लिए, विभिन्न पृष्ठों के लिए टैब) पृष्ठ के शीर्ष पर जाने चाहिए।
- यदि आप मेनू आइकन (☰) का उपयोग करते हैं, तो यह पृष्ठ के ऊपरी-बाएँ कोने में होना चाहिए।
- यदि आप खोज बार का उपयोग करते हैं, तो यह पृष्ठ के ऊपरी-दाएँ भाग के पास होना चाहिए।
- सहायक लिंक (उदाहरण के लिए, "अबाउट" पेज या "हमसे संपर्क करें" पेज के लिंक) प्रत्येक पेज के बिल्कुल नीचे जाने चाहिए।
चरण 4. सुसंगत रहें।
आप जो भी टेक्स्ट फॉन्ट, कलर पैलेट, इमेज थीम और डिज़ाइन विकल्प चुनते हैं, सुनिश्चित करें कि आप अपनी वेबसाइट पर एक ही निर्णय का उपयोग करते हैं। "अबाउट" पेज के लिए इस्तेमाल किए गए एक फ़ॉन्ट या रंग योजना को देखने के लिए यह अविश्वसनीय रूप से परेशान करने वाला हो सकता है जब होम पेज के लिए पूरी तरह से अलग एक का उपयोग किया गया था।
- उदाहरण के लिए, यदि आप अपनी साइट के होम पेज के लिए विशेष रूप से कूल-टोन रंगों का उपयोग करते हैं, तो अगले पेज पर चमकीले, तेज रंगों को लागू न करें।
- ध्यान रखें कि ज़ोर से या आपस में टकराने वाले रंगों का उपयोग करना, विशेष रूप से जब रंग गतिशील (जैसे, गतिशील) फैशन में प्रदर्शित होते हैं, वेब उपयोगकर्ताओं की एक छोटी संख्या में मिर्गी का कारण बन सकते हैं। यदि आप अपनी साइट पर ऐसे रंगों का उपयोग करने का निर्णय लेते हैं, तो सुनिश्चित करें कि आप किसी भी प्रासंगिक पृष्ठ से पहले मिर्गी की चेतावनी जोड़ते हैं।
चरण 5. नेविगेशन विकल्प जोड़ें।
होम पेज के शीर्ष पर अपनी वेबसाइट के महत्वपूर्ण पृष्ठों के लिए सीधे लिंक रखने से पहली बार आने वाले आगंतुकों को महत्वपूर्ण सामग्री तक पहुंचने में मदद मिलेगी। अधिकांश साइट निर्माता इन लिंक को डिफ़ॉल्ट रूप से जोड़ते हैं।
यह सुनिश्चित करना महत्वपूर्ण है कि आपकी वेबसाइट का प्रत्येक पृष्ठ केवल पृष्ठ के पते के माध्यम से पहुंच योग्य होने के बजाय आपकी वेबसाइट पर विकल्पों पर क्लिक करके पहुंच योग्य है।
चरण 6. ऐसे रंगों का प्रयोग करें जो एक दूसरे के पूरक हों।
किसी भी अन्य प्रकार के डिज़ाइन की तरह, वेबसाइट डिज़ाइन रंग के नेत्रहीन मनभावन संयोजनों पर निर्भर करता है; इस वजह से, एक साथ जाने वाले थीम रंग चुनना महत्वपूर्ण है।
यदि आप नहीं जानते कि कहां से शुरू करें, तो काला, सफेद और ग्रे एक अच्छा संयोजन है।
चरण 7. एक न्यूनतम डिजाइन का उपयोग करने पर विचार करें।
न्यूनतावाद कूल-टोन रंगों, सरल ग्राफिक्स, ब्लैक-ऑन-व्हाइट टेक्स्ट पेजों और यथासंभव कम अलंकरण को प्रोत्साहित करता है। क्योंकि अतिसूक्ष्मवाद के लिए फैंसी तत्वों की बहुत कम आवश्यकता होती है, यह आपकी वेबसाइट को अधिक काम की आवश्यकता के बिना पेशेवर और आकर्षक दिखने का एक आसान तरीका है।
- कई वेबसाइट निर्माताओं के पास एक "न्यूनतम" थीम होगी जिसे आप अपनी वेबसाइट सेट करते समय चुन सकते हैं।
- अतिसूक्ष्मवाद का एक विकल्प "क्रूरता" है, जो कठोर रेखाओं, चमकीले रंगों, बोल्ड टेक्स्ट और न्यूनतम इमेजरी का उपयोग करता है। क्रूरतावाद में अतिसूक्ष्मवाद की तुलना में निम्नलिखित कम हैं, लेकिन आपकी वेबसाइट की सामग्री के आधार पर, यह आपकी डिज़ाइन आवश्यकताओं के अनुरूप बेहतर हो सकता है।
चरण 8. अद्वितीय विकल्प बनाएं।
सीधी रेखाएं और ग्रिड-लॉक किए गए वेब तत्व सुरक्षित दांव हैं, लेकिन कुछ अद्वितीय शैलीगत निर्णय लेने से आपकी साइट को व्यक्तित्व मिलेगा और आपकी साइट को अलग दिखने में मदद मिलेगी।
- वेबसाइट तत्वों को विषम रूप से रखकर या एक स्तरित उपस्थिति बनाने के लिए अतिव्यापी तत्वों का उपयोग करके रुझानों को कम करने से डरो मत।
- जबकि सुरुचिपूर्ण, नुकीले कोने और वर्ग-बंद तत्व (जिन्हें "कार्ड-आधारित" प्रस्तुति के रूप में भी जाना जाता है) गोल, नरम तत्वों की तुलना में कम अनुकूल होते हैं।
2 का भाग 2: वेबसाइट के प्रदर्शन को अधिकतम कैसे करें
चरण 1. मोबाइल अनुकूलन विकल्पों का लाभ उठाएं।
मोबाइल ब्राउज़र में डेस्कटॉप ब्राउज़र की तुलना में अधिक वेब ट्रैफ़िक होता है, जिसका अर्थ है कि आप अपनी वेबसाइट के मोबाइल संस्करण पर जितना ध्यान देते हैं, वह कम से कम आपकी डेस्कटॉप वेबसाइट के विकास के बराबर होना चाहिए। अधिकांश वेबसाइट निर्माता सेवाएं स्वचालित रूप से आपकी साइट का एक मोबाइल संस्करण बनाती हैं, लेकिन आप अपनी मोबाइल साइट के लिए निम्नलिखित जानकारी को ध्यान में रखना चाहेंगे:
- सुनिश्चित करें कि बटन (जैसे, साइट लिंक) बड़े और टैप करने में आसान हैं।
- उन सुविधाओं को लागू करने से बचें जिन्हें मोबाइल पर नहीं देखा जा सकता (जैसे, फ्लैश, जावा, आदि)।
- अपनी वेबसाइट के लिए एक मोबाइल ऐप बनाने पर विचार करें।
चरण 2. प्रति पृष्ठ बहुत अधिक फ़ोटो का उपयोग करने से बचें।
डेस्कटॉप और मोबाइल ब्राउज़र दोनों ही बड़ी संख्या में फ़ोटो या वीडियो प्रदर्शित करने वाले पृष्ठों को लोड करने के लिए संघर्ष कर सकते हैं। जबकि वेब डिज़ाइन में छवियां महत्वपूर्ण हैं, प्रति पृष्ठ कुछ से अधिक का उपयोग करने से अनावश्यक रूप से लंबे समय तक लोड हो सकता है, जो लोगों को विचाराधीन पृष्ठ पर जाने से रोकेगा।
सामान्यतया, आप चाहते हैं कि आपकी वेबसाइट के पृष्ठ चार सेकंड से कम समय में लोड हो जाएं।
चरण 3. एक "संपर्क" पृष्ठ जोड़ें।
आप देखेंगे कि लगभग सभी स्थापित वेबसाइटों में एक "हमसे संपर्क करें" पृष्ठ होता है जिसमें संपर्क जानकारी होती है (उदाहरण के लिए, एक फोन नंबर और एक ईमेल पता); कुछ साइटों में इस पृष्ठ पर एक अंतर्निहित प्रश्न प्रपत्र भी होता है। एक "संपर्क' पृष्ठ जोड़ने से वेबसाइट के दर्शकों को आपसे सीधे संवाद करने में मदद मिलेगी, इस प्रकार संभावित निराशाओं का समाधान जुड़ जाएगा।
चरण ४. एक कस्टम ४०४ पृष्ठ बनाएँ।
जब कोई आपकी वेबसाइट पर किसी विशिष्ट पृष्ठ पर जाता है जो या तो सेट नहीं किया गया है या मौजूद नहीं है, तो एक "404 त्रुटि" वेब पेज प्रदर्शित होगा। अधिकांश ब्राउज़रों में एक डिफ़ॉल्ट 404 पृष्ठ होता है, लेकिन हो सकता है कि आप अपने वेबसाइट निर्माता की सेटिंग के भीतर से अपना पृष्ठ अनुकूलित करने में सक्षम हों; यदि हां, तो सुनिश्चित करें कि आपने निम्नलिखित विवरण शामिल किए हैं:
- एक हल्का-फुल्का त्रुटि संदेश (उदा., "बधाई हो - आपको हमारा त्रुटि पृष्ठ मिल गया!")
- साइट के होम पेज पर वापस लिंक
- आमतौर पर देखे जाने वाले लिंक्स की सूची
- आपकी वेबसाइट के लिए एक छवि या लोगो
चरण 5. यदि संभव हो तो खोज बार का उपयोग करें।
यदि आपकी वेबसाइट बनाने की विधि आपकी वेबसाइट में खोज बार जोड़ने का समर्थन करती है, तो यह दृढ़ता से अनुशंसा की जाती है कि आप ऐसा करें। यह सुनिश्चित करेगा कि उपयोगकर्ता आपके नेविगेशन विकल्पों पर क्लिक किए बिना किसी विशिष्ट पृष्ठ या आइटम पर तुरंत नेविगेट कर सकें।
खोज बार तब भी उपयोगी होते हैं जब आपकी ऑडियंस परीक्षण-और-त्रुटि का उपयोग किए बिना किसी सामान्य शब्द की खोज करना चाहती है।
चरण 6. अपने होम पेज में अधिक से अधिक समय निवेश करें।
जब कोई आपकी वेबसाइट के होम पेज पर आता है, तो उन्हें आपकी वेबसाइट की थीम का सार तुरंत मिल जाना चाहिए; इसके अलावा, होम पेज के सभी तत्वों को नेविगेशन विकल्प और किसी भी छवि सहित, जल्दी से लोड होना चाहिए। आपके होम पेज में निम्नलिखित पहलू होने चाहिए:
- कॉल टू एक्शन (उदाहरण के लिए, क्लिक करने के लिए एक बटन या भरने के लिए एक फॉर्म)
- एक नेविगेशन टूलबार या मेनू
- एक आमंत्रित ग्राफ़िक (उदा., एक ठोस फ़ोटो, एक वीडियो, या साथ में पाठ के साथ फ़ोटो का एक छोटा समूह)
- आपकी वेबसाइट की सेवा, विषय या फ़ोकस से संबंधित कीवर्ड
चरण 7. अपनी वेबसाइट को कई प्लेटफार्मों पर कई ब्राउज़रों में जांचें।
यह अविश्वसनीय रूप से महत्वपूर्ण है, क्योंकि विभिन्न ब्राउज़र आपकी वेबसाइट के पहलुओं को अलग तरह से संभाल सकते हैं। अपनी वेबसाइट का प्रचार शुरू करने से पहले, Windows, Mac, iPhone और Android प्लेटफ़ॉर्म पर निम्न ब्राउज़रों में अपनी वेबसाइट पर जाने और उसका उपयोग करने का प्रयास करें:
- गूगल क्रोम
- फ़ायर्फ़ॉक्स
- सफारी (केवल iPhone और Mac)
- माइक्रोसॉफ्ट एज और इंटरनेट एक्सप्लोरर (केवल विंडोज़)
- कई अलग-अलग एंड्रॉइड फोन (जैसे, सैमसंग गैलेक्सी, गूगल नेक्सस, आदि) पर अंतर्निहित ब्राउज़र।
चरण 8. अपनी वेबसाइट को उम्र के अनुसार अपडेट करना जारी रखें।
समय के साथ डिज़ाइन के रुझान, लिंक, फ़ोटो, अवधारणाएं और कीवर्ड सभी बदलते हैं, इसलिए अद्यतित रहने के लिए आपको अपनी वेबसाइट में परिवर्तन करना जारी रखना होगा। इसके लिए आपको हर तीन महीने में कम से कम एक बार अन्य समान वेबसाइटों के साथ अपनी वेबसाइट के प्रदर्शन की जांच करनी होगी (अधिमानतः अधिक बार)।
मूल HTML सहायता
HTML के साथ नमूना वेबपेज
समर्थन विकिहाउ और सभी नमूनों को अनलॉक करें.
एचटीएमएल धोखा पत्र
समर्थन विकिहाउ और सभी नमूनों को अनलॉक करें.
नमूना सरल वेबपेज
समर्थन विकिहाउ और सभी नमूनों को अनलॉक करें.
टिप्स
- वेबसाइट अभिगम्यता वेबसाइट विकास का एक अन्य महत्वपूर्ण पहलू है। इसमें श्रवण बाधित दर्शकों के लिए कैप्शन, नेत्रहीन आगंतुकों के लिए ऑडियो विवरण, और यदि आपकी वेबसाइट संभावित जब्ती-उत्प्रेरण प्रभावों का उपयोग करती है, तो प्रकाश संवेदनशीलता चेतावनी जैसी चीजें शामिल हैं।
- अधिकांश वेबसाइट निर्माताओं के पास टेम्प्लेट का एक सेट होता है जिसका उपयोग आप अपने पसंदीदा तत्वों को जोड़ने से पहले अपनी साइट के लेआउट और डिज़ाइन को मजबूत करने के लिए कर सकते हैं।
चेतावनी
- अधिकांश साइट निर्माता स्वतंत्र हैं; हालांकि, यदि आप अपने स्वयं के डोमेन (उदाहरण के लिए, "www.yourname.wordpress.com" के बजाय "www.yourname.com") का उपयोग करना चाहते हैं, तो आपको मासिक या वार्षिक शुल्क देना होगा।
- साहित्यिक चोरी से बचें और सभी कॉपीराइट कानूनों का पालन करें: बिना अनुमति के वेब से यादृच्छिक चित्र, या संरचनात्मक तत्व भी न जोड़ें।
