वेब डिज़ाइन में जिस तरह से मनुष्य प्रक्रिया दृश्य सूचना का उपयोग कर रहा है
पिछले कुछ वर्षों में डिजाइनिंग वेबसाइट और यूजर इंटरफेस आसान हो गए हैं। वहाँ बहुत सारे उपकरण हैं जो आप उपयोग कर सकते हैं जो यूआई विकसित करते समय खरोंच से शुरू करने के लिए इसे व्यर्थ बनाता है (हमारे नए यूआई कम्पार्टमेंट की जांच करें)। लेकिन मैं यहाँ वेब डिज़ाइन की मृत्यु के बारे में बहस करने के लिए नहीं हूँ.
इसके बजाय, मैं जो कुछ भी करूँगा वह दृश्य डिजाइन टूल (सबसे बुनियादी सीएसएस किट से लेकर सबसे उन्नत प्रीमियम थीम तक) के मूल, मनोविज्ञान-आधारित अवधारणाओं को समझाने की कोशिश है।. आप न केवल उनका उपयोग करने जा रहे हैं, बल्कि उन्हें समझ भी रहे हैं. मुझे विश्वास है कि इससे मौजूदा लोगों को सफलता के साथ-साथ संशोधित करना भी आसान हो जाएगा.
आइए देखें कि दृश्य जानकारी को संसाधित करने के दौरान मानव मन और शरीर कैसे काम करता है और इस ज्ञान को वेब के लिए डिज़ाइन करने में कैसे व्याख्या की जाती है.
अवधारणात्मक संगठन के सिद्धांत
गेस्टाल्ट मनोविज्ञान के अनुसार, संपूर्ण इसके भागों के योग से भिन्न है. विचार के इस स्कूल के अनुयायियों का दावा है कि मानव मन समूह वस्तुओं के बारे में कुछ सिद्धांत हैं। ये केवल सिद्धांत नहीं हैं, आपको ध्यान में रखते हैं, लेकिन दृश्य समूहों के आयोजन के बारे में वास्तविक व्यावहारिक तथ्य हैं.
नीचे आपको कुछ कानून और इन सिद्धांतों के अधिक लोकप्रिय और प्रसिद्ध उपयोग मिलेंगे। तुम भी अपने अगले डिजाइन के लिए कुछ नए विचारों को खोजने में सक्षम हो सकता है.
समानता का नियम
पहला सिद्धांत कहता है कि छोटी वस्तुएं जो समान हैं उन्हें एक समूह के रूप में माना जाता है, एक ही छोटी वस्तु के कई उदाहरणों के बजाय। समानता आकार, रंग, छायांकन या किसी अन्य गुणवत्ता के आधार पर हो सकती है। यह सिद्धांत का आधार है पैटर्न डिज़ाइन साथ ही कई ज्यामितीय और न्यूनतर लोगो डिजाइन.
उदाहरण के लिए, यह चित्र अलग-अलग त्रिकोणों के बजाय एक गोलाकार लोगो के रूप में दिखता है। चील के तल पर त्रिकोणीय आकार हमें लगता है कि आकृति भी छवि का हिस्सा है.
आपने संभवतः कुछ बनाते समय इस कानून का अनजाने में उपयोग किया है, समान आकार के चुनिंदा सामग्री बॉक्स अपनी वेबसाइट के लिए। यदि आप यह दिखाना चाहते हैं कि कुछ सामग्री तत्व समान महत्व के हैं या समान जानकारी साझा करते हैं, केवल उस उद्देश्य के लिए एक विशिष्ट आकार बनाएं. इस तरह, आपका उपयोगकर्ता तुरंत उस विशेष आकार को सूचना के एक विशेष क्षेत्र के साथ जोड़ देगा.
निकटता का नियम
इस कानून के अनुसार ऑब्जेक्ट जो करीब हैं एक दूसरे को हैं एक ही समूह का माना जाता है. समान वर्ग, जब एक-दूसरे के निकट, नियमित निकटता में प्रस्तुत किए जाते हैं, समूह बनाने की भावना पैदा करते हैं.
इस सिद्धांत का उपयोग हाल ही में वेब पर काफी हद तक किया गया है, खासकर जब इसके साथ काम किया जाता है सामग्री छोरों, जैसे ब्लॉग और webshops पर.
आप तुरंत किसी भी सीमाओं या पृष्ठभूमि के बिना शीर्षक, चित्रित छवि, मेटाडेटा और अंश को एक साथ समूहित कर सकते हैं। आप अनावश्यक लाइनों और रंगों को शुद्ध करने में सक्षम हो सकते हैं ताकि इसे और अधिक न्यूनतर बनाया जा सके.
आपकी सुविधा के लिए, मैं विकिपीडिया के साथ-साथ राज्यों को भी उद्धृत करूंगा:
अच्छे फॉर्म का कानून
प्रग्नंज़ या गुड गेस्टाल्ट के कानून के रूप में भी जाना जाता है, इस कानून में कहा गया है कि हम वस्तुओं को एक साथ समूह में रखते हैं यदि वे ऐसा पैटर्न बनाएं जो सरल, नियमित और व्यवस्थित हो. हमारा दिमाग जटिल और अवधारणात्मक रूप से कठिन रूपों को केवल समझने योग्य आकार के कई समूहों में बदलने की कोशिश करता है; यह करने के लिए नेतृत्व संक्षिप्तता का महत्व.
की सफलता के पीछे संभावित कारणों में से यह भी एक है ग्रिड-आधारित डिज़ाइन और यह टेबल- और फ्रेम-आधारित (डिजाइन के अंधेरे युग की शुक्रगुजार चीजें) वेब संरचनाओं को इतना लोकप्रिय बनाता है.
यदि आप इस सिद्धांत को ध्यान में रखते हैं, तो आप संभवतः सामग्री ब्लॉक के जटिल आकृतियों से भरी एक वेबसाइट का निर्माण नहीं करेंगे, जो ऊपर अन्य कानूनों के माध्यम से ध्यान में रखी जाएगी। फिर भी, आप कर सकते हैं एक दिलचस्प तरीके से अपनी वस्तुओं को एक साथ समूहित करें, जैसे एक हीरे- या पतंग के आकार में, क्योंकि वे अभी भी क्रमबद्ध और संक्षिप्त आकार के रूप में माना जाता है.
रंग सिद्धांत, धारणा और उपयोग
रंग दृष्टि और रंग की धारणा है काफी हद तक व्यक्तिपरक पर आधारित दर्शकों का दिमाग कैसे प्रतिक्रिया देता है रंगीन वस्तुओं या आकृतियों द्वारा परावर्तित प्रकाश तरंगों को। नियम यह है कि अलग-अलग लोग, यहां तक कि किसी भी दृश्य हानि के बिना एक ही वस्तु को अलग-अलग रंग में देखते हैं (आप पोशाक को याद कर सकते हैं).
रंग के गुण
अभी भी रंग के तीन उद्देश्य गुण हैं; रंग, मूल्य तथा तीव्रता.
रंग रंग का नाम है जैसा कि रंग पहिया पर या इंद्रधनुष में लेबल किया गया है। लाल, नारंगी, पीले, हरे, नीले, बैंगनी.
पीला, नीला और लाल होता है मुख्य, नारंगी, हरे और बैंगनी हैं माध्यमिक रंग; भी, वहाँ हैं तृतीयक hues जो दो प्राथमिक और द्वितीयक hues के प्रत्यक्ष मिश्रण हैं (उदा। पीला हरा या लाल बैंगनी).
मूल्य के रूप में संदर्भित रंग की चमक या अंधेरा है उच्च मूल्य हल्के रंगों के लिए या कम मूल्य गहरे रंगों के लिए.
तीव्रता यह आपकी जानकारी के लिए है चमक या मंदता एक रंग का; इसका मतलब है कि एक ही रंग और एक ही मूल्य के साथ एक रंग अभी भी मंद हो सकता है या तीव्रता को बदलकर और अलग-अलग रंग के समीकरण बनाकर चमक सकता है.
हर रंग की उच्चतम तीव्रता रंग पहिया पर दिखाए जाने वाले रंग (नीचे देखें) है, जबकि सबसे कम रंग ग्रे है.
रंग विपरीत
समानता के उपर्युक्त कानूनों का उल्लेख करते हुए, धारणा के दिमाग छोटी वस्तुओं के समूह बनाते हैं जिन्हें वे समान और विभिन्न गुणों के आधार पर देखते हैं - अक्सर रंग.
जब आपने अपनी वेबसाइट के लिए अपना रंग पैलेट चुना, खासकर यदि आप एक न्यूनतर दृष्टिकोण के लिए जाते हैं या यदि आप एक पाठ-भारी सामग्री क्षेत्र को डिजाइन करते हैं, उदा। ब्लॉग या विज्ञापन, आपको चाहिए अलग रंग विरोधाभासों के बारे में पता होना सर्वोत्तम परिणाम के लिए सही रंग मान प्राप्त करने में आपकी सहायता कर सकता है.
जोहान्स इटेन के अनुसार 7 रंग विरोधाभास हैं, हालांकि मैं केवल 3 का उल्लेख करूंगा.
1. रंग के विपरीत
पूरी तीव्रता से पीला, लाल और नीला प्रत्यक्ष और ज्वलंत विरोधाभास हैं। माध्यमिक hues कम तेज भेद के लिए बनाते हैं, लेकिन फिर भी काम करते हैं, जैसे तृतीयक hues करते हैं, हालांकि न तो उत्पादन करते हैं प्राथमिक रंग के साथ के रूप में भयानक परिणाम.
2. पूरक विपरीत
दो रंग पूरक विपरीत होते हैं यदि मिश्रित होने पर वे एक तटस्थ ग्रे बनाते हैं। इन्हें भी कहा जाता है अजीब जोड़े. यदि वे आसन्न हैं, तो वे विशदता और तीव्रता को बढ़ाते हैं, जबकि मिश्रित होने पर वे एक दूसरे को रद्द कर देते हैं। हर रंग में एक और केवल एक पूरक होता है; रंग पहिया पर, जोड़े एक दूसरे के विपरीत तिरछे होते हैं.
3. लाइट-डार्क कंट्रास्ट
यदि आप सिंगल-कलर वेबसाइट के साथ प्रयोग करना चाहते हैं, एक ही रंग के विभिन्न मूल्यों का उपयोग करना भयानक परिणाम दे सकता है। अक्सर न्यूनतम वेब डिज़ाइन में उपयोग किया जाता है, आप अपने उपयोगकर्ता को थीम रंग विकल्प प्रदान करना चाहते हैं, तो आप लाइट-डार्क कॉन्ट्रास्ट के आधार पर शानदार परिणाम भी दे सकते हैं। इस कंट्रास्ट का उपयोग ग्रेस्केल डिज़ाइन के लिए भी किया जाता है.
यदि आप शेष 4 रंग विरोधाभासों का पीछा करना चाहते हैं, तो आप उन्हें यहां पा सकते हैं.
पैलेट बनाना और विरोधाभासों की जांच करना
सिद्धांत जानना महान है, अपने विचारों की व्याख्या करना पूरी तरह से एक और बात है। हालांकि आपको चिंता नहीं करनी चाहिए, वेब आपकी रंग-बाजीगरी की ज़रूरतों के लिए बहुत सहायता प्रदान करता है। ऐसे उपकरणों की अधिकता है जो आपको रंग विपरीत नियमों के आधार पर कस्टम रंग पैटर्न बनाने में मदद करते हैं, उदा। पैलेटन या एडोब कुलर.
वेब उद्देश्यों के लिए, आप जोनाथन स्नूच की साइट पर वेबएआईएम पर उपयोग किए जाने वाले विरोधाभासों की जांच करना चाहते हैं या द पाकीलो ग्रुप द्वारा कलर कंट्रास्ट एनालाइजर का एक उदाहरण डाउनलोड कर सकते हैं।.
निष्कर्ष
जब आप एक नए विषय के साथ काम करना शुरू करते हैं या मौजूदा लोगों को संशोधित करना शुरू करते हैं, तो अपनी सामग्री को व्यवस्थित करने के लिए धारणा के सिद्धांतों पर विचार करने का प्रयास करें और अपने डिजाइन को अंतिम रूप और रंग देने पर रंग नियमों पर विचार करना याद रखें।.
संपादक की टिप्पणी: यह अतिथि पोस्ट Hongkiat.com द्वारा लिखी गई है मार्टन फ़ेकेट. मार्टन एक हंगेरियन साइट डेवलपर है जो हाल ही में वर्डप्रेस पर आदी है। वह एक रीडिजाइन उत्साही और स्वतंत्र सामग्री लेखक हैं जो अपने खाली समय में आरपीजी खेलना पसंद करते हैं.
