Začněte navrhovat UI v černobílé

Buďte efektivnější a naučte se soustředit při návrhu UI na důležité věci. Začněte navrhovat v černobílé a barvy použijte až nakonec.

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.

V lekci se dozvíte

  • Proč je výhodné začít navrhovat UI v odstínech šedi.
  • Jak docílit toho, aby návrh vypadal dobře i bez barev.
  • Jak postupovat při návrhu černobíleho UI.
Začít lekci
Doba čtení
4
min
Publikováno
3.5.2019
Upraveno
6.5.2019

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. 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 lekciNa 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 konstrastu 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é.

Převzato z Dribbble.com

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 lekciJak 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.

Převzato z Dribbble.com

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čli, 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áplý 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 rohraní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ě.

Cvičení

  1. 01 Cvičení

    Zkuste si váš příští návrh vytvořit pouze v černobíle. Vytvořte si paletu o pěti až deseti odstínech šedi a používejte pouze tyto barvy. Žádné jiné. Nakonec návrh obarvěte.

  2. 02 Cvičení

  3. 03 Cvičení