व्यक्तिगत वेबसाइट का डिज़ाइन और कोड कैसे विकसित करें

नमस्कार, हेब्र! मैं आपके लिए रयान स्मिथ के लेख "हाउ टू डिजाइन एंड कोड ए पर्सनल वेबसाइट" का अनुवाद प्रस्तुत करता हूं।

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

क्यों अपने आप को डिजाइन?

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

1. कुल द्रव्यमान से बाहर खड़े हो जाओ

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

2. अपने कौशल का अभ्यास करें

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

3. आवेदन प्रदर्शन में सुधार

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

4. पेशेवर कौशल विकसित करना

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

5. यह मजेदार हो सकता है

• जिस चीज पर आपको गर्व है उसे बनाना एक पुरस्कृत अनुभव है। यदि आपको अभ्यास करने के लिए पर्याप्त समय मिल जाए तो यह मजेदार होगा। इससे संतुष्टि पाने के लिए आपको कलाकार होने की जरूरत नहीं है।

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

एक मॉडल वायरफ्रेम बनाना

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

वेबसाइट की संरचना

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



फ्रेम का सही होना जरूरी नहीं है। जैसे ही आपकी साइट की संरचना आपको सूट करती है, आप विज़ुअल डिज़ाइन पर आगे बढ़ सकते हैं।

दृश्य डिजाइन लागू करें

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

लेआउट कार्यान्वयन

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

विभाजन और भंडारण जोड़ना

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

इस स्तर पर, आकार, आकार, सीमाओं और छाया पर विचार करें। धीरे-धीरे मुख्य आयतों को उस शैली में अपडेट करें जिसकी आपको ज़रूरत है।

ग्राफिक्स अपडेट

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

रंग जोड़ें

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



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

एक उदाहरण पृष्ठभूमि के लिए एक गहरे नीले रंग की स्थापना कर रहा है, फिर पाठ के लिए उसी नीले रंग के एक हल्के संस्करण का उपयोग कर रहा है। सफेद पृष्ठभूमि के रंगों के लिए, आप शीर्षकों के लिए मध्यम नीले रंग का उपयोग कर सकते हैं।



एक बार जब आप रंग जोड़ लेते हैं, तो समग्र डिजाइन की समीक्षा करने और परिवर्तन करने के लिए आगे बढ़ें।

विस्तार

विकास करते समय, आपको अपनी परियोजना को संपूर्ण रूप से देखने और उसे परिष्कृत करने के लिए एक कदम पीछे, एक कदम पीछे और एक सार निकालना चाहिए। सरल शब्दों में आप जो भी देखते हैं, उसका वर्णन करके अपनी परियोजना की आलोचना करें और फिर इसे एक तकनीकी समस्या में बदल दें, जिसे हल करने की आवश्यकता है।

- क्या यह तंग दिखता है?

• इंडेंट और मार्जिन बढ़ाएं

- क्या पाठ पढ़ना मुश्किल है?

• एक तेज फ़ॉन्ट चुनें या इसके आकार में वृद्धि करें
• पृष्ठभूमि और अग्रभूमि के बीच रंग विपरीत बढ़ाएँ

- क्या सामग्री को पार्स करना कठिन है?

• एक बड़े फ़ॉन्ट के साथ हेडर जोड़ें
• शीर्षकों और अनुच्छेदों के बीच अधिक अंतर जोड़ें

- क्या यह लापरवाह या असंगत दिखता है?

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

एक बार जब आप डिज़ाइन करना समाप्त कर लेते हैं, तो आप इसे कोड में बदलना शुरू कर सकते हैं।

HTML संरचना निर्माण

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

इसे सीएसएस के साथ स्टाइल करें

चूंकि HTML दस्तावेज़ ऊपर से नीचे तक जोड़े जाते हैं, आप दस्तावेज़ के ऊपर से शुरू कर सकते हैं और काम कर सकते हैं। आपके द्वारा बनाए गए डिज़ाइन का उपयोग करके, इसे HTML और CSS में जितना संभव हो उतना करीब से कॉपी करने का प्रयास करें।

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

अनुभागों और तत्वों का लेआउट

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

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

दृश्य शैलियों को जोड़ें।

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

इसे उत्तरदायी बनाएं

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



जब आपका प्रोजेक्ट लागू हो जाता है, तो आपका काम हो जाता है! अब आप तय कर सकते हैं कि आप इसके साथ क्या करना चाहते हैं।

अगले चरण

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

निष्कर्ष

• साइट डिज़ाइन स्वयं आपको डिज़ाइन कौशल विकसित करने और बाकी हिस्सों से बाहर खड़े होने में मदद करेगा।
• संरचना और कार्यक्षमता के लिए वायरफ़्रेम बनाएं।
• एक डिज़ाइन टूल के साथ अपने वायरफ्रेम को विज़ुअल डिज़ाइन में बदलें। अपनी पसंद के डिजाइन से प्रेरित हों।
• इन तत्वों को रूपांतरित करने के लिए सीएसएस को लागू करने की आवश्यकता को समझने के लिए कोड HTML पेज संरचनाएं।
• अपने डिजाइन को फिट करने के लिए अपने CSS पृष्ठों को स्टाइल करें।
• इसे एक व्यावहारिक परियोजना के रूप में उपयोग करके या डिजाइन में सुधार जारी रखने के द्वारा इसे अगले स्तर तक ले जाएं।