एक रंग योजना को देखते हुए, मैं वेबसाइट डिजाइन पर कैसे लागू करूं?

22

बस इसलिए कि चर्चा के लिए कुछ ठोस है, कहो मेरे पास यह रंग योजना है:

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

क्या अंगूठे या सामान्य दिशानिर्देशों के नियम हैं जो किसी को यह तय करने में मदद करते हैं कि कौन सा रंग कहाँ जाता है?

website-design color color-theory

— शाहबाज
स्रोत

2

इसका उत्तर यह है कि आप उन्हें क्या अच्छा लग रहा है के आधार पर चुनते हैं, और डिजाइन उद्देश्यों को प्राप्त करते हैं। काश, इसके लिए कोई सूत्र नहीं है।

— DA01

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

— १:04

1

बड़ा अच्छा सवाल! दुर्भाग्य से वह छवि अब 404 है।

— अनिमेश

सोच रहे लोगों के लिए, मैंने उपरोक्त डेड लिंक से रंग योजना को फिर से बनाया है। जवाब और टिप्पणियों से रंग कोड लेने से मुझे यह पैलेट मिलता है: color.adobe.com/create/color-wheel/…

— springloaded

13

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

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

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

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

अंत में मैं पिछले राज्यों जैसे गैर आवश्यक डिजाइन तत्वों को कवर करता हूं और हमें लेने के लिए कुछ अलग साग मिला है। फिर इसे संभवतः पृष्ठभूमि से पर्याप्त विपरीत करने की आवश्यकता है क्योंकि लिंक जब उनके ऊपर लुढ़कते हैं तो गायब नहीं होते हैं, अगर # 658B6F के साथ जाने के लिए इच्छुक हों ...

और ... वोइला! अब आपके पास (मूल) 4 रंग योजना है। मुझे उम्मीद है कि यह प्रक्रिया आपको मेरी मदद करती है जितना कि यह मेरी मदद करता है :)!

— JamiePatt
स्रोत

3

आपके द्वारा लिंक की गई वेबसाइट आपको दिखा रही है कि उन रंगों का उपयोग कैसे करें:

#28363D for the active state 
#2F575D as the navigation background 
#DEE1DD as background 
#C4CDC1 as banner ...

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

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

आशा करता हूँ की ये काम करेगा

— aurel
स्रोत

> जिस वेबसाइट से आप जुड़े हैं, वह आपको उन रंगों का उपयोग करने का तरीका दिखा रही है: ठीक है, यह मेरा सवाल है, यह पता लगाने के लिए 'एल्गोरिथम' क्या है?

— शाहबाज

मुझे नहीं लगता कि कोई एक है। उदाहरण के लिए, अगर मुझे उस वेबसाइट में उन रंगों को जोड़ना होता, तो मैं उन्हें उस तरह से व्यवस्थित नहीं करता। उदाहरण के लिए जिस तरह से उन्होंने यहाँ रंगों का इस्तेमाल किया lavishbootstrap.com/?image_url=http://design-seeds.com/palettes/… मेरी राय में भयानक है, हालांकि रंग बहुत अच्छा है - लेकिन मेरी राय में - बुरी तरह से व्यवस्थित। तो आपको जूस को रंगों से खेलना होगा। मुझे नहीं लगता कि एक मैकेनिक तरीका है - अगर वहाँ है तो मैं आपको अपने डिजाइनों के साथ खेलने की सलाह दूंगा और न ही इसका उपयोग करूंगा!

— औरेल

3

क्या लेना है, इसका कोई फॉर्मूला नहीं है, जो पृष्ठभूमि और आगे होना चाहिए, यही कारण है कि डिजाइन एक कला है।

आम तौर पर मैं रंगों के सेट के साथ बहुत सारे प्रयास करता हूं, उदाहरण के लिए, किस पृष्ठभूमि पर फ़ॉन्ट रंग बेहतर दिखता है।

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

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

आप कैसे जानते हैं कि यह अच्छा है या नहीं? आसान है, जैसे ही आप कहते हैं "यह अच्छा है", यह तब है जब यह अच्छा है। यह हमेशा अन्य लोगों से दूसरा उत्पीड़न प्राप्त करने में मदद करता है।

सभी के सभी, रंग संयोजन के साथ प्रयास करते रहें, केवल एक से न चिपके, और आप उस रचना से आश्चर्यचकित हो सकते हैं जिसे आप अंत में प्राप्त कर सकते हैं।

@ कलर कॉम्बिनेशन: वेबसाइट द्वारा दिया गया कॉम्बिनेशन शुरू करने के लिए काफी अच्छा है।

— निकोलस टीजे
स्रोत

2

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

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

— ब्रैड इवरसन
स्रोत