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