14. diel - Konštrukčné systémy v UX - Atomický a vizuálny design

V minulej lekcii, Konštrukčné systémy v UX - Mobile First, Flat Design , sme sa dozvedeli o troch prístupoch, ako je možné pojať tvorbu užívateľských rozhraní - Mobile First s dôrazom na koncové zariadenie užívateľa a následne Flat Design a Material Design, ktoré berú do úvahy hlavne celkový jednoduchý a súdržný štýl.

V tejto lekcii budeme pokračovať v začatej téme konštrukčných systémov a ešte si vysvetlíme princíp Atomického designu a Vizuálneho designu.

Konštrukčné systémy pre stavbu užívateľských rozhraní

Ako sme si už vysvetlili v lekcii Konštrukčné systémy v UX - Mobile First, Flat Design, k tvorbe konštrukčných systémov pre používateľské rozhrania je možné pristupovať mnohými rôznymi smermi. Dnes sa pozrieme hľadáčikom vedných odborov, a to konkrétne cez chémiu a vizuálnu komunikáciu. Začnime tvorbou inšpirovanou chémiou častíc.

Atomický dizajn

Atomický dizajn je nová metodika na vytváranie efektívnych užívateľských rozhraní. Túto metodiku vytvoril dizajnér Brad Frost a vydal ju aj ako knihu (Atomic Design). Ide o úplne novú perspektívu, ako sa dá na tvorbu pozerať.

Princíp atomického dizajnu využíva analógiu chémie a tvorí sa takzvane od zdola nahor. V tomto princípe sa nezačína návrhom štruktúry webových stránok, ale ideme od návrhu tých najjednoduchších komponentov, ktoré symbolizujú najmenšie častice - atómy. Tieto atómy sú napríklad tlačidlá alebo položky menu. Ďalej postupuje návrh cez fázy molekúl, organizmov, šablón až k stránkam.

Atomický dizajn núti dizajnérov myslieť o svojich návrhoch úplne novým spôsobom. Základ tkvie v tom, že musíme určiť hierarchiu opakovane použiteľných komponentov – atómov. Táto hierarchia má päť fáz a každá fáza čerpá z tej predchádzajúcej. Výhodou je, že tento nový pohľad nám pomáha sústrediť s rovnakou mierou ako na celok, tak aj na detaily.

1. fáza - Atómy

Začíname tými najmenšími časťami, ktoré už ďalej nemožno ďalej rozdeliť. Je to väčšina základných elementov HTML akými sú napríklad tlačidlá, ale aj základné štýly CSS - fonty, farby, veľkosti atď.

Príkladom môže byť samotný nadpis článku v upútavke na novinovom serveri.

2. fáza - Molekuly

Molekula je tvorená skupinou atómov. V tejto fáze sa premýšľa o jednoduchších prvkoch, ktoré sú už viac ako z jedného HTML elementu.

V tejto väčšej skupine molekúl musí byť dokonalá súhra atómov, ktoré sa podporujú a dopĺňajú.

Príkladom môže byť celá upútavka na článok na novinovom serveri v bočnom paneli, ktorá obsahuje ako názov, tak obrázok a napríklad perex či vyhľadávací formulár.

3. fáza - Organizmy

Organizmus je zložený zo skupín molekúl. Ide o zložitejšie komponenty používateľského rozhrania. Organizmus môže byť tvorený rôznymi molekulami. Napríklad hlavička sa môže skladať z položiek menu, vyhľadávacieho poľa a loga. Je možné, aby sa niektorá molekula opakovala.

Ide napríklad o rôzne sekcie – hlavičky, päty, postranný panel atď.

4. fáza - Šablóny

Pomenovanie tejto fázy už nevychádza z chémie, pretože autor teórie pristupuje k zrozumiteľnejšiemu pomenovaniu pre klientov, aby lepšie rozumeli dizajnérom. Šablóny tvoria jednotlivé organizmy spolu s atómami aj molekulami.

Jedná sa zhruba o kostru webu, môžeme to pripodobniť aj k wireframu.

5. fáza - Stránky

Ide o poslednú fázu hierarchického atomického designu. Prázdne šablóny sa plnia skutočným obsahom.

Výsledkom je finálna podoba stránok.

Vizuálny design

Na tvorbu webu sa môžeme pozrieť aj formou komunikácie vizuálnym jazykom. Teda čo všetko naše oko vidí, ako mu obraz lahodí a ako ho môže vnímať a rozumieť mu. Každé oznamovanie informácií od niekoho niekomu je formou komunikácie a komunikácie ako taká môže byť aj pomocou zrakom rozlíšiteľných štruktúr. Väčšinou ide o formu komunikácie nepriame, k viacerým príjemcom. Jej podmienkou je zakódovanie oznámenia do nejakej prenositeľnej podoby. Vizuálny design je potom práve vytváranie určitých objektov, ktoré nám pomôžu preniesť oznámenie vizuálnou cestou.

Základné prvky vizuálneho designu

Klasická teória grafického dizajnu nám hovorí, že základné zrakom viditeľné štruktúry, z ktorých sú dvojrozmerné oznámenia tvorené, môžeme deliť na dva druhy:

• farby,
• tvary.

Tieto štruktúry sú základnými grafickými prvkami, aj keď ich oddelenie je prakticky nemysliteľné, pretože tam, kde je zobrazená nejaká farba, má určitý tvar a kde je tvar, je zobrazený určitou farbou.

Pokiaľ sa na tvary pozeráme pohľadom, ako nám môžu sprostredkovať význam, môžeme ich ďalej deliť na 2 druhy:

• Verbálne – do štruktúr, ktoré vnímame zrakom sú zabudované prvky jazyka. Tieto tvary sú znaky písma.
• Neverbálne – jedná sa o ostatné druhy tvarov, často označované ako obrázky. Ich interpretácia nie je taká priamočiara, ako je to pri písme.

Ako tretí doplňujúci druh by sa dali označiť tvary, ktorým spoločnosť na základe konvencií priradila určitý význam. Ich príkladom sú ikony a symboly.

Porozumenie vizuálnej komunikácii záleží na umiestnení prvkov do priestoru.

Princípy vizuálneho designu

Pre efektívne oznámenie je potrebné prvky do priestoru umiestňovať podľa pravidiel. Vďaka tomu získame logicky organizovaný celok, ktorý je príjemný a vyvážený.

• Váha – každý vizuálny prvok má svoju určitú vizuálnu váhu. Ak je naším cieľom rovnováha, musia byť v rovnováhe aj jednotlivé prvky v priestore. Na pochopenie rovnováhy si tieto prvky môžeme prirovnať k váhe fyzickej – ak na jednej strane máme vizuálne ťažšie prvky, priestor sa zdá vychýlený, ťahaný na ťažšiu stranu. Táto kompozícia potom budí nepríjemný pocit až napätia.
• Hierarchia – vizuálna hierarchia dokáže organizáciou priestoru odrážať vzájomné vzťahy. Tie nastolíme vďaka jednote či zvýrazneniu.
• Jednota – jednota nám poukazuje na logickú previazanosť prvkov. Prvky vizuálne pôsobiace ako jednotný celok spolu súvisia.
• Zvýraznenie – pomocou zvýraznenia dokáže vizuál pritiahnuť príjemcu oznámenia k tým najpodstatnejším častiam.

Pokiaľ si teóriu vizuálneho designu aplikujeme na webové stránky či aplikácie, vidíme, že oznámenie je na displeji zakódované pomocou zrakom rozlíšiteľných štruktúr. Tie vznikli spojením grafických prvkov do pochopiteľných celkov. Aby výsledný vizuál lahodil oku používateľa, musia sa v tomto princípe dodržiavať základné princípy vizuálneho dizajnu, ako je rovnováha, jednota a zvýraznenie.

Ideálna forma komunikácie vizuálneho designu je vyvážené zabudovanie verbálnych (písmo) a neverbálnych (grafika) prvkov do priestoru stránky či aplikácie. Teda inak povedané – optimálne uchopenie vizuálneho designu je štruktúrovaný text doplnený o obrázky a ďalšie grafické prvky.

Tento pohľad na konštrukciu používateľského rozhrania nám priniesol opäť ďalší uhol pohľadu, ako sa zamerať na tvorbu, pokiaľ je pre nás kľúčový vizuál a grafika.

Dnes sme teda uzavreli základné predstavenie možných prístupov k tvorbe používateľských rozhraní. Ako sme videli, využiteľných smerov je veľmi veľa a ich znalosť nám môže byť prospešná pri našich vlastných projektoch. Niektoré myšlienky sú široko aplikovateľné a kombinovateľné, iné zase požadujú dodržanie konkrétnych postupov. Skúsme si pri premýšľaní nad rôznymi projektmi vyskúšať rôzne systémy, nech nájdeme, čo nám vyhovuje najviac.

V nasledujúcom kvíze, Kvíz - Persony a základná analýza v UX, si vyskúšame nadobudnuté skúsenosti z predchádzajúcich lekcií.