Lekce 14 - Konstrukční systémy v UX - Atomický a vizuální design
V minulé lekci, Konstrukční systémy v UX - Mobile First, Flat Design , jsme se dozvěděli o třech přístupech, jak je možné pojmout tvorbu uživatelských rozhraní – Mobile First s důrazem na koncové zařízení uživatele a následně Flat Design a Material Design, které berou v potaz hlavně celkový jednoduchý a soudržný styl.
V této lekci budeme pokračovat v započatém tématu konstrukčních systémů a ještě si vysvětlíme princip Atomického designu a Vizuálního designu.
Konstrukční systémy pro stavbu uživatelských rozhraní
Jak jsme si již vysvětlili v lekci Konstrukční systémy v UX - Mobile First, Flat Design, k tvorbě konstrukčních systému pro uživatelská rozhraní lze přistupovat mnoha různými směry. Dnes se podíváme hledáčkem vědních oborů, a to konkrétně skrze chemii a vizuální komunikaci. Začněme tvorbou inspirovanou chemií částic.
Atomický design
Atomický design je nová metodika pro vytváření efektivních uživatelských rozhraní. Tuto metodiku vytvořil designér Brad Frost a vydal ji také jako knihu (Atomic Design). Jde o úplně novou perspektivu, jak se dá na tvorbu dívat.
Princip atomického designu využívá analogie chemie a tvoří se takzvaně od zdola nahoru. V tomto principu se nezačíná návrhem struktury webových stránek, ale jdeme od návrhu těch nejjednodušších komponentů, které symbolizují nejmenší částice - atomy. Tyto atomy jsou například tlačítka nebo položky menu. Dále postupuje návrh skrze fáze molekul, organismů, šablon až ke stránkám.
Atomický design nutí designéry myslet o svých návrzích úplně novým způsobem. Základ tkví v tom, že musíme určit hierarchii opakovaně použitelných komponent – atomů. Tato hierarchie má pět fází a každá fáze čerpá z té předchozí. Výhodou je, že tento nový pohled nám pomáhá soustředit se stejnou měrou jak na celek, tak na detaily.
1. fáze - Atomy
Začínáme těmi nejmenšími částmi, které již dále nelze dál rozdělit. Je to většina základních elementů HTML jakými jsou například tlačítka, ale i základní styly CSS – fonty, barvy, velikosti atd.
Příkladem může být samotný nadpis článku v upoutávce na novinovém serveru.
2. fáze - Molekuly
Molekula je tvořena skupinou atomů. V této fázi se přemýšlí o jednodušších prvcích, které jsou již více než z jednoho HTML elementu.
V této větší skupině molekul musí být dokonalá souhra atomů, které se podporují a doplňují.
Příkladem může být celá upoutávka na článek na novinovém serveru v postranním panelu, která obsahuje jak název, tak obrázek a například perex či vyhledávací formulář.
3. fáze - Organismy
Organismus je složen ze skupin molekul. Jde o složitější komponenty uživatelského rozhraní. Organismus může být tvořen různými molekulami. Například záhlaví se může skládat z položek menu, vyhledávacího pole a loga. Je možné, aby se některá molekula opakovala.
Jedná se například o různé sekce – záhlaví, zápatí, postranní panel atd.
4. fáze - Šablony
Pojmenování této fáze již nevychází z chemie, jelikož autor teorie přistupuje ke srozumitelnějšímu pojmenování pro klienty, aby lépe rozuměli designérům. Šablony tvoří jednotlivé organismy spolu s atomy i molekulami.
Jedná se zhruba o kostru webu, můžeme to připodobnit i k wireframu.
5. fáze - Stránky
Jde o poslední fázi hierarchického atomického designu. Prázdné šablony se plní skutečným obsahem.
Výsledkem je finální podoba stránek.
Vizuální design
Na tvorbu webu se můžeme podívat i formou komunikace vizuálním jazykem. Tedy co vše naše oko vidí, jak mu obraz lahodí a jak ho může vnímat a rozumět mu. Každé sdělování informací od někoho někomu je formou komunikace a komunikace jako taková může být i pomocí zrakem rozlišitelných struktur. Většinou jde o formu komunikace nepřímé, k více příjemcům. Její podmínkou je zakódovaní sdělení do nějaké přenositelné podoby. Vizuální design je pak právě vytváření určitých objektů, které nám pomohou přenést sdělení vizuální cestou.
Základní prvky vizuálního designu
Klasická teorie grafického designu nám říká, že základní zrakem viditelné struktury, z nichž jsou dvojrozměrné sdělení tvořena, můžeme dělit na dva druhy:
- barvy,
- tvary.
Tyto struktury jsou základními grafickými prvky, i když jejich oddělení je prakticky nemyslitelné, protože tam, kde je zobrazena nějaká barva, má určitý tvar a kde je tvar, je zobrazen určitou barvou.
Pokud se na tvary díváme pohledem, jak nám mohou zprostředkovat význam, můžeme je dále dělit na 2 druhy:
- Verbální – do struktur, které vnímáme zrakem jsou zabudovány prvky jazyka. Tyto tvary jsou znaky písma.
- Neverbální – jedná se o ostatní druhy tvarů, často označované jako obrázky. Jejich interpretace není tak přímočará, jako je tomu u písma.
Jako třetí doplňující druh by se daly označit tvary, kterým společnost na základě konvencí přiřadila určitý význam. Jejich příkladem jsou ikony a symboly.
Porozumění vizuální komunikaci záleží na umístění prvků do prostoru.
Principy vizuálního designu
Pro efektivní sdělení je třeba prvky do prostoru umisťovat podle pravidel. Díky tomu získáme logicky organizovaný celek, který je příjemný a vyvážený.
- Váha - každý vizuální prvek má svoji určitou vizuální váhu. Pokud je naším cílem rovnováha, musí být v rovnováze i jednotlivé prvky v prostoru. Pro pochopení rovnováhy si tyto prvky můžeme přirovnat k váze fyzické – pokud na jedné straně máme vizuálně těžší prvky, prostor se zdá vychýlený, tažený na těžší stranu. Tato kompozice pak budí nepříjemný pocit až napětí.
- Hierarchie - vizuální hierarchie dokáže organizací prostoru odrážet vzájemné vztahy. Ty nastolíme díky jednotě či zvýraznění.
- Jednota – jednota nám poukazuje na logickou provázanost prvků. Prvky vizuálně působící jako jednotný celek spolu souvisí.
- Zvýraznění – pomocí zvýraznění dokáže vizuál přitáhnout příjemce sdělení k těm nejpodstatnějším částem.
Pokud si teorii vizuálního designu aplikujeme na webové stránky či aplikace, vidíme, že sdělení je na displeji zakódované pomocí zrakem rozlišitelných struktur. Ty vznikly spojením grafických prvků do pochopitelných celků. Aby výsledný vizuál lahodil oku uživatele, musí se v tomto principu dodržovat základní principy vizuálního designu, jako je rovnováha, jednota a zvýraznění.
Ideální forma komunikace vizuálního designu je vyvážené zabudování verbálních (písmo) a neverbálních (grafika) prvků do prostoru stránky či aplikace. Tedy jinak řečeno – optimální uchopení vizuálního designu je strukturovaný text doplněný o obrázky a další grafické prvky.
Tento pohled na konstrukci uživatelského rozhraní nám přinesl opět další úhel pohledu, jak se zaměřit na tvorbu, pokud je pro nás stěžejní vizuál a grafika.
Dnes jsme tedy uzavřeli základní představení možných přístupů k tvorbě uživatelských rozhraní. Jak jsme viděli, využitelných směrů je velmi mnoho a jejich znalost nám může být prospěšná u našich vlastních projektů. Některé myšlenky jsou široce aplikovatelné a kombinovatelné, jiné zase požadují dodržení konkrétních postupů. Zkusme si při přemýšlení nad různými projekty vyzkoušet různé systémy, ať najdeme, co nám vyhovuje nejvíce.
V následujícím kvízu, Kvíz - Konstrukční systémy v UX, si vyzkoušíme nabyté zkušenosti z předchozích lekcí.
