ब्लैक एंड व्हाइट: फोकस के लिए निर्मित एक डिज़ाइन प्रणाली

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

हमने जानबूझकर रंग क्यों हटाया?

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

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

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

टेकअवे: यदि आप पदानुक्रम समस्या को ठीक करने के लिए रंग का उपयोग कर रहे हैं, तो आपके पास पदानुक्रम समस्या है, रंग समस्या नहीं। मोनोक्रोम आपको इस पर कागज लगाने से मना कर देता है।

रंग के बिना पदानुक्रम: तीन लीवर

मेज के रंग में तीन लीवर सारा काम करते हैं।

टाइप स्केल। हम स्पष्ट छलांग के साथ एक मॉड्यूलर स्केल चलाते हैं, आकारों की निरंतर ढाल के साथ नहीं। जो कदम बहुत करीब बैठते हैं उन्हें शोर के रूप में पढ़ा जाता है; आँख को स्पष्ट रैंक की आवश्यकता है। हमारा कामकाजी पैमाना लगभग 12 / 14 / 16 / 20 / 28 / 40 / 64px है। मुख्य पाठ 16 पर बैठता है, द्वितीयक मेटाडेटा 14 पर, और 20 से ऊपर की हर चीज़ संरचनात्मक है। यदि दो चीजों को महत्व में भिन्न महसूस करने की आवश्यकता है, तो उन्हें अलग-अलग चरण मिलते हैं, दो शेड्स ऑफ ग्रे में कभी भी एक ही चरण नहीं होता है।

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

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

कंट्रास्ट एक प्रणाली है, जीवंतता नहीं

काले और सफेद रंग का जाल यह सोच रहा है कि आपके पास केवल दो मूल्य हैं। आपके पास पूर्ण ग्रेस्केल रैंप है, और अनुशासन इसे नियंत्रित करने में है। हम चरणों का एक छोटा, निश्चित सेट परिभाषित करते हैं और ऑफ-रैंप ग्रेज़ को प्रतिबंधित करते हैं। यहाँ वह रैंप है जिसे हम वास्तव में शिप करते हैं:

--ink-000: #000000   /* primary text, headings */
--ink-700: #3d3d3d   /* body on light, secondary headings */
--ink-500: #6b6b6b   /* metadata, captions, disabled-adjacent */
--ink-300: #b0b0b0   /* borders, dividers, placeholder */
--ink-100: #e6e6e6   /* subtle fills, hover backgrounds */
--paper:   #ffffff   /* base surface */

छह मान. यह संपूर्ण सिस्टम है, साथ ही डार्क मोड के लिए इसका व्युत्क्रम भी है। हम समीक्षा में जिस नियम को लागू करते हैं: कोई भी ऐसा ग्रे मौजूद नहीं हो सकता जो रैंप पर न हो। जैसे ही कोई व्यक्ति #8a8a8a पर नजर डालता है क्योंकि "बॉर्डर थोड़ा भारी लगता है," सिस्टम सड़ने लगता है। मूल्यों का एक बंद सेट एक मोनोक्रोम यूआई को गंदे समानता में बहने से रोकता है।

पाठ 4.5:1 को साफ़ करता है, संरचना 3:1 को साफ़ करता है

प्रत्येक टेक्स्ट-ऑन-सतह युग्मन को शिप करने से पहले WCAG कंट्रास्ट अनुपात के विरुद्ध जांचा जाता है। --paper पर --ink-500 5.7:1 के आसपास पहुँचता है, बॉडी टेक्स्ट के लिए 4.5:1 सीमा को आराम से पार कर जाता है। --ink-300 टेक्स्ट के रूप में विफल रहता है और इसलिए इसे केवल बॉर्डर और डिवाइडर के लिए अनुमति दी जाती है, जहां 3:1 गैर-टेक्स्ट सीमा लागू होती है। नियम को टोकन के अनुमत उपयोगों में एन्कोड करना, न कि केवल उसका मूल्य, जो इसे चिपकाता है।

अभिगम्यता लाभांश

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

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

आपको उच्च-कंट्रास्ट और जबरन-रंग समर्थन भी लगभग मुफ्त मिलता है, क्योंकि आपने कभी भी नाजुक ब्रांड पैलेट के साथ ब्राउज़र की स्वयं की पहुंच को ओवरराइड नहीं किया है।

बाधाएं निर्णयों को कैसे गति देती हैं

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

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

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

नियम आप कल अपना सकते हैं

यदि आप सबकुछ पुनर्निर्माण किए बिना इसे आज़माना चाहते हैं:

• अपना ग्रे रैंप बंद करें। पांच या छह मान चुनें, उन्हें नाम दें, और कोड समीक्षा में रैंप से बाहर की हर चीज़ पर प्रतिबंध लगाएं। यही एक नियम अधिकांश काम कर देता है.
• एक प्रकार का पैमाना बनाएं और केवल उसके चरणों का उपयोग करें। कोई मनमाना फ़ॉन्ट आकार नहीं। यदि आपको नए आकार की आवश्यकता बनी रहती है, तो पैमाना गलत है; पैमाने को ठीक करें, एकबारगी न जोड़ें।
• अनुमत उपयोगों को टोकन में एन्कोड करें। --ink-300 "केवल बॉर्डर" है, न कि केवल एक हेक्स मान। इसका दस्तावेजीकरण करें जहां इंजीनियर इसे पढ़ेंगे।
• दूसरे चैनल के लिए प्रत्येक अर्थ-असर संकेत का ऑडिट करें। यदि रंग हटाने से स्थिति अस्पष्ट हो जाएगी, तो आकार, लेबल या स्थिति तब तक जोड़ें जब तक ऐसा न हो जाए।
• व्हाट्सएप को एक घटक के रूप में मानें। नामित टोकन के बीच रिक्त स्थान दें और समीक्षा में उनका बचाव करें जैसे आप अन्यत्र रंगों का बचाव करते हैं।

समापन विचार

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