ഇപ്പോൾത്തെയും തിളക്കവും നിലനിർത്തിക്കൊണ്ട് കളർ-ബ്ലൈൻഡ് സൗഹൃദ പേജുകൾ ഡിസൈൻ ചെയ്യുന്നത്

ഇപ്പോൾത്തെയും തിളക്കവും നിലനിർത്തിക്കൊണ്ട് കളർ-ബ്ലൈൻഡ് സൗഹൃദ പേജുകൾ ഡിസൈൻ ചെയ്യുന്നത്

ജൂലൈ വരുമ്പോൾ പല ടീമുകളും അപ്രതീക്ഷിതമായി അവരുടെ സമ്മർ സെയിൽ പേജ്, ക്യാമ്പ് സൈൻഅപ്പ്, ഇവന്റ് ലാൻഡിംഗ് പേജ്, അല്ലെങ്കിൽ സ്കൂൾ തുടങ്ങുന്നതിന് മുന്നോടിയുള്ള പ്രമോ എല്ലാം പെട്ടെന്ന് ലൈവ് ആക്കേണ്ടതാണെന്ന്—അതും “ഇന്ന് തന്നെ” പോലെ—ഓർക്കുന്നു. ഡിസൈനറിന് ഒരു തിളക്കമുള്ള കളർ പാലറ്റ് ഉണ്ട്. മാർക്കറ്റർക്ക് അടിയന്തിരത വേണം. ബോസിന് ബട്ടൺ മുഴുവൻ നിലവിളിക്കണം. അതിനിടെ, സന്ദർശകരിൽ ഒരു നല്ല ഭാഗം ചുവപ്പ് നിറത്തിലുള്ള എഴുത്ത് പച്ച ബാഡ്ജിൽ നിന്ന് വായിക്കാൻ ശ്രമിക്കുകയോ, നിറം മാത്രം ആശ്രയിച്ച് “ഏറ്റവും മികച്ച മൂല്യം” ഏത് പ്ലാനാണെന്ന് കണ്ടെത്താൻ ശ്രമിക്കുകയോ ചെയ്യുന്നുണ്ടാകും.

കളർ-ബ്ലൈൻഡ് സൗഹൃദ ഡിസൈൻ എന്നത് എല്ലാം ചാരനിറമാക്കി ബോറടിപ്പിക്കുന്നതല്ല. ആക്സസിബിലിറ്റിയുമായി ബന്ധപ്പെട്ടുള്ള ഒരു സ്ഥിരം മിഥ്യയാണ് അത്. യാഥാർത്ഥ്യം: സന്ദേശം മുഴുവനായി നിറത്തിന്മേൽ മാത്രം ആശ്രയിക്കാതിരിക്കുകയാണ്; ടെക്സ്റ്റും പ്രധാന ആകൃതികളും യഥാർത്ഥ സ്ക്രീനുകളിൽ, ക്ഷീണിച്ച കണ്ണുകളിൽ, സൂര്യപ്രകാശത്തിൽ, നൈറ്റ് മോഡിൽ, വിലകുറഞ്ഞ മോണിറ്ററുകളിൽ, അതെ—സാധാരണ കണ്ടുവരുന്ന ചില കളർ വിഷൻ കുറവുകളിൽ പോലും നിലനിൽക്കുന്നത്ര കോൺട്രാസ്റ്റ് ഉറപ്പാക്കുകയാണ്.

ഇത് ചെയ്യാനുള്ള ഒരു പ്രായോഗിക മാർഗ്ഗം നോക്കാം—ഒരൊറ്റ പ്രത്യേക സാഹചര്യത്തെ ഉപയോഗിച്ച്: ചെറിയൊരു ബിസിനസ് സമ്മർ സെയിൽ ലാൻഡിംഗ് പേജ് തയ്യാറാക്കുന്നു; ഹീറോ ബാനർ, പ്രോഡക്റ്റ് കാർഡുകൾ, ഒരു ഡിസ്കൗണ്ട് ലേബൽ, കൂടാതെ ഒന്ന് പ്രധാനമായ കോൾ-ടു-ആക്ഷൻ ബട്ടൺ.

പാലറ്റ് തിരഞ്ഞെടുക്കുന്നതിന് മുമ്പേ സന്ദേശം തുടങ്ങുക

കളറുകൾ തിരഞ്ഞെടുക്കുന്നതിന് മുമ്പ്, പേജിന് എന്തൊക്കെ അറിയിക്കണം എന്ന് എഴുതിവയ്ക്കുക. ഡിസൈൻ ഭാഷയിൽ അല്ല. സാധാരണ വാക്കുകളിൽ.

ഞങ്ങളുടെ ഉദാഹരണത്തിൽ പേജ് പറയേണ്ടത്: സമ്മർ സെയിൽ, 25% ഓഫ്സ്, മൂന്ന് ഫീച്ചർ ചെയ്ത ഉൽപ്പന്നങ്ങൾ, അതിൽ ഒരു ഉൽപ്പന്നം ഏകദേശം തീർന്നിരിക്കുന്നു, സന്ദർശകൻ “Shop the sale” ക്ലിക്ക് ചെയ്യണം. ഇതാണ് ഡിസൈൻ ചെയ്യേണ്ട ജോലികൾ.

ഇത് പ്രധാനമാണ്, കാരണം നിറം പലപ്പോഴും ഒരു ഷോർട്ട്കട്ടായി ഒളിഞ്ഞുകയറുന്നു. ചുവപ്പ് മുന്നറിയിപ്പാണ്. പച്ച നല്ലതാണ്. നീലം ശാന്തമാണ്. മഞ്ഞ സെയിലാണ്. ശരി, പക്ഷേ സന്ദേശം ആരെങ്കിലും ആ പ്രത്യേക ഹ്യൂ കണ്ടാൽ മാത്രമാകുന്നുവെങ്കിൽ അത് നാശസാദ്ധ്യമാണ്. കളർ-ബ്ലൈൻഡ് വാങ്ങുന്നവർക്ക് ചുവപ്പ് ബാഡ്ജ് ചുവപ്പായി തോന്നാതിരിക്കാം; പച്ച “available” ലേബലും ഓറഞ്ച് “limited stock” ലേബലും സമാനമായ പശ്ചാത്തലങ്ങളിൽ ഇരിക്കുമ്പോൾ തമ്മിലുള്ള വ്യത്യാസം അവർ ശ്രദ്ധിക്കാതെ പോകാൻ സാധ്യതയുണ്ട്.

അതുകൊണ്ട് ആദ്യ പടി “accessible കളറുകൾ തിരഞ്ഞെടുക്കുക” എന്നതല്ല. “നിറമില്ലെങ്കിലും സന്ദേശം നിലനിൽക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കുക” എന്നതാണ്. ചെറിയ മാറ്റം, പക്ഷേ അത് മുഴുവൻ പേജ് മാറും.

ഒരു ചെറിയ walkthrough: സെയിൽ പ്രോഡക്റ്റ് കാർഡ് ശരിയാക്കുന്നത്

ഒരൊറ്റ പ്രോഡക്റ്റ് കാർഡിൽ മങ്ങിയ പച്ച പശ്ചാത്തലം ഉണ്ടെന്ന് കരുതുക. അതിൽ ചുവപ്പിൽ “Limited stock” എന്ന ലേബൽ. ഉൽപ്പന്നത്തിന്റെ പേര് ഡാർക്ക് ഗ്രേയിൽ. ഒരു വില. പിന്നെ “Add to cart” എന്ന് പറയുന്ന പച്ച ബട്ടൺ. ടീമിന് ഇത് ആഘോഷപരം പോലെ തോന്നും. പക്ഷേ ഇത് അപകടകരമാണ്.

1. സ്റ്റാറ്റസ് എഴുത്തായി വായിക്കാവുന്നവാക്കുക. “Limited stock” എന്ന വാക്കുകൾ ദൃശ്യമായി സൂക്ഷിക്കുക. അതിനെ ചുവന്ന ഡോട്ടിലോ ചുവന്ന ബോർഡറിലോ മാത്രം മാറ്റിസ്ഥാപിക്കരുത്. ഐക്കൺ ഉണ്ടെങ്കിൽ, അതിനെ ലേബലിനൊപ്പം കൂട്ടുക.
2. നിറത്തിന് പുറമെ മറ്റൊരു സൂചന ചേർക്കുക. “Limited stock” ലേബൽ ഒരു പിൽ ആകൃതിയിലാക്കി, ചെറിയ ക്ലോക്കോ അലർട്ട് ഐക്കണോ ചേർക്കുക, അല്ലെങ്കിൽ dashed outline ഉപയോഗിക്കുക. നിറം ലയിച്ചുപോകുന്നുവെങ്കിലും, ആ ഫോമിന്റെ രൂപം “ഇത് വ്യത്യസ്തമാണ്” എന്ന് പറയണം.
3. ടെക്സ്റ്റ്-പശ്ചാത്തലം കോൺട്രാസ്റ്റ് പരിശോധിക്കുക. ഉൽപ്പന്നത്തിന്റെ പേര്, വില, ബട്ടൺ ലേബൽ—എല്ലാം ശക്തമായ കോൺട്രാസ്റ്റ് ഉണ്ടാകണം. ചെറുതായ സെയിൽ ലേബലുകൾക്ക് കൂടുതൽ കരുതൽ വേണം; ചെറിയ ടെക്സ്റ്റ് വേഗത്തിൽ മങ്ങിക്കളയും.
4. ബട്ടൺ നിറം സ്റ്റാറ്റസ് നിറത്തിൽ നിന്ന് വേർതിരിക്കുക. പച്ച “available”ക്കും “ഇവിടെ ക്ലിക്ക് ചെയ്യൂ”ക്കും ഇരുവർക്കും അർത്ഥമാകുന്നുവെങ്കിൽ പേജ് കൂടുതൽ ശബ്ദമായി തോന്നും. ഒരു സ്ഥിരമായ ബട്ടൺ സ്റ്റൈൽ ഉപയോഗിച്ച്, വാക്കുകൾക്ക് ജോലി ചെയ്യാൻ വിട്ടുകൊടുക്കുക.
5. കാർഡ് ഗ്രേസ്കെയിലിൽ ടെസ്റ്റ് ചെയ്യുക. ഇത് വേഗത്തിലുള്ള റിയാലിറ്റി ചെക്ക് ആണ്. ലേബൽ, വില, ബട്ടൺ—നിറം നീക്കം ചെയ്താലും—ഒറ്റക്ക് വേർതിരിച്ച് തിരിച്ചറിയാൻ കഴിയുന്നുണ്ടെങ്കിൽ, ഡിസൈൻ ശരിയായ ദിശയിലാണ് എന്ന സാധ്യത കൂടുതലാണ്.

ഇത് ചെറിയ പരിഹാരമാണ്; റീഡിസൈൻ ആവശ്യമില്ല. കാർഡിന് ഇപ്പോഴും സൂര്യപ്രകാശം പോലെയും ബ്രാൻഡ് ഫീലും നിലനിർത്താം. ഒരുപാട് ജോലികൾ ഒരുമിച്ച് ചെയ്യാൻ നിറത്തോട് ആശ്രയിക്കുന്നത് മാത്രം നിർത്തുന്നു.

കോൺട്രാസ്റ്റ് ഒരു ഡിസൈൻ മെറ്റീരിയൽ പോലെ ഉപയോഗിക്കുക; കമ്പ്ലയൻസ് ജോലിയായി മാത്രം കാണരുത്

ആക്സസിബിൾ പേജുകൾ കട്ടിയുള്ളതും ആത്മവിശ്വാസമുള്ളതുമാകുന്നതും—അല്ലെങ്കിൽ കുഴപ്പമായി സൂപ്പായി മാറുന്നതും—കോൺട്രാസ്റ്റിലാണ്. കോൺട്രാസ്റ്റ് വെറും വെളുത്ത പശ്ചാത്തലത്തിൽ കറുത്ത ടെക്സ്റ്റ് മാത്രമല്ല. മുൻഭാഗവും പിന്നഭാഗവും തമ്മിലുള്ള ബന്ധമാണ്; ബട്ടൺ ടെക്സ്റ്റും ബട്ടൺ ഫിലും തമ്മിലുള്ള ബന്ധം; ലിങ്ക് ടെക്സ്റ്റും ബോഡി കോപ്പിയും തമ്മിലുള്ള വ്യത്യാസം; ഐക്കണുകളും അവയുടെ കണ്ടെയ്‌നറും; ഡിസേബിൾഡ് സ്റ്റേറ്റുകളും ആക്റ്റീവ് സ്റ്റേറ്റുകളും.

ഒരു ലളിതമായ റൂൾ ഓഫ് തമ്പ്: ക്ലിക്ക് ചെയ്യാൻ, വായിക്കാൻ, അല്ലെങ്കിൽ താരതമ്യം ചെയ്യാൻ അത്ര പ്രധാനമുള്ളതാണെങ്കിൽ, അത് മിഴുക്കാതെ തന്നെ—ഹ്യൂ മാത്രം ആശ്രയിക്കാതെ തന്നെ—സ്പഷ്ടമായിരിക്കണം. ഓർക്കേണ്ടത് ഇതാണ്.

സാധാരണ ബോഡി ടെക്സ്റ്റിനായി ഡിസൈനർമാർ സാധാരണ കുറഞ്ഞത് 4.5:1 എന്ന കോൺട്രാസ്റ്റ് റേഷിയോ ലക്ഷ്യമിടുന്നു. വലുതായ ടെക്സ്റ്റ് പലപ്പോഴും 3:1ൽ പ്രവർത്തിക്കാം; പക്ഷേ യഥാർത്ഥ ലോകത്തിലെ മങ്ങിയ സാഹചര്യങ്ങളിൽ കൂടുതൽ ശക്തമായത് നല്ലതാണ്. ബട്ടൺ ബോർഡറുകളും ഫോക്കസ് ഔട്ട്‌ലൈൻസുമൊക്കെയായ ഇന്റർഫേസ് ഘടകങ്ങൾ പോലും ശ്രദ്ധിക്കപ്പെടാൻ മതിയായ കോൺട്രാസ്റ്റ് വേണം. ഈ സംഖ്യകൾ മാജിക് മന്ത്രങ്ങളല്ല, പക്ഷേ പ്രത്യേകിച്ച് “പ്രീറ്റിയായെങ്കിലും ദുർബലമായ” ബ്രാൻഡ് കളറുകൾക്കൊപ്പം, ഉപകാരമുള്ള ഗാർഡ്‌റെയിൽസ് ആണിവ.

ഒരു പൊതുവായ കുടുക്കാണ് പാസ്റ്റൽ-ഓൺ-പാസ്റ്റൽ ഡിസൈൻ. മോക്കപ്പിൽ ഇത് വായുവിടുന്നതുപോലെ തോന്നും. പക്ഷേ ആരെങ്കിലും അത് പുറത്തു നിൽക്കുമ്പോൾ, അല്ലെങ്കിൽ ഫോണിൽ തുറന്ന് ബ്രൈറ്റ്നസ് കുറച്ച് ഉപയോഗിക്കുമ്പോൾ, പേജ് മുഴുവൻ അന്നേരം കുശിഞ്ഞുപോകും. ക്രീം ബാനറിലെ മങ്ങിയ മഞ്ഞ ടെക്സ്റ്റ്, വെളുപ്പ് ടെക്സ്റ്റുള്ള ലളിതമായ ടീൽ ബട്ടണുകൾ, വെളുത്ത കാർഡുകളിലെ മൃദുവായ പിങ്ക് ബാഡ്ജുകൾ—എല്ലാം മനോഹരമാണ്, പക്ഷേ വായിക്കാനാകില്ലെങ്കിൽ പ്രശ്നം.

ബ്രാൻഡ് കളറുകൾ നിലനിർത്തുക; അവയ്ക്ക് കൂടുതൽ നല്ല ജോലികൾ നൽകുക

ഒരു നിറത്തിന്റെ കോൺട്രാസ്റ്റ് കുറവാണെന്ന് കാരണം മുഴുവൻ ബ്രാൻഡ് പാലറ്റും ഉപേക്ഷിക്കേണ്ടതില്ല. സാധാരണയായി റോളുകൾ പുനഃനിയോഗിക്കാം. ദുർബലമായ മഞ്ഞ നിറം ടെക്സ്റ്റായി അല്ല, ഒരു ബാക്ക്‌ഗ്രൗണ്ട് വാഷായി പ്രവർത്തിക്കാം. തെളിഞ്ഞ ഓറഞ്ച് ഐക്കണുകൾക്കോ ആക്സെന്റുകൾക്കോ പ്രവർത്തിക്കാം; ബട്ടൺ ഫില്ലുകൾക്ക് ഡാർക്കർ ഓറഞ്ച് ഉപയോഗിക്കാം. ബ്രാൻഡ് ഗ്രീൻ ഇലസ്ട്രേഷനുകളിൽ തുടരാം; പക്ഷേ പ്രധാന വിജയ സന്ദേശത്തിന് ഡാർക്ക് ബോർഡറും ടെക്സ്റ്റ് ലേബലും ഐക്കണും കൂടി വേണം.

ലെയറുകളായി ചിന്തിക്കുക. ബാക്ക്‌ഗ്രൗണ്ട് കളറുകൾ മൃദുവായിരിക്കാം. ഡെക്കറേറ്റീവ് ഷേപ്പുകൾ കളിപ്പുള്ളതായിരിക്കാം. എന്നാൽ ഫംഗ്ഷണൽ കാര്യങ്ങൾക്ക് ബലം വേണം: ടെക്സ്റ്റ്, ലിങ്കുകൾ, ഫോം എററുകൾ, ആക്റ്റീവ് ടാബുകൾ, സെലക്ട് ചെയ്ത ഫിൽറ്ററുകൾ, പ്രൈമറി ബട്ടണുകൾ. സിസ്റ്റത്തിൽ ഉള്ളതിൽ ഈ ഘടകങ്ങൾക്ക് ഏറ്റവും വ്യക്തമായ കളറുകൾ നൽകുക.

ഫോക്കസ് സ്റ്റേറ്റുകൾ മറക്കരുത്. കീബോർഡ് ഉപയോക്താക്കൾക്ക് പേജിൽ അവർ എവിടെയാണെന്ന് കാണാൻ കഴിയണം. നീല ബട്ടണിൽ നീലത്തിൽ നിന്ന് വെറും അല്പം വ്യത്യാസമുള്ള ഫോക്കസ് റിംഗ്, അതുകൊണ്ടൊന്നും പോരാ. അത് ദൃശ്യമായിരിക്കണം. അതും നന്നായി കാണിക്കാനാകാം.

ആളുകൾക്ക് വേഗത്തിൽ താരതമ്യം ചെയ്യാൻ കഴിയുന്ന വിധത്തിൽ സ്റ്റേറ്റുകൾ ഡിസൈൻ ചെയ്യുക

ഒരു പേജിൽ സ്റ്റേറ്റുകൾ ഉള്ളപ്പോൾ—selected vs unselected, available vs sold out, error vs success, current step vs upcoming step—കൂടുതൽ ആക്സസിബിലിറ്റി പ്രശ്നങ്ങൾ വരുന്നു. ഈ സ്റ്റേറ്റുകൾ ചുവപ്പ്/പച്ച അല്ലെങ്കിൽ നീല/പർപ്പിൾ മാത്രമാണെങ്കിൽ, ചില ഉപയോക്താക്കൾക്ക് വ്യത്യാസം പിടികിട്ടാതെ പോകും.

സെയിൽ പേജിൽ, sold-out ആയ ഒരു ഉൽപ്പന്നത്തിന് ചാരനിറത്തിലുള്ള ഒരു ഇമേജ് ഓവർലേ മാത്രമാകരുത്. “Sold out” എന്ന വാക്കുകൾ ചേർക്കുക. ബട്ടൺ “Notify me” ആയി മാറ്റുക അല്ലെങ്കിൽ വ്യക്തമായ ലേബലോടെ ഡിസേബിൾ ചെയ്യുക. ഒരു ഡയഗണൽ പാറ്റേൺ ഉപയോഗിക്കാം അല്ലെങ്കിൽ ഇമേജിന്റെ ഒപാസിറ്റി കുറയ്ക്കാം—പക്ഷേ അതിൽ തന്നെ നിർത്തരുത്. സെയിൽ ടാഗുകളിലും ഇതുപോലെ തന്നെ. 25% ഡിസ്കൗണ്ടിന് വെറും ഒരു ചൂടൻ നിറമല്ല; ബോൾഡ് ലേബലും പൊസിഷനും കൂടി ഉണ്ടാകണം.

കമ്പിനേഷനുകൾ തിരഞ്ഞെടുക്കുമ്പോൾ വേഗത്തിലുള്ള ഒരു അധിക ചെക്ക് വേണമെങ്കിൽ, ഒരു color blindness contrast checker ചില കൂട്ടുകെട്ടുകൾ ഒരാളിന് നന്നായി തോന്നলেও മറ്റുള്ളവർക്ക് തകരാറാകുന്നത് കണ്ടെത്താൻ സഹായിക്കും.

കണ്ണടച്ച ക്ഷീണിച്ച ഒരു സന്ദർശകനെപ്പോലെ പേജിനെ നോക്കൂ

കളറുകൾ തിരഞ്ഞെടുക്കുന്നതിന് ശേഷം, പർഫെക്റ്റായ ഡിസൈൻ ഫയലിൽ നിന്ന് ഒരു പടി പിൻവാങ്ങുക. ഫോണിൽ പേജ് തുറന്ന് കാണുക. സ്ക്രീൻ ഡിം ചെയ്യുക. വേഗത്തിൽ സ്ക്രോൾ ചെയ്യുക. അല്പം മിഴിക്കുക—സത്യമായി. ആദ്യം എന്താണ് ശ്രദ്ധയിൽപ്പെടുന്നത്, എന്താണ് മറയുന്നത്, പ്രധാന പ്രവർത്തനം ഇപ്പോഴും വ്യക്തമാണോ എന്ന് ചോദിക്കുക.

സമ്മർ സെയിൽ ഉദാഹരണത്തിൽ, സന്ദർശകൻ പേജിൽ എത്തി ഓഫർ മനസ്സിലാക്കാൻ, പ്രോഡക്റ്റ് കാർഡുകൾ സ്കാൻ ചെയ്യാൻ, limited stock ശ്രദ്ധിക്കാൻ, നിങ്ങളുടെ പാലറ്റ് “ഡികോഡ്” ചെയ്യാതെ തന്നെ ഷോപ്പിംഗ് ബട്ടൺ കണ്ടെത്താൻ കഴിയണം. അവർക്ക് അത് ചെയ്യാൻ കഴിയുന്നുവെങ്കിൽ, പേജ് കളർ-ബ്ലൈൻഡ് ഉപയോക്താക്കൾക്ക് മാത്രം മെച്ചപ്പെട്ടതല്ല. പൂർണ്ണമായി ശ്രദ്ധിക്കാത്തവർ, ചിതറിപ്പോയവർ, തിരക്കുള്ളവർ, പുറത്തിറങ്ങി നിൽക്കുന്നവർ, പ്രായമാകുന്നതിന്റെ ഫലമായി കണ്ണുകൾ മങ്ങിയവർ, പഴയ ഉപകരണം ഉപയോഗിക്കുന്നവർ, അല്ലെങ്കിൽ പേജിന് മുഴുവൻ ശ്രദ്ധ കൊടുക്കാത്തവർ—എല്ലാവർക്കും മെച്ചമാണ്.

കളർ-ബ്ലൈൻഡ് സൗഹൃദ ഡിസൈനിലെ ഈ ശാന്തമായ വിജയമാണ് ഇതെല്ലാം. മൂലയിലെ ഒരു ചെറിയ അതിരുവശ കേസിനായി നിങ്ങൾ ഡിസൈൻ ചെയ്യുന്നതല്ല. നിങ്ങൾ ദൃശ്യഭാഷ കൂടുതൽ ഉറപ്പുള്ളതാക്കുകയാണ്. കുറവ് ഊഹങ്ങൾ. കുറവ് മറന്നുപോകുന്ന സൂചനകൾ. അതേ സമയം, തിളക്കമുള്ള സീസണൽ മനോഹരമായ ജോലികൾക്കുള്ള സ്ഥലം ഇപ്പോഴും ധാരാളം.