बेहतर वेबसाइटों के निर्माण की कला

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

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

सामग्री को प्राथमिकता लेनी चाहिए

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

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

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

छवि सौजन्य

उत्तरदायी डिजाइन आवश्यक है (जब यह नहीं है सिवाय)

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

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

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

यह आम तौर पर ऐसा कुछ होगा जिसे आपको करने से बचना चाहिए, लेकिन असाधारण परिस्थितियों में यह तब तक स्वीकार्य होता है जब तक इसे चातुर्य से संभाल लिया जाता है।

चित्रण सौजन्य से

महत्वपूर्ण सामग्री को स्पष्ट होना चाहिए

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

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

क्या होता है एक प्रकार का संज्ञानात्मक आत्म-प्रवंचना, जहां चेतन मन कहता है "यदि मैंने यह सुना है, तो यह अच्छा होना चाहिए।" यही कारण है कि कंपनियां लाखों डॉलर खर्च करने के लिए तैयार हैं ताकि एक संकेत पर अपना लोगो प्राप्त कर सकें। एक खेल कार्यक्रम।

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

स्टाइलिस्ट तत्वों को आसानी से मिश्रण करना चाहिए

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

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

के सौजन्य से

बचाव के लिए परतें

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

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

उन अंतिम दो शब्दों को कभी एक साथ नहीं जाना चाहिए जब आप किसी ऐसी चीज़ के बारे में बात कर रहे हैं जिसे आपने बनाया है। अच्छी बात यह है कि आप वास्तव में परतों के उपयोग से स्थिति से बच सकते हैं।

एक अलग परत पर शैलीगत तत्वों को ढेर करके, आप सामग्री की परत से स्वतंत्र रूप से, अपने अवकाश पर उन्हें छिपा या दिखा सकते हैं, और दोनों परत पूरी तरह से उत्तरदायी हैं।

मान लीजिए कि उपयोगकर्ता 2560 x 1440 के रिज़ॉल्यूशन के साथ मॉनिटर पर साइट देख रहा है। हमारी निचली सामग्री परत स्क्रीन की पूरी चौड़ाई को फैलाती है, लेकिन हम उस पर मार्जिन सेट कर सकते हैं जो सामग्री को एक सजावटी सीमा के अंदर रख सकती है जो किसी भी आकार में हो सकती है जो हम चाहते हैं।

मार्जिन के बिना ऊपरी परत पर उस सजावटी सीमा को रखकर, हम निचली परत पर मार्जिन के आकार के बराबर चौड़ाई निर्धारित कर सकते हैं।

जैसे ही उपयोगकर्ता अलग-अलग स्क्रीन ब्रेकपॉइंट के माध्यम से नीचे जाता है, दोनों परतें इस तरह एक साथ काम करना जारी रख सकती हैं, और ऊपरी परत प्रत्येक ब्रेकपॉइंट के लिए पूरी तरह से अलग बॉर्डर भी दिखा सकती है। अंतिम ब्रेकपॉइंट तक हम ऊपरी परत को पूरी तरह से खारिज करते हैं, बस इसे छिपाए जाने के लिए सेट करके।

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

अंत में डिजाइन से सामग्री को ठीक से अलग करने का एक तरीका

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

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

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

हेडर इमेज सौजन्य से मैट कार्लसन

बोगदान रैंकी

बोगदान इंसपायर्ड मैग का एक संस्थापक सदस्य है, जिसके पास इस अवधि में लगभग 6 वर्षों का अनुभव है। अपने खाली समय में वह शास्त्रीय संगीत का अध्ययन करना और दृश्य कला का पता लगाना पसंद करते हैं। वह भी Fixies के साथ काफी जुनूनी है। वह पहले से ही 5 का मालिक है।