सुरक्षित रूप से अपनाए जा सकने वाले visual design नियम

xguru · 2023-02-27T11:03:02+09:00

इन्हें हर हाल में मानना ज़रूरी नहीं है, लेकिन इन नियमों को ज्यों का त्यों लागू करना हमेशा ठीक रहता है शुद्ध काले/सफेद की बजाय काले और सफेद के करीब के रंगों का उपयोग करें शुद्ध black स्क्रीन पर अप्राकृतिक लग सकता है, और शुद्ध white बहुत ज्यादा चमकीला होता है #000000 और #FFFFFF की जगह #222222 और #F2F2F2 का उपयोग करें आगे black/white का उल्लेख होगा तो इन्हीं रंगों की बात होगी neutral रंगों में थोड़ा रंग मिलाएँ neutral रंग आम तौर पर black/white/gray होते हैं अगर रंग का उपयोग करें, तो neutral रंगों में बस थोड़ा सा रंग जोड़ें (grey की जगह light red, black की जगह dark blue) इससे color palette ज्यादा consistent महसूस होता है अगर HSB का उपयोग कर रहे हैं, तो लगभग 5% या उससे कम saturation जोड़ना काफी है महत्वपूर्ण elements के लिए high contrast का उपयोग करें वे सभी चीज़ें जिन पर user का ध्यान जाना चाहिए: button, content आदि divider, drop shadow जैसी चीज़ों में contrast को जितना हो सके कम रखें design का हर element सोच-समझकर होना चाहिए इसमें whitespace, alignment, size, spacing, color, shadow सब शामिल हैं अगर कोई design के किसी हिस्से के बारे में पूछे, तो आप बता सकें कि आपने ऐसा क्यों किया कई बार Optical (दृश्य) alignment, mathematical alignment से बेहतर होता है कुछ आकार ऐसे होते हैं जिन्हें आँख से aligned दिखाना ज्यादा बेहतर होता है आँख से alignment करना अभ्यास मांगता है, लेकिन नियमित रूप से करने पर इसे जल्दी पकड़ सकते हैं बड़े text में letter spacing और line height घटाएँ, छोटे text में बढ़ाएँ यह सभी text पर लागू होता है text जितना बड़ा होगा, अक्षरों और lines के बीच उतनी ही कम जगह चाहिए। छोटा text होने पर इसका उलटा container की border, container और background दोनों से contrast में होनी चाहिए border का रंग container के अंदरूनी हिस्से और background के बीच का नहीं, बल्कि background से ज्यादा गहरा होना चाहिए हर चीज़ किसी न किसी दूसरी चीज़ के साथ aligned होनी चाहिए alignment यह बताता है कि चीज़ें एक-दूसरे से संबंधित हैं अगर कोई चीज़ किसी और के साथ aligned नहीं है, तो वह design का हिस्सा नहीं लगती आदर्श रूप से हर element किसी न किसी logic के आधार पर दूसरे elements के साथ aligned होना चाहिए palette के हर रंग की अपनी अलग brightness value होनी चाहिए जब रंगों की brightness अलग होती है, तो सिर्फ hue ही नहीं बल्कि brightness से भी एक अलग look and feel मिलता है इससे बेहतर color palette बनता है क्योंकि रंग आपस में बहुत ज्यादा compete नहीं करते अगर neutral रंगों में tint जोड़ें, तो Warm या Cool में से सिर्फ एक ही चुनें, दोनों नहीं neutral रंगों में warm/cool रंग साथ मिलाने पर color palette consistent महसूस नहीं होता sizes गणितीय रूप से संबंधित होने चाहिए elements के बीच spacing या size जैसी चीज़ें किसी scale के आधार पर तय होनी चाहिए। इससे design consistent दिखता है उदाहरण में सभी elements को 8 के multiples में रखा गया है। spacing 8/16/24/32, line height 48/40/24, text size 40/32/16 elements को visual weight के क्रम में रखना चाहिए अगर किसी row या column में कई elements हों, और उनमें कुछ बाकी से visually ज्यादा भारी लगते हों (जैसे 2 buttons और 3 links), तो visually सबसे भारी element पहले आए और हल्के elements क्रम से बाद में आएँ ध्यान देने वाली बात यह है कि visually सबसे भारी element सबसे बाहरी तरफ होना चाहिए horizontal grid का उपयोग करें तो 12 columns रखें अगर layout को columns में बाँटते हैं, तो 12 columns होने पर 1, 2, 3, 4 column units का उपयोग किया जा सकता है, जिससे काफी flexibility मिलती है high contrast वाले बिंदुओं के बीच spacing रखें हमारी आँखें contrast के आधार पर elements की edges ढूँढती हैं, इसलिए contrasting points के बीच जगह होने की अपेक्षा करती हैं जो elements ज्यादा करीब महसूस हों, वे ज्यादा उजले होने चाहिए स्क्रीन पर जो elements user के ज्यादा करीब लगते हैं (यानी आगे की परत में), वे ज्यादा bright होने चाहिए यह light/dark mode दोनों पर लागू होता है, क्योंकि वास्तविक दुनिया भी ऐसे ही काम करती है drop shadow का blur value, distance value का दोगुना रखें अगर shadow को Y-axis में 4 pixel नीचे बढ़ाना है, तो blur value 8 pixel रखें जैसे-जैसे element देखने वाले के "करीब" आता है, shadow की opacity कम करना भी अच्छा होता है जटिल चीज़ के ऊपर सरल चीज़ रखें, या सरल चीज़ के ऊपर जटिल चीज़ रखें complex background (जैसे flashy gradient) पर foreground (text) तब सबसे अच्छा दिखता है जब वह simple हो अगर सामने की चीज़ complex हो, तो simple background सबसे उपयुक्त है simple के ऊपर simple भी संभव है, लेकिन वह फीका लग सकता है complex के ऊपर complex रखने से visual confusion होता है, इसलिए इससे बचें container colors को brightness limits के भीतर रखें background और container के बीच brightness का अंतर dark interface में 12% के भीतर और light interface में 7% के भीतर होना चाहिए (HSB color system की brightness value के आधार पर) यह लगभग 100 अच्छे से designed websites पर किए गए एक अध्ययन से निकला, जिसमें background की तुलना में containers की brightness देखी गई outer padding, inner padding के बराबर या उससे बड़ा रखें container का inner padding, container के अंदर elements के बीच की जगह है। outer padding, element और container के किनारे के बीच की जगह है outer padding, inner padding के बराबर या उससे बड़ा होना चाहिए body text को 16px या उससे ऊपर रखें 16px अधिकांश browsers में default text size है इससे छोटा text पढ़ना मुश्किल होता है, इसलिए body में इसका उपयोग न करना सुरक्षित है लगभग 70 characters की line length रखें line length 60 हो या 80, यह बहुत महत्वपूर्ण नहीं है, लेकिन किसी भी दिशा में बहुत दूर जाने पर readability की समस्या हो सकती है button की horizontal padding, vertical padding की दोगुनी रखें standard button pattern में चौड़ाई, ऊँचाई से ज्यादा होती है लोगों को वह button लगे, इसके लिए इस pattern का पालन करना अच्छा है अधिकतम 2 typefaces का उपयोग करें दूसरा typeface design के पीछे के concept को मजबूत करने का अवसर देता है यह design में variety जोड़ने में भी मदद करता है दो से ज्यादा की जरूरत लगभग कभी नहीं होती, और design visually confusing लग सकता है nested corners को सही तरह से संभालें कभी-कभी दो या उससे ज्यादा rounded corners एक-दूसरे के भीतर आते हैं उन्हें सही दिखाने के लिए inner corner radius को outer corner radius में से दोनों के बीच की दूरी घटाकर सेट करें उदाहरण) अगर outer corner radius 30px है, और inner corner उससे 20px दूर है, तो inner corner radius 10px रखें दो dividers को साथ-साथ न रखें background transition, container edge, और separator line को visually अलग पहचानना कठिन होता है दो या उससे ज्यादा dividers को एक-दूसरे से सटाकर न रखें

(anthonyhobday.com)

81 पॉइंट द्वारा xguru 2023-02-27 | 6 टिप्पणियां | WhatsApp पर शेयर करें

इन्हें हर हाल में मानना ज़रूरी नहीं है, लेकिन इन नियमों को ज्यों का त्यों लागू करना हमेशा ठीक रहता है

शुद्ध काले/सफेद की बजाय काले और सफेद के करीब के रंगों का उपयोग करें

शुद्ध black स्क्रीन पर अप्राकृतिक लग सकता है, और शुद्ध white बहुत ज्यादा चमकीला होता है
#000000 और #FFFFFF की जगह #222222 और #F2F2F2 का उपयोग करें
आगे black/white का उल्लेख होगा तो इन्हीं रंगों की बात होगी

neutral रंगों में थोड़ा रंग मिलाएँ

neutral रंग आम तौर पर black/white/gray होते हैं
अगर रंग का उपयोग करें, तो neutral रंगों में बस थोड़ा सा रंग जोड़ें (grey की जगह light red, black की जगह dark blue)
इससे color palette ज्यादा consistent महसूस होता है
अगर HSB का उपयोग कर रहे हैं, तो लगभग 5% या उससे कम saturation जोड़ना काफी है

महत्वपूर्ण elements के लिए high contrast का उपयोग करें

वे सभी चीज़ें जिन पर user का ध्यान जाना चाहिए: button, content आदि
divider, drop shadow जैसी चीज़ों में contrast को जितना हो सके कम रखें

design का हर element सोच-समझकर होना चाहिए

इसमें whitespace, alignment, size, spacing, color, shadow सब शामिल हैं
अगर कोई design के किसी हिस्से के बारे में पूछे, तो आप बता सकें कि आपने ऐसा क्यों किया

कई बार Optical (दृश्य) alignment, mathematical alignment से बेहतर होता है

कुछ आकार ऐसे होते हैं जिन्हें आँख से aligned दिखाना ज्यादा बेहतर होता है
आँख से alignment करना अभ्यास मांगता है, लेकिन नियमित रूप से करने पर इसे जल्दी पकड़ सकते हैं

बड़े text में letter spacing और line height घटाएँ, छोटे text में बढ़ाएँ

यह सभी text पर लागू होता है
text जितना बड़ा होगा, अक्षरों और lines के बीच उतनी ही कम जगह चाहिए। छोटा text होने पर इसका उलटा

container की border, container और background दोनों से contrast में होनी चाहिए

border का रंग container के अंदरूनी हिस्से और background के बीच का नहीं, बल्कि background से ज्यादा गहरा होना चाहिए

हर चीज़ किसी न किसी दूसरी चीज़ के साथ aligned होनी चाहिए

alignment यह बताता है कि चीज़ें एक-दूसरे से संबंधित हैं
अगर कोई चीज़ किसी और के साथ aligned नहीं है, तो वह design का हिस्सा नहीं लगती
आदर्श रूप से हर element किसी न किसी logic के आधार पर दूसरे elements के साथ aligned होना चाहिए

palette के हर रंग की अपनी अलग brightness value होनी चाहिए

जब रंगों की brightness अलग होती है, तो सिर्फ hue ही नहीं बल्कि brightness से भी एक अलग look and feel मिलता है
इससे बेहतर color palette बनता है क्योंकि रंग आपस में बहुत ज्यादा compete नहीं करते

अगर neutral रंगों में tint जोड़ें, तो Warm या Cool में से सिर्फ एक ही चुनें, दोनों नहीं

neutral रंगों में warm/cool रंग साथ मिलाने पर color palette consistent महसूस नहीं होता

sizes गणितीय रूप से संबंधित होने चाहिए

elements के बीच spacing या size जैसी चीज़ें किसी scale के आधार पर तय होनी चाहिए। इससे design consistent दिखता है
उदाहरण में सभी elements को 8 के multiples में रखा गया है। spacing 8/16/24/32, line height 48/40/24, text size 40/32/16

elements को visual weight के क्रम में रखना चाहिए

अगर किसी row या column में कई elements हों, और उनमें कुछ बाकी से visually ज्यादा भारी लगते हों (जैसे 2 buttons और 3 links),
तो visually सबसे भारी element पहले आए और हल्के elements क्रम से बाद में आएँ
ध्यान देने वाली बात यह है कि visually सबसे भारी element सबसे बाहरी तरफ होना चाहिए

horizontal grid का उपयोग करें तो 12 columns रखें

अगर layout को columns में बाँटते हैं, तो 12 columns होने पर 1, 2, 3, 4 column units का उपयोग किया जा सकता है, जिससे काफी flexibility मिलती है

high contrast वाले बिंदुओं के बीच spacing रखें

हमारी आँखें contrast के आधार पर elements की edges ढूँढती हैं, इसलिए contrasting points के बीच जगह होने की अपेक्षा करती हैं

जो elements ज्यादा करीब महसूस हों, वे ज्यादा उजले होने चाहिए

स्क्रीन पर जो elements user के ज्यादा करीब लगते हैं (यानी आगे की परत में), वे ज्यादा bright होने चाहिए
यह light/dark mode दोनों पर लागू होता है, क्योंकि वास्तविक दुनिया भी ऐसे ही काम करती है

drop shadow का blur value, distance value का दोगुना रखें

अगर shadow को Y-axis में 4 pixel नीचे बढ़ाना है, तो blur value 8 pixel रखें
जैसे-जैसे element देखने वाले के "करीब" आता है, shadow की opacity कम करना भी अच्छा होता है

जटिल चीज़ के ऊपर सरल चीज़ रखें, या सरल चीज़ के ऊपर जटिल चीज़ रखें

complex background (जैसे flashy gradient) पर foreground (text) तब सबसे अच्छा दिखता है जब वह simple हो
अगर सामने की चीज़ complex हो, तो simple background सबसे उपयुक्त है
simple के ऊपर simple भी संभव है, लेकिन वह फीका लग सकता है
complex के ऊपर complex रखने से visual confusion होता है, इसलिए इससे बचें

container colors को brightness limits के भीतर रखें

background और container के बीच brightness का अंतर dark interface में 12% के भीतर और light interface में 7% के भीतर होना चाहिए (HSB color system की brightness value के आधार पर)
यह लगभग 100 अच्छे से designed websites पर किए गए एक अध्ययन से निकला, जिसमें background की तुलना में containers की brightness देखी गई

outer padding, inner padding के बराबर या उससे बड़ा रखें

container का inner padding, container के अंदर elements के बीच की जगह है। outer padding, element और container के किनारे के बीच की जगह है
outer padding, inner padding के बराबर या उससे बड़ा होना चाहिए

body text को 16px या उससे ऊपर रखें

16px अधिकांश browsers में default text size है
इससे छोटा text पढ़ना मुश्किल होता है, इसलिए body में इसका उपयोग न करना सुरक्षित है

लगभग 70 characters की line length रखें

line length 60 हो या 80, यह बहुत महत्वपूर्ण नहीं है, लेकिन किसी भी दिशा में बहुत दूर जाने पर readability की समस्या हो सकती है

button की horizontal padding, vertical padding की दोगुनी रखें

standard button pattern में चौड़ाई, ऊँचाई से ज्यादा होती है
लोगों को वह button लगे, इसके लिए इस pattern का पालन करना अच्छा है

अधिकतम 2 typefaces का उपयोग करें

दूसरा typeface design के पीछे के concept को मजबूत करने का अवसर देता है
यह design में variety जोड़ने में भी मदद करता है
दो से ज्यादा की जरूरत लगभग कभी नहीं होती, और design visually confusing लग सकता है

nested corners को सही तरह से संभालें

कभी-कभी दो या उससे ज्यादा rounded corners एक-दूसरे के भीतर आते हैं
उन्हें सही दिखाने के लिए inner corner radius को outer corner radius में से दोनों के बीच की दूरी घटाकर सेट करें
उदाहरण) अगर outer corner radius 30px है, और inner corner उससे 20px दूर है, तो inner corner radius 10px रखें

दो dividers को साथ-साथ न रखें

background transition, container edge, और separator line को visually अलग पहचानना कठिन होता है
दो या उससे ज्यादा dividers को एक-दूसरे से सटाकर न रखें

6 टिप्पणियां

sungwoo 2023-03-08

@xguru
मैं GeekNews की पठनीयता के लिए इसे नीचे की तरह स्टाइल करके देख रहा हूँ. ;-)
https://userstyles.org/styles/179148#comments-section-wrapper

धन्यवाद.

metis041 2023-03-06

यह वाकई बहुत अच्छा है.. मुझे हमेशा डिज़ाइन को लेकर चिंता रहती थी, लेकिन ऐसी गाइड हो तो प्रोडक्टिविटी काफ़ी बढ़ सकती है

greenhead 2023-03-01

अनुवाद के लिए धन्यवाद! इससे बहुत मदद मिली।

laeyoung 2023-02-27

बहुत अच्छा है!

cbk1411 2023-02-27

@xguru
अनुवाद में एक गलती है, इसलिए बता रहा/रही हूँ
"एक-दूसरे के अधिक करीब वाले elements अधिक हल्के होने चाहिए" -> "एक-दूसरे के अधिक करीब वाले elements अधिक चमकीले होने चाहिए"

xguru 2023-02-27

आह, सही है, धन्यवाद~!