एक यादृच्छिक रंग को डिजाइन दिशा में बदलें

1. एक वाक्य डिजाइन चुनौती लिखें

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

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

आपका वाक्य रंगों का वर्णन करने की आवश्यकता नहीं है। इसे संचार समस्या का वर्णन करना चाहिए। यह आपको प्रत्येक उत्पन्न परिणाम को एक पूर्वनिर्धारित दृश्य उत्तर में मजबूर करने से रोकता है।

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

2. अंतहीन स्क्रॉलिंग के बिना रंग उत्पन्न करें

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

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

यादृच्छिक चयन का मतलब यह नहीं है कि आपको एक अनुपयोगी परिणाम प्रकाशित करना चाहिए। इसका मतलब है कि आप इसे अस्वीकार करने से पहले चयनित रंग की गंभीरता से जांच करने के लिए सहमत हैं। फिर से जनरेट बटन दबाने के बजाय कम से कम पंद्रह मिनट इसकी संभावनाओं का पता लगाने में बिताएं।

चयनित रंग और पीढ़ी संख्या को अपने नोट्स में कैप्चर करें। यह व्यायाम को एक स्पष्ट शुरुआत देता है और परियोजना को काटे गए स्क्रीनशॉट का एक अंतहीन संग्रह बनने से रोकता है।

3. रंग को उपयोगी प्रारूपों में दर्ज करें

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

एमडीएन के सीएसएस रंग मानों के लिए गाइड समझाता है कि हेक्साडेसिमल संकेतन, rgb(), hsl() और नए रंग कार्यों का उपयोग करके रंगों का प्रतिनिधित्व कैसे किया जा सकता है।

मूल मान को बदले बिना रिकॉर्ड करें। आप बाद में सहायक भिन्नताएं बनाएंगे, लेकिन प्रारंभिक परिणाम पूरे अभ्यास में एक संदर्भ बिंदु के रूप में उपलब्ध रहना चाहिए।

4. इसके नाम के बजाय इसके गुणों का अध्ययन करें

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

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

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

5. रूढ़ियों पर निर्भर किए बिना एक मनोदशा बनाएं

"नीले का अर्थ विश्वास," "हरा का अर्थ प्रकृति" या "बैंगनी का अर्थ विलासिता" जैसे सार्वभौमिक दावे करना आकर्षक है। ये संघ कभी-कभी उपयोगी हो सकते हैं, लेकिन वे निश्चित नियम नहीं हैं। अर्थ संस्कृति, संदर्भ, उद्योग, टाइपोग्राफी, कल्पना और आसपास के रंगों के साथ बदलता है।

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

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

यह विधि एक ही रंग को विभिन्न कहानियों का समर्थन करने देती है बिना यह दावा किए कि इसका एक सार्वभौमिक मनोवैज्ञानिक अर्थ है।

6. रंग के लिए एक परियोजना अवधारणा बनाएं

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

का उपयोग करें नाम जनरेटर एक काल्पनिक आवेदन, कैफे, कपड़ों का लेबल, चरित्र, घटना या सेवा के लिए एक नाम बनाने के लिए। फिर यह वर्णन करें कि परियोजना क्या प्रदान करती है और कौन इसकी सेवा करता है।

केवल इसलिए एक नाम चुनने से बचें क्योंकि यह रंग का वर्णन करता है। हर हरी अवधारणा को "जंगल" या हर नीली अवधारणा को "महासागर" कहना रचनात्मक दिशा को सीमित करता है। नाम परियोजना का वर्णन करना चाहिए जबकि रंग इसके व्यक्तित्व में योगदान देता है।

आपकी अवधारणा सरल रह सकती है: "नॉर्थलाइन स्वतंत्र पेशेवरों के लिए एक योजना बनाने वाला अनुप्रयोग है जिन्हें जटिल परियोजना-प्रबंधन सॉफ़्टवेयर के बिना ग्राहक की समय सीमा को व्यवस्थित करने की आवश्यकता है।" यह इरादेमंद दृश्य विकल्प बनाने के लिए पर्याप्त संदर्भ है।

7. रंग को दृश्य नियमों में अनुवाद करें

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

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

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

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

8. नियंत्रित करें कि कितना रंग दिखाई देता है

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

60-30-10 अवधारणा एक प्रारंभिक व्यायाम प्रदान कर सकती है: प्रमुख नींव के लिए लगभग 60 प्रतिशत, सहायक क्षेत्रों के लिए 30 प्रतिशत और उच्चारण के लिए 10 प्रतिशत। यह एक सार्वभौमिक कानून नहीं है, और इंटरफेस लेआउट शायद ही कभी सही गणितीय ब्लॉक में विभाजित होते हैं। इसका मूल्य यह है कि यह आपको अनुपात के बारे में सोचने के लिए मजबूर करता है।

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

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

9. तटस्थ और कार्यात्मक भूमिकाएं जोड़ें

आपके यादृच्छिक रंग को पृष्ठभूमि, सतहों, पाठ रंगों और सीमाओं से समर्थन की आवश्यकता है। कई समान रूप से मजबूत प्रतिद्वंद्वियों के साथ चयनित रंग को घेरने के बजाय सीमित तटस्थ नींव जोड़ें।

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

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

10. एक यथार्थवादी डिजाइन नमूना बनाएं

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

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

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

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

11. दिशा को सीएसएस में स्थानांतरित करें

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

:root {
  --color-page: #f7f7f4;
  --color-surface: #ffffff;
  --color-text: #1d1e20;
  --color-text-muted: #63666b;
  --color-primary: #7b4de3;
  --color-on-primary: #ffffff;
  --color-border: #d9d9df;
}

घटकों के अंदर परीक्षण करने के बाद केवल होवर, दबाया गया और चयनित राज्य बनाएं। स्मैशिंग मैगज़ीन का लेख सीएसएस रंग-मिक्स() के साथ पैलेट को सरल बनाना इस बारे में चर्चा करता है कि संदर्भगत भिन्नताओं को मौजूदा थीम रंगों से कैसे प्राप्त किया जा सकता है।

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

12. अंतिम दिशा का तनाव-परीक्षण और दस्तावेज करें

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

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

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

अंत में, एक स्पष्ट निर्णय लें: अपनाएं, संशोधित करें या अस्वीकार करें। उत्पन्न रंग को अस्वीकार करना स्वीकार्य है जब परीक्षण दिखाता है कि यह परियोजना का समर्थन नहीं कर सकता। परीक्षण दिखाने के अवसरों की जांच करने में आपकी मदद करने से व्यायाम अभी भी सफल हो गया है।