Navrhujte „od středu“!

Naučte se metodu, která vám pomůže s každodenním návrhem vizuálního designu. Navrhujte uživatelská rozhraní, která jsou neprůstřelná a vypadají profesionálně.

Navrhujte „od středu“!
Lukáš Augusta
UI/UX designér

Možná jste někdy při vizuálním návrhu bojovali s tím, že v něm něco „nesedělo“ a nevěděli jste co. Ukažme si pomůcku, která vám pomůže navrhovat UI kvalitně, sebevědomě a hlavně rychle.

Dozvíte se

  • Co je to přístup „Navrhuj od středu“.
  • Kdy a jak přístup používat.
  • Příklad, na kterém si ukážeme, jak přístup používat.

Představte si, že otevřete grafický editor. Začínáte s designem webu nebo aplikace. Po chvíli se do návrhu zamotáte. Klikáte tam a zpět. Přidáváte, mažete, upravujete. Měníte velikosti, odsazujete a doufáte, že trefíte to „správné“ řešení. Někdy se to podaří brzy, jindy to trvá i několik hodin.

Ukažme si techniku, která vám může pomoct dostat se ze slepé uličky. Říkejme ji NOS (Navrhuj Od Středu).

Přístup NOS (Navrhuj od středu)

Celé uživatelské rozhraní si rozeberte na ty nejmenší části. Začněte navrhovat nejprve základní prvky a postupně postupujte směrem ven přes složené komponenty. Zní to jednoduše a jasně, ale myslet na to během návrhu zas tak jednoduché není.

Web nebo aplikaci tvoří stránky nebo obrazovky. Každá stránka uživatelského rozhraní se zpravidla skládá z jednotlivých sekcí. Každá sekce obsahuje bloky ve kterých najdete menší a jednodušší komponenty. Když je kompletně rozeberete, zůstanou vám už jen základní prvky. Základní prvek je ta nejmenší jednotka, kterou si dokážete představit. Může to být grafický tvar nebo písmeno.

Někdo z vás možná slyšel o atomickém designu. Je to dost podobná záležitost. Atomický design řeší, jak je webová stránka poskládána. Je to metodologie, která popisuje strukturu webu od nejmenších částí (atomů) až po celé stránky. Hodně s tímto pojmem pracují vývojáři.

Přístup NOS je spíše způsob myšlení a postup při návrhu vizuálu webu nebo aplikace v grafickém editoru.

Jak používat NOS?

Myšlenka je jednoduchá. Vezměte do hledáčku 2 prvky a vůči sobě je porovnejte. Odmyslete si veškeré okolní prvky. Představte si, že v celém vesmíru existují jen tyto dva. Položte si otázky:

  • „Vypadají prvky jako pár dobře?“
  • Funguje mezi nimi vizuální rovnováha?
  • Co bych mohl/a zlepšit, aby tyto dva prvky vypadaly vůči sobě dobře?

Udělejte tyto 2 prvky perfektní nezávazně na zbytku designu. Až s nimi budete spokojeni, uzavřete je jako hotovou skupinu a vnímejte je jako jeden prvek.

Jeden dokonalý základní prvek porovnejte s druhým. Jak druhý pozměnit, aby jako pár vypadaly dobře? Doveďte je k dokonalosti.

A co dál? Vezměte tento nový prvek tj. skupinu (složenou ze dvou) a porovnejte ho s dalším. Opět jako dvojici.

Porovnejte nově vzniklou skupinu prvků s dalším okolním prvkem a postup opakujte dál a dál.

Takto postupujte až do doby, než projdete celé uživatelské rozhraní (bloky, sekce, stránky). „Probublejte“ pěkně odspodu až nahoru—od středu ven.

Kdy NOS používat?

1. Při revizi návrhu

Když máte navrženou stránku webu nebo aplikace, která je komplexní, je těžké „z nadhledu“ odhalit, které prvky vizuál kazí.

NOS vám s tím pomůže. Použijte tuto techniku kdykoliv, když se vám bude návrh zdát nepěkný. Prozkoumejte návrh od středu a najděte „chybné“ prvky. Zastavte se, nadechněte se a zanalyzujte prvek po prvku. Zapřemýšlejte, jak by se problémový prvek a jeho okolí dalo zlepšit.

2. Při nově zakládajícím návrhu

Přístup NOS mějte v hlavě ideálně od počátku návrhu. Kdykoliv ztratíte soustředění a začnete být s návrhem nespokojení, ihned si vzpomeňte na NOS. Je skvělým pomocníkem, který vás udrží na cestě za dokonalým designem.

Proč používat NOS?

Navrhováním „od středu“ dokážete tvořit návrhy, které vypadají dobře a jsou neprůstřelné. Dokážete snížit počet situací, kdy v návrhu něco „nesedí“. S technikou NOS zaručíte, že každý prvek bude vůči svému okolí ve vizuálním souladu. A tím pádem bude celý design v harmonii. Finální výstup se stane dokonalým.

Příklad použití techniky NOS

Nejlepší bude, když si ukážeme použití NOS na příkladu. Představte si, že se vám pod ruce dostane návrh webu, který zkrátka nevypadá dobře. Obsahuje chyby a působí neohrabaně. Vaším cílem je uhladit ho a vylepšit tak, aby vypadal profesionálně a bez chyb.

Prohlédněte si tento návrh. Je plný chyb, kterých si zpočátku třeba ani nevšimnete. Ukažme si, jak jednotlivé prvky vůči sobě navrhnout pomocí techniky NOS, abychom z návrhu udělali „prémiovku“.

„Rozházený“ návrh, který vyžaduje k dokonalosti několik úprav.

1/5 Hlavní navigace

Začněme postupně. Do hledáčku si vezměme navigační lištu. Co by šlo zlepšit? Jednotlivé prvky si dávejme do párůporovnávejme je vůči sobě.

a) Logo

Logo vs. pozadí lišty — Tenké tvary písmen nejsou vůči pozadí dostatečné kontrastní.

Logo vs. menu — Logo je oproti ostatním prvků vizuálně „lehké“. Není zaručena vizuální rovnováha.

Oba problémy vyřeší zvětšení loga.

b) Položky v menu

Písmeno vs. písmeno — Texty v položkách menu i v tlačítku jsou psané velkými písmeny, která jsou špatně čitelná, když jsou blízko u sebe. Zvětšete mezi nimi mezery a budou vypadat nejen lépe, ale zlepší se i jejich čitelnost.

Položka menu vs. položka menu — Jednotlivé položky menu jsou příliš blízko u sebe a nevzniká pro oči dostatečný prostor je oddělit. Zvětšete mezi nimi vzdálenost.

c) Tlačítko

Písmeno vs. písmeno — zvětšení mezer mezi písmeny řeší stejný problém jako u položek menu.

Zvětšení loga pomůže k jeho vizuálnímu vybalancování s ostatními prvky v navigaci. Zlepší se i jeho kontrast vůči pozadí. Větší mezery mezi položkami menu pomohou navzájem je od sebe odlišit. Zvětšení mezer mezi velkými písmeny v položkách menu a tlačítku zlepší čitelnost textů i vizuální výsledek.

2/5 Hlavní textová část

U textového obsahu hraje velkou roli prázdné místo.

a) Popisek „Tvůj průvodce“

Ikona vs. text — Oba prvky jsou vůči sobě příliš blízko. Zvětšete mezi nimi mezeru. Vizuálně tak prvky více oddělíte a zlepšíte mezi nimi vizuální rovnováhu.

b) Nadpis

Písmeno vs. písmeno — Velké nadpisy zabírají pořádný kus místa na obrazovce. V zorném poli zabírají hodně prostoru. Dovolit si můžete zmenšit mezery mezi písmeny. Nadpisy se stanou kompaktnější.

Řádek vs. řádek — Nejsou od sebe řádky textu příliš daleko? Zmenšete řádkování, zlepší se čitelnost a vizuálně se řádky spojí. Nebudou se vizuálně odpoutávat.

c) Odstavec textu

Písmeno vs. písmeno — V odstavci textu jsou písmena zbytečně daleko od sebe. Lehce zvětšené mezery komplikují čtení a snižují jednotnost bloku textu. Proto mezery mezi písmeny zmenšete.

U popisku zvětšete mezeru mezi ikonou a textem. U nadpisu zmenšete mezery mezi písmeny i řádky. U odstavce textu udělejte mezery mezi písmeny také menší.

3/5 Karta s obsahem

Práce s prázdným místem a spojení prvků v rámci informační hierarchie udělá svoje.

Piktogram/ikona vs. kruhové ohraničení — Ikona uvnitř kulatého ohraničení je docela blízko okrajům. Aby vynikla, je dobré ji zmenšit. Vzniknou kolem ní větší okraje. Celá ikona včetně pozadí bude více vybalancovaná a přitáhne více pozornosti.

Podnadpis vs. nadpis — Podnadpis „Nová místa“ se vztahuje k nadpisu a doplňuje jej. Informačně k sobě patří. Když přiblížíte podnadpis k nadpisu, vizuálně se připoutá a začne tvořit skupinu s nadpisem. A to nejen vizuální, ale i informační.

Řádek nadpisu vs. řádek nadpisu — Řádky nadpisu se vizuálně odpoutávají a působí jako samostatné jednotky. Připojte je k sobě, ať působí kompaktněji.

Písmeno nadpisu vs. písmeno nadpisu — To stejné jako u předchozích textů. Zmenšete mezery mezi písmeny pro lepší čitelnost a kompaktnost textu.

Obsahová část vs. tlačítko — Nakonec si za dvojici dosaďte skupinu obou textů a tlačítko. Ty se naopak musí oddělit, aby prvky působili, že k sobě nepatří. Zlepší se i vizuální rovnováha celé karty.

Zvětšete odsazení ikony v kruhovém ohraničení. Přibližte k sobě podnadpis a nadpis, aby společně tvořily skupinu. Upravte mezery mezi písmeny i řádky nadpisu. Skupinu textů a tlačítko oddělte větší mezerou a odpoutejte je od sebe.

4/5 Další obsahové karty

Aby obsah karet vyniknul a vypadal dobře, je potřeba upravit samotné prvky, jejich odsazení a velikost.

Text ve štítku vs. ohraničení — Do hledáčku si vezměte text, který je ve štítku a porovnejte ho s jeho ohraničením. Zvětšete levé a pravé odsazení štítku, které je v nepoměru s horním a spodním.

Popisek čísla vs. číslo — Dva prvky, které s sobě informačně patří, proto je přibližte.

Číslo vs. celá karta — Číselné hodnoty jsou důležitým údajem. Aby vynikly, udělejte je větší vůči samotné kartě i obsahu v ní.

Štítek vs. obsah — Upravte mezery mezi štítkem a zbylým obsahem tak, aby bylo jasné, že jsou to 2 oddělené skupiny.

Řádek nadpisu vs. řádek nadpisu — V nadpisech zmenšete mezery mezi řádky, aby se sjednotily do kompaktního bloku.

Ikona vs. ohraničení — Opět zmenšete ikonu v kruhovém ohraničení. Prázdný prostor na ikonu upozorní, vznikne kontrast a celá ikona se stane zajímavější.

Veškerý obsah vs. celá karta — Všechen obsah je příliš nalepený na okraje karty, proto zvětšete její vnitřní odsazení.

Upravte štítek, aby byl text vůči jeho ohraničení v harmonii. Přibližte popisek k číslu. Zvětšete číslo, udělejte ho kontrastnější vůči celé kartě. Štítek vizuálně oddělte od textového obsahu zvětšením mezery. Zmenšete řádkování u nadpisů. Zmenšete ikonu vůči jejímu kruhovému pozadí. Zvětšete vnitřní odsazení karty.

5/5 Skupina karet jako jeden celek

Upravte mezery jak mezi kartami samotnými, tak i mezi celou skupinou karet a levou částí s obsahem.

Karta horizontální vs. horizontální — Vezměte si do hledáčku pouze 2 menší karty. Levou a pravou. Vůči sobě je porovnejte. Jak vypadají nejlíp? Když jsou od sebe daleko nebo blízko? Mají působit, že k sobě patří? Pokud ano, přibližte je a vizuálně spojte.

Karta vertikální vs. vertikální — To stejné udělejte s horní a spodní kartou. Patří k sobě? Přibližte je. Pro konzistenci použijte stejně velkou mezeru jako mezi kartami na horizontální úrovni. Vznikne vám tak čtveřice stejně vzdálených karet.

Skupina malých karet vs. velká karta — Teď, když jste hotovi s vyladěním malých karet a vytvořili jste z nich jednu skupinu, porovnejte je vůči jedné velké kartě. Má velká karta působit, že patří k malým? Pokud ano, přibližte je k sobě a použijte stejně velkou mezeru jako mezi ostatními kartami.

Všechny karty vs. levý obsah sekce — S kartami na závěr naložte jako s jedním velkým celkem a zvažte, jak moc je ve vizuální rovnováze s levým obsahem. Zvolte vhodnou mezeru a obě části zarovnejte ideálně na sloupcovou mřížku (grid).

Navigační lišta vs. všechny karty — Dostatečně daleko umístěte karty od navigační lišty. Nesmí být na navigaci příliš natlačené ani moc vzdálené. Musí mezi nimi vzniknout rovnováha.

Mezi skupinou karet udělejte jednotné mezery. Skupinu karet umístěte dostatečně daleko od navigační lišty. Vhodně rozložte levou část sekce s textovým obsahem a pravou část s kartami. Obě části zarovnejte ideálně na určitý počet sloupců mřížky.

Hotovo a finální výsledek

Podívejte se, jak jsme postupnými kroky a vzájemným porovnáváním prvků došli k mnohem lepšímu vizuálnímu výsledku. Působí kompaktněji a atraktivněji. Více zaujme, snáze dokážete rozeznat jednotlivé prvky a zlepšila se i informační hierarchie.

Návrh sekce webu před a po úpravách, které jsme provedli přístupem „Od středu“.

Shrnutí

Přístup navrhování „od středu“ znamená, že se vůči sobě stavíte dva nejmenší a nejzákladnější prvky a snažíte se, aby vůči sobě byly ve vizuálním souladu. Jakmile jste hotoví, tuto skupinu „uzavíráte“ jako jeden prvek a porovnáváte ho s dalším okolním prvkem. A tak postupujete prvek po prvku směrem ven až do té doby, než projdete všechny prvky. Skončíte, až nebudete mít co porovnávat.

Mohlo by se vám líbit

→ Tady se připojte se k 500+ odběratelům lekcí. Přínosný a hodnotný obsah. Bez spamu. Odhlášení kdykoliv.

south

Cvičení

  1. Vezměte svůj aktuálně rozpracovaný návrh a přístup od středu (NOS) si vyzkoušejte. Podaří se vám nějaká místa zlepšit?
  2. Až budete začínat nový design, snažte se přístup použít hned od začátku. Snažte se porovnání dvou prvků nebo skupin udržet vždy při dalším kroku. Takto byste měli dosáhnout perfektního výsledku „na první dobrou“.

Autor lekce

Lukáš Augusta
UI/UX designér

Jsem web designér, UI/UX designér a tvůrce na volné noze působící v Česku. Navrhuji weby, e‑shopy, webové a mobilní aplikace.

✍️ Napište článek. A zlepšete povědomí o vašem jméně a značce

Chcete se stát autorem Designui? Nově můžete napsat článek i vy! Zjistěte, co můžete získat…

Mentoring pro UI designéry

Jak navrhnout web/appku, která vynikne?

Novinka
Vytvořte si web bez nutnosti kódovat

Vytvořte si web
bez nutnosti kódovat