डेवलपर्स के लिए वेब डिज़ाइन गाइड

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

डिज़ाइन

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

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

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

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

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

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

वास्तव में, मैंने इस कहानी को इस तथ्य से कहा कि डिजाइन एक कौशल है, और, किसी भी अन्य कौशल के मामले में, डिजाइन में महारत हासिल की जा सकती है।

उपकरण चयन

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


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

यहाँ कुछ लोकप्रिय वेब डिज़ाइन उपकरण दिए गए हैं:

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

वस्तुतः कोई अंतर नहीं है कि क्या आप कोड लिखने के लिए उदात्त या वी.एस. कोड का उपयोग करते हैं। इंटरफ़ेस विकास के लिए आप रिएक्ट या Vue चुनते हैं या नहीं, इस बारे में भी यही कहा जा सकता है। यह स्वाद का मामला है। डिजाइनर उपकरणों के बारे में भी यही कहा जा सकता है। उनमें से प्रत्येक के अपने फायदे और नुकसान हैं।

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

सही मूड के बारे में

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

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

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

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

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

आयत उपकरण - आयतें

एक आयत डिजाइन में सबसे अधिक इस्तेमाल किया जाने वाला ज्यामितीय आंकड़ा है। जैसा कि आप डिजाइन करते हैं, आप अपने आप को उनके साथ लगातार काम कर पाएंगे। आयत के बारे में सोचें जैसे कि यह एक HTML div एलिमेंट था। आयताकार का उपयोग विभिन्न प्रकार के पृष्ठ तत्वों के डिजाइन में किया जाता है - पाठ क्षेत्रों से कंटेनरों तक।


आयत

Oolटूल टेक्स्ट - सिंगल लाइन लेबल

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

पहले मोड में, जिसे सिंगल-लाइन शिलालेखों के साथ काम करने के लिए डिज़ाइन किया गया है, टेक्स्ट कंटेनर का आकार इसमें निहित पाठ के आकार के लिए समायोजित किया गया है। यह span टैग के समान है, सिवाय इसके कि जब तक आप स्पष्ट रूप से फीड फीड का उपयोग नहीं करते हैं, तब तक ऐसे कंटेनर में पाठ स्वचालित रूप से एक नई पंक्ति में नहीं लिपटेगा। ऑपरेशन के इस मोड की ताकत यह है कि कंटेनर का आकार स्वचालित रूप से इसमें निहित पाठ के मापदंडों को समायोजित करता है।

टेक्स्ट का एक-लाइन टुकड़ा बनाने के लिए, Adobe XD टूलबार में टेक्स्ट टूल का चयन करें, जहां टेक्स्ट स्थित होना चाहिए, उस पर क्लिक करें और इसे दर्ज करें। इसे एक नियम के रूप में लिया जाना चाहिए कि इस मोड का उपयोग सिंगल-लाइन शिलालेखों के लिए किया जाना चाहिए, जिनमें से चौड़ाई स्वचालित रूप से चुनी जा सकती है। ये सिंगल-लाइन ऑब्जेक्ट हेडर और लेबल हैं।


टेक्स्ट टूल - सिंगल लाइन लेबल

▍टूल टेक्स्ट - टेक्स्ट का बड़ा हिस्सा

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


टेक्स्ट टूल - मल्टी-लाइन टेक्स्ट स्निपेट्स

Selection उपकरण का चयन करें - वस्तुओं का चयन

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


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

▍टूल लाइन - लाइनें

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


लाइन टूल

डिजाइन: सिफारिशें और चालें

▍ लेआउट

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

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


असफल और सफल लेआउट के उदाहरण

▍Tsveta

अपने अगले प्रोजेक्ट के लिए रंग चुनते समय, एक अवधारणा जैसे रंग मनोविज्ञान के बारे में जागरूक रहें । प्राथमिक रंग के आधार पर अच्छे रंग संयोजन खोजने के लिए, आप पैलेट्टन परियोजना का उपयोग कर सकते हैं।

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


रंगों और पाठ के साथ काम करने के उदाहरण

▍Tipografika

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

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


अपरकेस पाठ उदाहरण

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

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

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


लैंडिंग पृष्ठ

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

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

And निष्कर्ष और सिफारिशें

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

वेब एप्लिकेशन डिज़ाइन (या नियंत्रण कक्ष)

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

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

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


वेब अनुप्रयोग

▍ फिक्स्ड चौड़ाई कंटेनर

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

यहां वेब एप्लिकेशन के कुछ उदाहरण दिए गए हैं जो निश्चित कंटेनरों का उपयोग करते हैं: ट्विटर , बफर , डिजिटल ऑइन , नेटलाइज़ , गिटहब ।

Containers लचीले कंटेनर

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

लचीले कंटेनरों का उपयोग करने वाले अनुप्रयोगों के उदाहरणों में स्लैक , इंटरकॉम , हॉटज़र , गूगल शीट्स , ट्रेलो , स्पॉटिफ़ शामिल हैं ।

And निष्कर्ष और सिफारिशें

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

परिणाम

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

प्रिय पाठकों! क्या आपको लगता है कि एक अकेला प्रोग्रामर अच्छे डिजाइन परिणाम प्राप्त कर सकता है?