यदि आप वेब पेज डिजाइन और बनाना चाहते हैं, तो यदि आप आगे की योजना बनाते हैं तो यह प्रक्रिया बहुत आसान हो जाएगी। नियोजन चरण में, डिज़ाइनर और क्लाइंट एक प्रारूप और लेआउट खोजने के लिए एक साथ काम कर सकते हैं जो उनकी आवश्यकताओं के अनुरूप हो। नियोजन प्रक्रिया साइट की शैली या शैली को प्रभावित करती है, आप कह सकते हैं कि यह वेब डिज़ाइन में सबसे महत्वपूर्ण पहलू है, खासकर यदि यह व्यावसायिक उद्देश्यों के लिए है।
कदम
भाग 1 का 4: मूल संरचना बनाना
चरण 1. वेबसाइट के कार्य का निर्धारण करें।
यदि आप एक व्यक्तिगत साइट बना रहे हैं, तो आप शायद पहले से ही उत्तर जानते हैं। हालांकि, यदि आप किसी अन्य संगठन, कंपनी या व्यक्ति के लिए साइट बना रहे हैं, तो आपको यह पता लगाना होगा कि वे क्या चाहते हैं और साइट की कार्यक्षमता क्या है। आप यहां जो कुछ भी निर्दिष्ट करते हैं वह वेब पेज के समाप्त होने पर प्रभावी होगा।
- क्या वेबसाइट को स्टोरफ्रंट की आवश्यकता है? क्या उपयोगकर्ता टिप्पणियां की जानी चाहिए? क्या उपयोगकर्ता को बाद में खाता बनाने की आवश्यकता होगी? क्या वेबसाइट लेख उन्मुख है? या छवि उन्मुख? ये सभी और अन्य प्रश्न साइट को डिजाइन और डिजाइन करने में आपकी मदद करेंगे।
- इस योजना प्रक्रिया को एक ड्राइंग में खींचा जा सकता है, खासकर अगर यह एक बड़ी कंपनी के लिए है और इस परियोजना को बनाने में कई लोग शामिल हैं।
चरण 2. साइट मानचित्र आरेख (साइट मानचित्र) बनाएं।
साइटमैप आरेख प्रवाह चार्ट के समान होता है, जो दिखाता है कि उपयोगकर्ता एक पृष्ठ से दूसरे पृष्ठ पर कैसे जाते हैं। इस स्तर पर आपको एक वेब पेज की आवश्यकता नहीं है, बस अवधारणाओं का एक सामान्य प्रवाह है। आप आरेख बनाने के लिए कंप्यूटर प्रोग्राम का उपयोग कर सकते हैं या कागज पर अपना स्वयं का स्केच बना सकते हैं। पदानुक्रमित व्यवस्था और वेब पेज कनेक्टिविटी की अवधारणाओं को प्रदर्शित करने के लिए इस आरेख का उपयोग करें।
चरण 3. कार्ड प्रारूपण विधि का प्रयास करें।
समूह वेब विकास का एक लोकप्रिय तरीका सभी की अपेक्षाओं का पता लगाने के लिए कई कार्डों का उपयोग करना है। कई नोट कार्ड लें और प्रत्येक पर व्यक्तिगत रूप से एक वेब पेज की मूल सामग्री लिखें। सर्वोत्तम अवधारणा खोजने के लिए इन कार्डों को अपनी टीम के साथ व्यवस्थित करें। जब आप वेब पेज बनाने में दूसरों के साथ सहयोग कर रहे हों तो यह विधि उपयोग के लिए उपयुक्त है।
चरण 4. कागज़ और बुलेटिन बोर्ड या व्हाइटबोर्ड का उपयोग करें।
यह एक छोटे बजट पर एक मूल नियोजन पद्धति है, आप सामग्री को जल्दी से हटा या स्थानांतरित कर सकते हैं और प्रवाह को बदल सकते हैं। कागज पर अपना वेब डिज़ाइन बनाएं, फिर कागज़ों को धागे से कनेक्ट करें, या बोर्ड पर रेखाएँ खींचें। यह विधि विचार-मंथन सत्रों में उपयोग के लिए बहुत उपयुक्त है।
चरण 5. एक सामग्री सूची बनाएँ।
वास्तव में यह नए वेब डिज़ाइनों की तुलना में जाले को फिर से डिज़ाइन करने में उपयोग करने के लिए अधिक उपयुक्त है। प्रत्येक तैयार सामग्री या वेब पेज को एक स्प्रेडशीट में डालें। क्या निकालना है और क्या रखना है, यह निर्धारित करने के लिए इस सूची का उपयोग करते हुए, सामग्री या पृष्ठ के प्रत्येक भाग के उद्देश्य को नोट करें। आप वेब की संरचना को सरल बना सकते हैं और बाद में रीडिज़ाइन प्रक्रिया को सरल बना सकते हैं।
भाग 2 का 4: एक मूल HTML रूपरेखा बनाना
चरण 1. वेब पेज पदानुक्रम स्थापित करने के लिए एक वायरफ्रेम बनाएं।
मूल HTML टेम्प्लेट उस साइट का खाका है जिसे आप केवल सबसे बुनियादी टैग और नमूना (ब्लॉक/टेम्पलेट्स) सामग्री का उपयोग करके बनाएंगे। यह ढांचा इस प्रश्न का उत्तर देता है, "वेब पर क्या और कहाँ दिखाई देता है?" इस रूपरेखा के निर्माण में फ़ॉर्मेटिंग और स्टाइलिंग की आवश्यकता नहीं है।
- शैली सेटिंग चुनने से पहले आप मूल रूपरेखा के साथ सामग्री की संरचना और प्रवाह चार्ट देख सकते हैं।
- मूल HTML टेम्प्लेट पीडीएफ या छवियों की तरह स्थिर नहीं होते हैं, आप नई संरचना बनाने के लिए नमूना सामग्री के माध्यम से जल्दी से स्वाइप कर सकते हैं।
- आधार ढांचा इंटरैक्टिव है जो वेब डेवलपर्स और क्लाइंट दोनों को लाभान्वित करता है। चूंकि यह बुनियादी ढांचा सरल HTML कोड के साथ लिखा गया है, आप अभी भी इसे नेविगेट कर सकते हैं और जान सकते हैं कि वेब पेज स्विचिंग कैसे काम करता है। यह पीडीएफ के साथ नहीं किया जा सकता है।
चरण 2. ग्रे बॉक्स विधि का प्रयास करें।
ग्रे बॉक्स में अपनी वेबपेज सामग्री को ब्लॉक या हाइलाइट करें, सबसे महत्वपूर्ण सामग्री शीर्ष पर है। सामग्री को एक कॉलम में क्रमबद्ध करें। उदाहरण के लिए, यदि पृष्ठ "कंपनी के बारे में" है, तो कंपनी के बारे में विस्तृत जानकारी सबसे ऊपर है, उसके बाद कर्मचारियों की सूची, फिर संपर्क जानकारी आदि।
इसमें शीर्षलेख और पादलेख शामिल नहीं हैं। ग्रे बॉक्स वेब पर दिखाई देने वाली सामग्री का एक दृश्य प्रतिनिधित्व है।
चरण 3. एक बुनियादी रूपरेखा निर्माता कार्यक्रम का प्रयास करें।
ऐसे कई कार्यक्रम हैं जिनका उपयोग आप एक बुनियादी वेब ढांचा बनाने की प्रक्रिया में कर सकते हैं। प्रत्येक प्रोग्राम के लिए आपको वेब प्रोग्रामिंग कोड (भाषा) में महारत हासिल करने की मात्रा अलग है। कुछ कार्यक्रम जो काफी लोकप्रिय हैं उनमें शामिल हैं:
- पैटर्न लैब। यह साइट "परमाणु डिजाइन" के लिए समर्पित है, प्रत्येक सामग्री को "अणु" माना जाता है जो एक बड़ा वेब पेज बनाता है।
- जम्पचार्ट। यह वेब पेज वेब-आधारित योजना और फ़्रेमिंग सेवाएं प्रदान करता है। इन साइटों को भुगतान किया जाता है और सदस्यता की आवश्यकता होती है, लेकिन आप बहुत सारे वेब प्रोग्रामिंग कोड में महारत हासिल किए बिना जल्दी से वेब ढांचे का निर्माण कर सकते हैं।
- वायरफी। Wirefy एक अन्य साइट है जो "परमाणु डिजाइन" प्रदान करती है। वेब डेवलपर्स टूल को मुफ्त में प्राप्त कर सकते हैं।
चरण 4. साधारण HTML मार्कअप का प्रयोग करें।
एक अच्छा बुनियादी टेम्पलेट आसानी से मूल साइट में बदल जाएगा। इस टेम्पलेट को बनाने की प्रक्रिया के दौरान वेब स्टाइलिंग के बारे में ज्यादा न सोचें। मार्कअप का प्रयोग करें जिसे आसानी से समझा और बदला जा सके।
एक साधारण बुनियादी ढांचा बहुत बेहतर है। मार्कअप बनाने का उद्देश्य एक संरचना का निर्माण करना है। दृश्य उपस्थिति को बाद में CSS और उन्नत मार्कअप के साथ समायोजित किया जा सकता है।
चरण 5. प्रत्येक वेब पेज के लिए एक बुनियादी रूपरेखा तैयार करें।
आप प्रत्येक वेब पेज को एक मूल रूपरेखा के साथ समान करने के लिए लुभा सकते हैं। वास्तव में, यह केवल आपकी साइट को सादा और उबाऊ बना देगा। प्रत्येक पृष्ठ के लिए एक अलग रूपरेखा बनाएं, आप समझेंगे कि प्रत्येक पृष्ठ को अपने स्वयं के डिज़ाइन की आवश्यकता है।
भाग ३ का ४: सामग्री बनाना
चरण 1. वेब पेज बनाने से पहले सामग्री तैयार करें।
यदि आपके पास नमूने या प्लेसहोल्डर का उपयोग करने के बजाय पहले से ही वास्तविक सामग्री है, तो आपके लिए अपने वेबदृश्य का पूर्वावलोकन करना बहुत आसान हो जाएगा। आपको बहुत अधिक सामग्री रखने की आवश्यकता नहीं है, लेकिन यदि आप मूल छवि की एक प्रति का उपयोग करते हैं तो आपका मॉकअप बहुत बेहतर दिखाई देगा।
आपके पास सभी लेख सामग्री होने की आवश्यकता नहीं है, लेकिन कम से कम इसका एक वास्तविक शीर्षक होना चाहिए।
चरण 2. याद रखें कि महान सामग्री केवल पाठ नहीं है।
टेक्स्ट के एक साधारण वेब पेज की तुलना में इंटरनेट बहुत अधिक जटिल है। आगंतुकों को आकर्षित करने और आमंत्रित करने के लिए एक शानदार वेबसाइट बनाने के लिए आपको विभिन्न प्रकार की विभिन्न सामग्री की आवश्यकता होती है। उदाहरण के लिए:
- चित्र।
- आवाज़।
- वीडियो।
- वेब प्रसारण या वेबस्ट्रीम (ट्विटर)
- फेसबुक एकीकरण
- आरएसएस
- वेब फ़ीड
चरण 3. मदद के लिए एक पेशेवर फोटोग्राफर से पूछें।
यदि आप अपनी साइट पर तस्वीरें शामिल करना चाहते हैं, तो आपको अपनी वेबसाइट से जो पहली छाप मिलेगी, वह पेशेवर फोटोग्राफी से भरी होने पर बहुत बेहतर होगी। एक अच्छी तस्वीर बीस से अधिक निम्न-गुणवत्ता वाली तस्वीरों के लायक है।
एक पेशेवर फोटोग्राफर की तुलना में एक सस्ते समाधान के रूप में फोटोग्राफी की कला के एक नए स्नातक की तलाश करें जो लंबे समय से व्यवसाय में है।
चरण 4. गुणवत्तापूर्ण लेख लिखें।
वेब पेज पर लिखित सामग्री आपके वेब ट्रैफ़िक की मात्रा निर्धारित करेगी। जबकि आपको इस डिज़ाइन प्रक्रिया में सामग्री निर्माण के बारे में बहुत अधिक चिंता करने की ज़रूरत नहीं है, इसके बारे में सोचना शुरू करने में कोई हर्ज नहीं है क्योंकि आपकी साइट के उठने और चलने के बाद आपको नियमित रूप से सामग्री की भी आवश्यकता होगी।
लेख सामग्री के अलावा, लिखित सामग्री है जो आपको वेब पेज को संकलित करने की प्रक्रिया में भी होनी चाहिए। उदाहरण के लिए संपर्क जानकारी, कंपनी का नाम, या कुछ और जो साइट पर कई बार उपयोग किया जाएगा।
4 का भाग 4: अवधारणाओं को वेबसाइटों में बदलना
चरण 1. बुनियादी तत्वों को व्यवस्थित करें।
तत्वों की यह व्यवस्था आपकी साइट के प्रत्येक पृष्ठ पर लागू होती है, जैसे हेडर, फुटनोट और नेविगेशन मेनू। इसे बहुत ही सरल शैली में सेट करें ताकि आप जांच सकें कि सभी पृष्ठ कैसे दिखते हैं। जब आप वेब लेआउट प्रक्रिया में आगे बढ़ते हैं तो यह विशेष रूप से उपयोगी होता है।
विवरण के बारे में बहुत अधिक चिंता न करें, शीर्षलेख कैसा दिखता है इसका पूर्वावलोकन (पूर्वावलोकन) करने का प्रयास करें।
चरण 2. एक साधारण लेआउट बनाएं।
घड़ी की स्थिति को बेस आउटलाइन कॉलम से पृष्ठ पर वास्तविक स्थान पर स्थानांतरित करके प्रारंभ करें। उदाहरण के लिए, हो सकता है कि आप नमूना नेविगेशन मेनू को पृष्ठ के बाईं ओर और शीर्षकों की सूची को दाईं ओर ले जाना चाहें।
अगले चरण पर जाने से पहले, अनेक पृष्ठों के वेब लेआउट के साथ प्रयोग करते रहें। दूसरों को यह देखने की अनुमति दें कि आपके द्वारा बनाया गया लेआउट जीवंत लगता है या नहीं।
चरण 3. एक मॉकअप बनाएं।
अपनी वेबसाइट के मॉकअप या सैंपल पेज बनाने के लिए फोटोशॉप जैसे प्रोग्राम का उपयोग करें। उस लेआउट का उपयोग करें जिसे आपने गाइड के रूप में संकलित किया है। आप इमेज प्रोसेसिंग प्रोग्राम के साथ मॉकअप को तेजी से बना सकते हैं और अपने इच्छित परिणाम प्राप्त कर सकते हैं। इन छवियों के परिणाम बाद में वेब प्रोग्रामिंग कोड लिखने की प्रक्रिया में एक संदर्भ के रूप में उपयोग किए जा सकते हैं।
वास्तविक सामग्री को अच्छा दिखाने के लिए उसे मॉकअप में रखें।
चरण 4. नमूना अवधारणा को मूल सामग्री से बदलें।
वेब पेजों में सामग्री और तत्व जोड़ें। अभी के लिए वेब स्टाइल सेटिंग्स पर पसीना न बहाएं, बस सब कुछ सही स्थान पर स्टैक करें। यह आपके द्वारा बाद में किए जाने वाले वेब शैली परिवर्तनों की समीक्षा करने में आपकी सहायता करेगा।
चरण 5. एक वेब स्टाइल गाइड बनाएं।
शैलियों का मिश्रण बनाए रखना बहुत महत्वपूर्ण है, खासकर बड़ी साइटों के लिए। यदि साइट व्यावसायिक उद्देश्यों के लिए अभिप्रेत है और पहले से ही उसका अपना ब्रांड या शैली है, तो इसे साइट डिज़ाइन में एकीकृत किया जाना चाहिए। वेब पेज स्टाइल गाइड बनाते समय ध्यान देने योग्य बातें:
- मार्गदर्शन
- हेड नोट
- अनुच्छेद
- इटैलिक कैरेक्टर
- बोल्ड कैरेक्टर
- लिंक (सक्रिय, निष्क्रिय, होवर)
- छवि उपयोग
- आइकन
- दस्ता
- सूची
चरण 6. वेब शैली लागू करें।
एक बार जब आपको सही शैली और डिज़ाइन मिल जाए, तो इसे लागू करें। CSS वेब पेज या साइट पर शैलियों को लागू करने के सबसे आसान तरीकों में से एक है। CSS का उपयोग करने के विवरण को बेहतर ढंग से समझने के लिए निम्नलिखित निर्देश देखें।
