गैर-डिजाइनरों के लिए वेब डिज़ाइन गाइड

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



मैंने हमेशा प्राथमिकता दी है कि साइट कैसी दिखेगी। आप सहमत हों या न हों, लेकिन पहली छाप हमेशा दिखने में बनती है। लोग इस बात पर ज्यादा भरोसा करते हैं कि उन्हें क्या पसंद है।

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

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

और यह प्रतिभा के बारे में नहीं है

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

मैंने YouTube पर एक वीडियो पाया और कथावाचक के कार्यों को दोहराया। कुछ समय बाद मैंने अपनी शैली विकसित की और इसे स्वयं बना सकता था। मैंने भी प्रतियोगिता जीती।

डिजाइन एक कौशल है जिसे विकसित किया जा सकता है।

नौकरी के लिए सही उपकरण चुनें।

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

सबसे लोकप्रिय वेब डिज़ाइन उपकरण:

MacOS के लिए स्केच टूल। सदस्यता की लागत $ 99 / वर्ष है। कुछ इसे प्रतिक्रिया के रूप में जटिल पाते हैं।

Adobe XD एक फ्री, क्रॉस-प्लेटफ़ॉर्म टूल है जो Vue की भूमिका निभाता है। उपयोग में आसान।

किसी भी डिजाइन कार्य के लिए एडोब फोटोशॉप स्विस चाकू। इसकी तुलना jQuery से की जा सकती है। मूल्य $ 9.99 / माह

इससे कोई फर्क नहीं पड़ता कि आप कोड लिखने के लिए उदात्त या वी.एस. कोड का उपयोग करते हैं या नहीं। या आप इंटरफ़ेस के लिए रिएक्ट या वीयू का उपयोग करते हैं। यह व्यक्तिगत पसंद का मामला है। प्रत्येक उपकरण में इसके पेशेवरों और विपक्ष हैं।

मैं एडोब एक्सडी का उपयोग कर रहा हूं। सबसे पहले, क्योंकि यह एक क्रॉस-प्लेटफॉर्म प्रोग्राम है, इसलिए मैं ऐप्पल पारिस्थितिकी तंत्र का बंधक नहीं हूं। शुरुआती लोगों के लिए, यह सुविधाजनक है कि मई 2018 से, एडोब एक्सडी को केवल कुछ प्रतिबंधों के साथ स्वतंत्र रूप से उपयोग किया जा सकता है।

सोच बदल रही है

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

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

सीखने के उपकरण

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

मैंने 4 सबसे अधिक उपयोग किए जाने वाले उपकरणों को चुना ताकि आप जानकारी खोजने में कम समय और अधिक समय विकसित करने में खर्च कर सकें। जितनी जल्दी हो सके अभ्यास शुरू करें। नीचे मैं आपको बताऊंगा कि वे कैसे काम करते हैं और उनका उपयोग कैसे करते हैं।

आयत उपकरण

आयत (आयत) - सबसे सार्वभौमिक रूप। आप हर समय उनका उपयोग करेंगे। इसे एक डिव के रूप में सोचें।



लेबल टूल

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

पहला राज्य एक एकल-पंक्ति पाठ कंटेनर है जो पाठ के आधार पर इसके आकार को समायोजित करता है। यह <span> के समान है, सिवाय इसके कि यदि आप लाइन नहीं तोड़ते हैं तो यह पूरा नहीं होगा। इस राज्य का लाभ यह है कि यह स्वचालित रूप से पंक्ति ऊंचाई और फ़ॉन्ट आकार के आधार पर पाठ क्षेत्र के आकार को समायोजित करता है। इसका उपयोग उन सभी चीजों के लिए करें, जिन्हें एक निश्चित चौड़ाई की आवश्यकता नहीं है और एक एकल पंक्ति है। उदाहरण के लिए, सिंगल-लाइन हेडर और टैग।



अनुच्छेद उपकरण

दूसरा राज्य एक निश्चित आकार के साथ एक पाठ कंटेनर है, जो एक ग्रिड चौड़ाई के अंदर एक निश्चित चौड़ाई या <p> के साथ <p> की तरह व्यवहार करता है। इस स्थिति का लाभ यह है कि आप पाठ क्षेत्र के आकार को नियंत्रित कर सकते हैं। कई लाइनों पर पैराग्राफ और शीर्षकों के लिए इस राज्य का उपयोग करें।

उपकरण का चयन करें

हिलाना, आकार देना, दोहराव। इस सब के लिए, वहाँ का चयन करें। ये गुलाबी रेखाएं आपको आसपास के तत्वों से दूरी दिखाती हैं। नीली रेखाएं आपको सही तत्वों को चुनने में मदद करेंगी।



लाइन टूल

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



डिजाइन टिप्स और तकनीक

ख़ाका

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

जब मैं सिडेमेल के लिए एक परियोजना कर रहा था, तो मैंने दस्तावेज़ के भीतर समान रूप से तत्वों को वितरित किया। इसलिए वह बेहतर दिख रहा था।



रंग

अपनी अगली परियोजना के लिए सही रंग खोजने में आपकी मदद करने के लिए, रंगों के मनोविज्ञान पर विचार करें (इस विषय पर अधिक जानकारी colorpsychology.org पर मिल सकती है)।

एक अन्य उपयोगी उपकरण पैलेटन है। इसके साथ, आप आसानी से सही रंग संयोजन पा सकते हैं।

एक दृश्य पदानुक्रम बनाने के लिए प्राथमिक रंगों और पाठ रंगों के रंगों का उपयोग करें। रंगीन पृष्ठभूमि का उपयोग करते समय पाठ के लिए गहरा या हल्का शेड्स आज़माएं। सामान्य तौर पर, प्रयोग करें।



छापाघर

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

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



होमपेज या लैंडिंग पेज डिजाइन

मैं कई फैशनेबल तत्वों का उपयोग करने के प्रलोभन से बचने की कोशिश करता हूं। बल्कि, मैं लाभ के साथ आता हूं और उन्हें पाठ के रूप में प्रस्तुत करता हूं।

यदि आप प्रेरणा की तलाश में हैं, तो land-book.com देखें। यह महान पृष्ठों की एक सूची है जो आपके लक्षित दर्शकों को पसंद आएगी। एक और महान प्रेरणा पृष्ठ interface.pro है। यहां आप श्रेणी के आधार पर रैंक कर सकते हैं, उदाहरण के लिए, कीमत 404 या "हमारे बारे में"।



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

निष्कर्ष:

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

गैर-डिजाइनरों के लिए वेब डिजाइन के लिए एक डेवलपर की मार्गदर्शिका