बेहतरीन वेब डिज़ाइन के लिए क्या करें और क्या न करें

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

महान वेब डिज़ाइन की प्रक्रिया यह सुनिश्चित करने के लिए कि हम सभी एक ही पृष्ठ पर हैं, आइए "वेब डिज़ाइन" की मूल परिभाषा से शुरुआत करें। विकिपीडिया के अनुसार, वेब डिज़ाइन है:

"वेब ब्राउज़र द्वारा व्याख्या और ग्राफिकल यूजर इंटरफेस के रूप में प्रदर्शित करने के लिए उपयुक्त मार्कअप भाषा के रूप में इंटरनेट के माध्यम से इलेक्ट्रॉनिक मीडिया डिलीवरी की अवधारणा, योजना, मॉडलिंग और निष्पादन की एक प्रक्रिया" .

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

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

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

अपनी वेबसाइट की प्रभावी अवधारणा और योजना बनाने के लिए आपको कुछ चीज़ों की आवश्यकता होगी:

• दिमाग
• एक कलम और कागज
• (वैकल्पिक) फ़्लोचार्ट सॉफ़्टवेयर
• आपकी वेबसाइट के विभिन्न अनुभागों का एक सामान्य विचार

आरंभ करने के लिए, अपनी कलम और कागज़ लें या अपना पसंदीदा फ़्लोचार्ट सॉफ़्टवेयर लॉन्च करें। हम Mac OS यदि आप पीसी पर हैं, तो स्मार्टड्रॉ एक बेहतरीन मुफ़्त फ़्लोचार्ट सॉफ़्टवेयर है जिसका आप उपयोग कर सकते हैं। हालाँकि, कलम और कागज बिल्कुल ठीक काम करते हैं।

फ़्लोचार्ट बनाने की कई विधियाँ हैं। समय और इस लेख की लंबाई को ध्यान में रखते हुए हम आपको इसे करने का सबसे बुनियादी तरीका दिखाने जा रहे हैं। यदि आप फ़्लोचार्ट के बारे में अधिक जानना चाहते हैं तो Google या Yahoo पर फ़्लोचार्ट खोजें।

वह फ़्लोचार्ट देखें जो हमने क्रोमैटिक साइट्स की संकल्पना करते समय बनाया था। (1) फ़्लोचार्ट के शीर्ष पर हम अपनी वेबसाइट का नाम सूचीबद्ध करते हैं। (2) इसके बाद, हम अपनी वेबसाइट के प्रत्येक प्राथमिक अनुभाग को शामिल करते हैं: होम, अबाउट और सेवाएँ। ये अनुभाग आपकी वेबसाइट के लिए मुख्य नेविगेशन हैं। प्रत्येक अनुभाग का नाम क्या होगा यह पूरी तरह से आपकी वेबसाइट की सामग्री पर निर्भर है। यथासंभव कम अनुभागों का उपयोग करने का प्रयास करें ताकि आपके विज़िटर आपकी वेबसाइट पर नेविगेट करते समय अभिभूत न हों।

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

द डोस

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

द डॉन्स
फ़्लोचार्ट बनाना बहुत सीधा है; हालाँकि, कुछ गलतियाँ हैं जो आसानी से की जा सकती हैं:

• अपने प्राथमिक नेविगेशन में बहुत वर्णनात्मक शब्दों का उपयोग न करें जब तक कि आपकी पूरी वेबसाइट एक संकीर्ण विषय पर केंद्रित न हो - एक ही पृष्ठ पर कई विषयों को एक साथ रखने का प्रयास न करें। इन विषयों के लिए एक सामान्य अनुभाग बनाएं और उस अनुभाग से उपखंड बनाएं। इससे उपधारा (वर्णनात्मक) वेब पेजों की खोज इंजन (Google, Yahoo, MSN, Ask) में बेहतर रैंकिंग होने की अधिक संभावना होगी। एक बार जब आप एक संक्षिप्त और वर्णनात्मक फ़्लोचार्ट बना लेंगे, तो आप दूसरे चरण पर जाने के लिए तैयार हैं। वेब डिज़ाइन प्रक्रिया का:

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

• प्रतीक चिन्ह
• नेविगेशनल मेनू
• सामग्री
• चित्र, वीडियो

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

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

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

हम आम तौर पर ऊपर बाईं ओर से शुरू करते हैं और नीचे की ओर बढ़ते हैं। ऐसा कोई विशिष्ट तरीका नहीं है जिससे वायरफ़्रेम दिखना चाहिए। अपनी कल्पना का इस्तेमाल करें। हालाँकि, सुनिश्चित करें कि अपने वायरफ्रेम बनाते समय आप वेबसाइट के सबसे महत्वपूर्ण तत्वों (लोगो, नेविगेशनल मेनू, सामग्री प्लेसमेंट, चित्र/वीडियो प्लेसमेंट) को शामिल करना न भूलें।

यदि आपके कुछ पृष्ठ समान लेआउट का उपयोग कर रहे होंगे, तो उन सभी पृष्ठों की नकल करना आवश्यक नहीं है (हालाँकि आप निश्चित रूप से ऐसा कर सकते हैं)। बस अपनी वेबसाइट के किसी भी अनूठे लेआउट का मॉकअप करना सुनिश्चित करें। आप बाद में खुद को धन्यवाद देंगे.

द डू

• सभी अद्वितीय पृष्ठों का मॉकअप करें
• महत्वपूर्ण तत्व (लोगो, नेविगेशन, सामग्री प्लेसमेंट, चित्र/वीडियो प्लेसमेंट) शामिल करें - ऊपर से शुरू करें और नीचे की ओर बढ़ें - चरण 1 में बनाए गए अपने फ़्लोचार्ट का संदर्भ लें ताकि आप किसी भी पृष्ठ का मॉकअप करना न भूलें - सहेजें, सहेजें, सहेजें - कंप्यूटर पर किसी भी चीज़ की तरह, हर 10 मिनट में अपना मॉकअप सहेजें
• स्वच्छ, उपयोगकर्ता के अनुकूल लेआउट पर ध्यान केंद्रित करें - अपने तत्वों को लेबल करें ताकि आप यह न भूलें कि जब आप उन्हें चरण 3 में संदर्भित करते हैं, तो निष्पादन - प्रेरणा के रूप में अन्य वेब साइटों का उपयोग करें; अन्य साइटों से तत्व लेने और उन्हें अपना बनाने में कुछ भी गलत नहीं है ("क्या न करें" देखें)

मत करो

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

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

जब तक आप तीसरे चरण तक पहुँचते हैं, आपको इसका स्पष्ट विचार होना चाहिए:

• आपके विज़िटर एक स्थान से दूसरे स्थान तक कैसे पहुंचेंगे (चरण 1, फ़्लोचार्ट) - आपके वेब पेज कैसे बनाए जाएंगे (चरण 2, वायरफ़्रेम मॉकअप)

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

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

हम आमतौर पर पहले "होम" पेज (इंडेक्स) बनाना शुरू करते हैं। चरण 2 में आपके द्वारा बनाए गए प्रत्येक पेज के लिए एक टेम्पलेट के रूप में आपके द्वारा बनाए गए वायरफ्रेम का उपयोग करें। हालाँकि, ठोस बक्सों का उपयोग करने के बजाय, ग्राफ़िक्स, रंग और टेक्स्ट का उपयोग करें। प्रत्येक पृष्ठ बिल्कुल वैसा ही दिखना चाहिए जैसा आप उन्हें इंटरनेट पर दिखाना चाहते हैं क्योंकि यह डिज़ाइन प्रक्रिया का अंतिम चरण है।

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

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

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

द डोस

• चरण 2 में बनाए गए अपने टेम्प्लेट का संदर्भ लें; हालाँकि अपने मूल लेआउट से हटना ठीक है, लेकिन आपको इसकी आवश्यकता नहीं होनी चाहिए
• अपना वास्तविक डिज़ाइन बनाने से पहले कुछ शोध करें; अन्य साइटों से विचार प्राप्त करें और उन्हें अपना बनाएं (साहित्यिक चोरी किए बिना)
• अपने वेब पेजों को अंतिम रूप देने के लिए रंग और ग्राफिक्स शामिल करें - छवियों से अपने डिजाइनों को वेब ब्राउज़र द्वारा समझे जाने योग्य मार्कअप में बदलने के लिए सीएसएस (कैस्केडिंग स्टाइल शीट) का उपयोग करें - हाइपरलिंक के साथ अपने पेजों को कोड करते समय चरण 1 से अपने फ्लोचार्ट का संदर्भ लें; एक ड्रॉप डाउन मेनू का उपयोग करना बेहतर है जिसमें आपकी वेबसाइट के प्रत्येक पृष्ठ पर सभी (या अधिकांश) लिंक शामिल हों; इससे नेविगेशन आसान हो जाएगा और सर्च इंजन स्पाइडर के रुकने पर आपके पेजों को क्रॉल करना भी आसान हो जाएगा; CSS ड्रॉप डाउन मेनू प्राप्त करने के लिए एक बेहतरीन जगह DynamicDrive.com है - फ़ोटोशॉप या आपके द्वारा उपयोग किए जाने वाले किसी भी छवि संपादन सॉफ़्टवेयर में काम करते समय अपने डिज़ाइन को अंतिम रूप दें; एक बार मार्कअप (कोड) में परिवर्तित हो जाने पर आपके डिज़ाइन में परिवर्तन करना कष्टदायक हो सकता है

द डॉन्स

• सीएसएस में कनवर्ट करते समय अपने नेविगेशन मेनू में टेक्स्ट शामिल न करें; छवि पाठ का उपयोग करने के बजाय, नियमित पाठ का उपयोग करें जो खोज इंजन स्पाइडर द्वारा पढ़ने योग्य हो
• कनवर्ट करते समय तालिकाओं का उपयोग न करें; यहां तक ​​कि अगर आपको सीएसएस पर एक किताब खरीदने की ज़रूरत है, तो यह इसके लायक होगी; टेबलें मर चुकी हैं
• केवल समय बचाने के लिए पहले दो चरणों को न छोड़ें; यदि आप वेब डिज़ाइन प्रक्रिया की शुरुआत से शुरू करते हैं (अंत के बजाय) तो आपकी वेबसाइट बेहतर होगी
• जब आपकी छवियों को सीएसएस के लिए अलग किया जाए तो उन्हें संपीड़ित करना न भूलें; बड़ी छवि फ़ाइलों के कारण धीमी गति से लोड होने वाली वेबसाइट से बुरा कुछ नहीं है; फ़ोटोशॉप में "वेब के लिए अनुकूलित सहेजें" विकल्प है (CS3 - "वेब और डिवाइस के लिए सहेजें")

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