Při návrhu vizuální stránky pracujeme většinou s barvami. Málokdo si uvědomuje, že práce s nimi nás brzdí a limituje. Zkuste jiný přístup. Pracujte nejprve s odstíny šedi a až později přimíchejte barvy.
Tento přístup začít navrhovat UI pouze v odstínech šedi nemusí být pro každého. Někomu může vyhovovat a někomu ne. Ne vždy je vhodné ho dodržovat, ale rozhodně stojí za to ho vyzkoušet.
Co to znamená začít navrhovat v černobílé?
V první řadě je dobré říct, že nejde o wireframe, který tvoří UX designér. Wireframe může být vzhledově škaredý, může být nakreslený rukou nebo vytvořen v jiném nástroji a hlavně slouží k tomu, abychom věděli, kde a jaké informace se budou v UI vyskytovat.
Návrhem v černobílé je myšlen plnohodnotný návrh UI s tím rozdílem, že nepracujete s barvami. Až na obrázky, loga či ikony používáte pouze čisté odstíny šedi. Hotový návrh nakonec už jen obarvíte.
Proč začít navrhovat v černobílé?
Navrhování v černobíle přináší několik benefitů:
Soustředíte se pouze na důležité věci
Když nepřemýšlíte nad tím, jaké barvy použijete, můžete se začít soustředit na věci, které jsou podstatnější. Dobrý návrh jde totiž udělat i bez barev.
Zrychlíte designový proces
Strašně moc si ulehčíte a zrychlíte celý designový proces, protože nemusíte přemýšlet nad samotnými barvami. Snížíte si dobu rozhodování a přemýšlení o tom, jaký barevný odstín pro daný prvek použijete. Vyhnete se boji o výběr toho pravého odstínu. V modelu RGB jste totiž schopni namíchat až 16 777 216 barev. Uff.
Nemusíte dokola dělat změny
Stalo se vám někdy, že jste při navrhování UI dostali pokyn od někoho nad vámi, že je potřeba udělat barevnou změnu? Místo toho, abyste se soustředili na návrh důležitých věcí jen neustále dokola přemícháváte barvy, což vás brzdí a trhá to váš designový proces. S černobílým přístupem se vám to nestane. Barvy si odladíte až poslední v řadě.
Na co se raději při návrhu v černobílé soustředit?
Myslete typografii
Soustřeďte se na výběr fontů. Jaké řezy použijete a jak budou jednotlivé texty velké. Jaké budou mít prostrkání písmen nebo řádkování? Více o typografii najdete v lekci Na typografii v UI nezáleží. Nebo ano?.
Pracujte s bílým prostorem
Více se soustřeďte, jaká odsazení uděláte mezi jednotlivými prvky. Prvky se nesmí ztrácet, musí být viditelné a musí mít kolem sebe dostatek místa.
Rozhodněte, které prvky jsou důležité
Určete, které informace a prvky na stránce jsou důležité, a zkuste je zvýraznit jinak než pomocí barvy. Změňte jejich velikost, tučnost nebo odsazení. Jednoduše musíte dosáhnout toho, aby důležité prvky byly v kontrastu s ostatními.
Někdy je potřeba barvy použít
Existují situace, kdy je možné barvy v černobílém návrhu použít. Jsou to případy, kdy barvy hrají zásadní roli. Například obrázky, loga nebo návrhy nějakých galerií nebo karet, které musí být na první pohled barevně odlišné.
Jak začít s černobílým návrhem?
1) Vytvořte si základní paletu neutrálních barev
Než začnete navrhovat, vytvořte si paletu o 5-10 neutrálních barvách (nejlépe čisté odstíny šedi). Za mě doporučuji 9 odstínů. Proč devět odstínů popisuji v lekci Jak si ulehčit navrhování UI aneb nastavte si mantinely.
Nepoužívejte žádnou jinou barvu kromě těchto. Pokud je podle vás odstínů málo a nějaký vám chybí, zkuste použít ten nejbližší z definované palety nebo ho případně do palety přidejte. Odstínů nesmí být moc, aby byla dodržena konzistence.
2) Důležité prvky na stránce nechte vyniknout
Průběžně si procházejte návrh. Plátno si přibližujte a oddalujte. Do očí vás musít vždy trknout nadpisy, tlačítka a další důležité prvky. Tyto prvky musí vynikat bez barev.
3) Přidejte barvy
Jakmile jste s návrhem spokojeni, je načase přimíchat barvy. Aby návrh byl co nejpřehlednější, doporučuji pracovat s dalšími 1-2 barvami. Obvykle to bývá barva primární a případně nějaká doplňková. Nepoužívejte pouze tyto dvě samotné barvy, ale celé palety s jejich odstíny. Vytvořte si paletu o 5-10 odstínech pro každou barvu. Jiné odstíny barev než v paletách nepoužívejte.
4) Změňte tón neutrálních barev
V návrhu budete pravděpodobně i nadále používat neutrální barvy (např. pro pozadí, texty, apod.). Tyto neutrální barvy mohou zůstat buď v čistých odstínech šedi, se kterými jste začali, nebo jim můžete přidat nějaký tón. Tón vyberte podle toho, jakou náladu má návrh vyvolávat. Může být např. ve studených barvách (do modra) nebo v teplých barvách (do červena). Málokdy se používá čistá stoprocentní černá.
Klientovi vysvětlete, co je to černobílý návrh
Pokud plánujete ukázat klientovi ke schválení černobílý návrh, je dobré mu na začátku vysvětlit, co to černobílý návrh je. Ujistěte se, že to chápe a vysvětlete mu, že po schválení obdrží ještě kompletní barevnou verzi.
Klient, který se v návrhu UI neorientuje, většinou totiž neví a nedokáže si barevný výsledek představit. Možná se mu bude zdát černobílý návrh neuspokojivý. Buďte na to připraveni a vyvraťte mu jeho obavy.
Důležitá je kvalita obsahu, struktura informací, a čitelnost UI
Barva je pouze obal. Důležitá je struktura a kvalita UI. Představte si, že vlastníte nadupané auto. Pokud z Fordu Mustanga oškrábete lak, bude to stále ten stejně našlápnutý stroj, který rozmete dálnice. Nic se na jeho výkonu nezmění. To, jestli je auto modré nebo červené, až tak nezáleží. Barvu si vybere až jeho majitel.
Stejné je to s uživatelským rozhraním. Musí být použitelné, přehledné a funkční. Do jakých barev UI pak vyladíte záleží na značce a cílové skupině.