Principy dobrého designu
Proto aby služba nebo aplikace byla použitelná a uživatelům se s ní dobře pracovalo (byli schopni ji použít a používali ji rádi), je potřeba, aby měla dobrý design. Způsobů, jakými definovat, co je to dobrý design, je velké množství — jako příklad lze uvést 10 principů Dietera Ramse, který říká, že dobrý design:
• je inovativní
• činí produkt užitečným
• vypadá esteticky
• činí produkt srozumitelným
• je nenápadný
• je upřímný
• má dlouhé trvání
• je promyšlen do posledního detailu
• myslí na životní prostředí
• je minimální
Nebo 10 principů Jacoba Nielsena:
• viditelnost stavu systému
• shoda mezi systémem a reálným světem
• uživatelská kontrola a svoboda
• konzistence a standardy
• prevence chyb
• poznávání před vzpomínáním
• flexibilita a efektivita používání
• estetický a minimální design
• pomoc uživatelům s problémy/chybami
• pomoc a dokumentace
Z uvedených příkladů můžeme vidět, že principy jsou poučky/návody, které nám říkají, co dělat nebo nedělat, aby výsledný produkt byl co nejvíce efektivní. Jejich účelem je dát nám lepší porozumění toho, na co vše je potřeba si při designování dávat pozor. Určují, jak design vnímá uživatel a jaký z něj má prožitek.
Na tom kolik principů je, se málokdo shodne, a tak se můžeme setkat se vším mezi 5–12 principy. Obsahově se také liší — i v jejich pojetí (jestli se zabývají více funkčností nebo vzhledem). My se dnes podíváme na 12 principů zaměřených spíše na vzhled, jelikož je pro design stejně důležitý jako funkčnost.
12 principů designu
Mezi 12 základních principů, které se opakují nejčastěji, patří balanc, kontrast, poměr, důraz, hierarchie, repetice, rytmus, pattern, volný prostor, pohyb, rozmanitost a jednota.
1. balanc:
Každý objekt v digitálním světě má svoji „vizuální váhu“ — může být určena velikostí, barvou nebo texturou. Balanc určuje, jak jednotlivé elementy umístíme vedle sebe. Jeho pomocí můžeme dosáhnout toho, že uživatel vnímá design jako harmonický, místo aby v něm vyvolával chaos.
Balanc může být buď symetrický nebo asymetrický. U symetrického designu si uprostřed můžeme představit vertikální, popř. horizontální čáru, a objekt na obou stranách bude vypadat stejně. Balanc je tvořen tím, že objekty jsou rovnoměrně vyváženy.
Asymetrický design má na každé straně něco jiného — např. na jedné straně se může nacházet jeden velký objekt a na druhé straně tři malé. Tímto způsobem můžeme na konkrétní objekty klást větší důraz (větší objekt přitáhne víc pozornosti). Výsledný balanc je tvořen tím, že objekty na obou stranách mají jako celek stejnou váhu, tj. velikost objektu na jedné straně a objektů na straně druhé je stejná.
Setkat se můžeme ještě s tzv. radikálním designem. V něm se v centru designu nachází nějaký významný objekt a z něj vyzařují ostatní elementy. Tímto způsobem se dá designu dodat hloubka a pohyb.
2. důraz:
Když chceme, aby se uživatel jako první zaměřil na něco konkrétního, využijeme k tomu důraz. Necháme konkrétní objekt oproti ostatním vyniknout. Dodáme mu nějaký na první pohled rozlišitelný znak — dáme mu jinou velikost, váhu, pozici, barvu, tvar nebo styl.
3. repetice:
S repeticí se můžeme setkat u formátu textu, používání stejné barvy nebo obrázku. Je to způsob, jakým můžeme nějakou myšlenku více upevnit. Našemu designu zajišťuje kontinuitu, jednotnost, soudržnost, … Právě opakování vytváří identitu naší značky, odlišuje ji to od ostatních.
4. pohyb:
Pohyb označuje cestu, jakou uživatel prochází očima po stránce. Jakým způsobem přesunuje pozornost od jednoho objektu k druhému. V designu tuhle cestu můžeme zdůraznit pomocí linií, okrajů, tvarů, nebo barev — cesta by měla být naznačena pomocí jemných náznaků, neměla by uživatele rozptylovat.
5. poměr:
Poměr je vztah mezi dvěma a více elementy v designu vzhledem k jejich velikosti. Když chceme klást důraz na nějaký objekt, uděláme ho větší. Obvykle se s tím setkáváme třeba u nadpisů — očekáváme, že bude větší než zbytek textu. Když vybereme správnou velikost a jednotlivé prvky vhodně poskládáme, dodá to designu estetický vzhled.
6. volný prostor:
Volný prostor je místo, ve kterém nic není. Právě díky prázdným místům ostatní objekty vynikají. Dodává jim to pocit důležitosti a luxusu. V našem designu to vytváří hierarchii a organizaci. Pomáhá nám, aby design nebyl nepřehledný.
Volný prostor můžeme rozlišovat na mikro a makro. Mikro označuje malé mezery, např. mezi písmeny v textu. Makro označuje mezery větší jako jsou mezery mezi jednotlivými objekty.
7. kontrast:
Kontrast vnímáme jako rozdíl mezi dvěma a více elementy v odstínu (světlý x tmavý), tloušťce, velikosti apod. Kromě toho, že je to další ze způsobů, jak přitáhnout uživatelovu pozornost, je také důležitý z důvodu čitelnosti a přístupnosti. Pokud není mezi písmem a pozadím dostatečný kontrast, může se stát, že ho uživatelé nebudou schopni přečíst.
8. hierarchie:
Hierarchie řadí jednotlivé elementy na stránce podle důležitosti. Čím výš je daný objekt, tím více je důležitý. Design tím uživateli pomáhá se lépe orientovat, vnímat důležité prvky ve správném pořadí nebo nalézt informace.
V hierarchii můžeme rozlišovat F a Z pattern. Oba popisují, jakým způsobem přijímáme informace. Jestli jdeme jako podle písmena F a čteme jednotlivé odstavce zleva doprava. Nebo jdeme po vzoru písmene Z, kdy si prvně prohlídneme levý horní roh, poté pravý a pak jdeme níž.
9. rytmus:
Rytmus je určen tím, jak daleko od sebe jednotlivé prvky jsou. Nejde o to, že by se objekty doopravdy hýbaly, ale jejich kompozice by měla vyvolávat pocit akce a pohybu. Rytmus designu dodává opakování linií, tvarů, barev a dalších elementů — určuje flow.
Můžeme se setkat s různými druhy rytmu: náhodný, pravidelný, plynulý nebo progresivní (postupná změna nebo sled prvků, které se mění v řadě kroků).
10. pattern:
Pattern je opakování určitého elementu stále dokola za účelem dosáhnutí balance, organizace nebo kontrastu. Často se s ním můžeme setkat na pozadích webů nebo aplikací. Za pattern můžeme také považovat set standardů, které slouží k designování jednotlivých elementů.
11. rozmanitost:
Rozmanitost je důležitá proto, aby uživatele zaujala. Měla by v nich vzbudit zájem. Kdyby všechen design vypadal pořád stejně, pro uživatele by byl nudný. Rozmanitosti jsme schopni dosáhnout pomocí typografie, barev, obrázků, textur, …
12. jednota:
Jednota je způsob, jak všechno ve výsledku pracuje dohromady. Každý element je jasný (předává zprávu, kterou jsme chtěli předat) a stejně důležitý jako ostatní. Každý element má důvod, proč v designu je.
Rozlišujeme jednotu vizuální a konceptuální. U vizuální jednoty sledujeme, jestli všechny prvky k sobě ladí vizuálně. Jestli má všechno stejný styl nebo barvy a jestli je design soudržný. Konceptuální jednota zkoumá produkt/službu z uživatelského pohledu. Jestli je pro něj používání pohodlné a přirozené.
Závěrem
Když při designování použijeme předchozích 12 principů, nemůžeme šlápnout vedle. Design bude vypadat esteticky, bude použitelný a přístupný.
Seznam zdrojů:
CHAPMAN, Cameron. Breaking Down the Principles of Design (with Infographic). [cit. 2023–01–08] 2020. Dostupné z: https://www.toptal.com/designers/gui/principles-of-design-infographic
KEISTER, Ethan. The 7 Principles of Design. [cit. 2023–01–08] 2021. Dostupné z: https://zizzogroup.com/blog/7-principles-of-design/
LOEW, Ian. The 13 Principles of Design & How to Apply Them. [cit. 2023–01–08] 28. 4. 2021. Dostupné z: https://paperform.co/blog/principles-of-design/
Principles of design. Invision [online]. 2021 [cit. 2023–01–08]. Dostupné z: https://www.invisionapp.com/defined/principles-of-design
REID, Meg. The 7 principles of design and how to use them. [cit. 2023–01–08] 2022. Dostupné z: https://99designs.com/blog/tips/principles-of-design/#2
