Co je to grid (mřížka)? 10 výhod použití v UI/UX designu

Grid (česky mřížka) je pomyslná vizuální pomůcka, kterou při návrhu UI použijete jako vodítko pro váš designový proces. Jsou to pomyslné svislé čáry (nebo vodorovné), ke kterým zarovnáváte prvky UI a řídíte tak mezi nimi proporční vztahy.

Grid slouží jakou nástroj pro organizaci vizuálního prostoru. Pomocí něj opticky spojujete prvky. Zajišťuje, aby všechny texty a grafické prvky fungovaly jako celek. Funkcí mřížky je pomoct vám lépe vyřešit vizuální a organizační problémy mnohem rychleji, efektivněji a sebevědoměji.

Grid je oporou pro obsah uživatelského rozhraní. Je jako kostra člověka, která drží svaly a orgány (texty a grafické prvky).

Představte si grid jako linky v sešitě. Text píšete na vodorovné linky a držíte díky nim rytmus. Víte, kde začít další větu. Když chcete udělat mezi texty mezeru, přeskočíte linku. Linky vám pomáhají držet řád. Na základní škole vás dokonce nutili na každou stránku narýsovat svislou okrajovou linku. Ano, vaše paní učitelka nechtěla, abyste přetahovali okraje. Chtěla, abyste dodržovali vyhrazený prostor. Nastavila vám pravidla pro lepší umisťování textů, aby vypadaly lépe a aby celý sešit vypadal jednotněji. U gridu je to podobné.

Proč je důležité použít grid a jaké výhody přináší?

1—Nastolení systému, hranic a pravidel

Správným navržením a použitím gridu si definujete pravidla pro návrh UI. Každá obrazovka webu nebo aplikace má jasně definováno, kde začíná a končí obsah a kam ho můžete umisťovat. Grid vám řekne, kde se můžete jako designér pohybovat, kam můžete umisťovat prvky a jaké vzdálenosti mezi nimi dodržovat.

Grid udává směr a hranice a snižuje počet možných řešení, díky čemuž se rozhodujete mnohem rychleji. Jsou to mantinely, které vás drží na cestě, po které jedete. Zavádíte tak systém a návrh webu nebo aplikace se stává mnohem jednodušší.

Podobně ke své tvorbě přistupují třeba básnici, když si předem definují styl psaní, rytmus nebo typ použitých veršů. Mají jasně definovaná pravidla, která drží jejích kreativitu na uzdě. Mějte systém a nastavte si omezení, která vás udrží v kolejích.

2—Snadné vyřešení všech designových problémů

Pomocí gridu snadněji vyřešíte jakýkoliv designový problém, ať už z pohledu funkce, logiky, organizace obsahu nebo estetického cítění.

V momentě, kdy si s něčím lámete hlavu, stačí k návrhu přistoupit strategicky a opřít se o grid. Pomůže vám a poradí, jak prvky udělat velké, jak je řadit a kam je umístit. Snadněji je seskupíte nebo naopak oddělíte.

Je dokázáno, že nadpisy, podnadpisy nebo grafické prvky, které jsou zarovnané do gridu a mají logiku, uživatel dokáže přečíst a zpracovat rychleji. Informacím snadněji porozumí jim a snáž uloží do paměti.

3—Snadnější vizuální organizace obsahu

Grid vám pomáhá s vizuální organizaci prvků v UI. Usnadňuje vám přidávat nebo odebírat nové prvky více systematicky, logicky a hlavně rychleji. Prvky můžete v gridu snadno zarovnávat. Můžete určovat jejich prioritu. Přesně víte, kam je umístit, aby celý návrh vypadal hezky a opticky provázaně. Lépe odhadnete práci s prázdným místem. Výstupem je precizní, seřazené a jasné rozložení.

4—Celý design je pro oči krásnější

Uživatelská rozhraní navržená na vhodném gridu jsou vnímána jako více estetické. Jsou úhlednější a urovnanější. Lépe vedou divákovo oko a mají rytmus. Pomocí gridu můžete prvky jednoduše vizuálně propojovat, což pomáhá jak k dosažení daných cílů, tak i k dosažení vizuální rovnováhy.

5—Všechny stránky UI jsou jednotnější

Návrh všech stránek se díky gridu stává ucelenější. Uživatelé zvládnou při procházení stránek UI předvídat, kde mají očekávat další obsah. Ví, kde a jak se mohou pohybovat. Díky podobnostem v rozložení vnímají prvky zřetelněji a lépe je rozpoznávají.

Pokud uživatelé prochází více stran webu nebo aplikace, po přesměrování na další stranu UI se rychleji zorientují. Rozložení stránky je nerozhodí, protože vypadá podobně, jako u předchozích stránek.

6—Rychlejší, efektivnější a méně nákladnější práce

Když navrhujete s gridem, snadno odhadnete, kam prvky umístit a zarovnat. Nemusíte bojovat a posouvat prvky po náhodně velkých posunech. Možnosti znáte předem. Stáváte se rychlejší a efektivnější.

Podíváte-li se na to z ekonomického hlediska, stejnou práci s gridem uděláte za zlomek času, než kdybyste jej nepoužili. Navrhujete za kratší čas. A to se vyplatí i finančně. Váš čas je totiž drahý a vážíte si ho nejen vy, ale i zadavatel projektu.

7—Snižujete chybovost při návrhu

Pokud použijete grid, snížíte riziko udělat vizuální nebo jinou chybu. Můžete pracovat rychleji a sebejistěji.

Při navrhování v grafickém editoru můžete snáž prvky zarovnávat, protože můžete využít „přichytávání“ prvků k čarám gridu.

Nejde ale jen o chybovost při samotném návrhu. Jde i o chybovost v rámci řešení samotných designových problémů. Snížíte chybovost logických, funkčních a organizačních rozhodnutí. Grid vám pomůže udělat prvky správně velké a umístit je na správná místa tak, abyste dosáhli požadovaných cílů a správné hierarchie informací.

8—Usnadníte práci vývojářům

Vývojáři jsou s gridem zvyklí pracovat. Sice mu často nerozumí, pouze ho přebírají, ale tak nějak tuší, k čemu je. Grid jim pomáhá v technické realizaci. Jsou schopni mnohem rychleji zhotovit jednotlivé sekce UI.

Často se stává, že návrh některých stran UI připadá přímo na vývojáře. Nastane-li taková situace a dodrží-li přednastavený grid, sníží riziko, že udělá chybu v rozložení stránky a prvků.

9—Lepší přenositelnost designu mezi autory

Může nastat situace, kdy pracujete na návrhu UI. Z určitého důvodu nebudete moci projekt dokončit vy, ale bude ho muset převzít váš kolega. Představte si, že byste nepoužili grid a on by pokračoval ve vašem návrhu. Myslíte, že by pokračoval v podobném duchu? Možná. Ale to riziko, že se odchýlí, je velké. Když mu nastavíte grid, určíte mu i pravidla a pomůžete mu dosáhnout podobného výsledku. Lépe se zorientuje a pochopí souvislosti zamýšleného designu.

10—Lepší argumentace pro zadavatele projektu

Představte si zadavatele, pro kterého tvoříte projekt. Najednou vám začne radit, abyste určitý prvek UI přesunuli někam jinam a nebo jej zvětšili. Znáte to? To neustálé dohadování? Vy ale víte, že změny nemůžete provést. Porušili byste totiž systém, řád a vizuální směr.

Pokud použijete grid, máte jak pro sebe, tak pro zadavatele jasné argumenty, proč jste prvky v UI zarovnali právě takto, proč jste je udělali takto velké a proč nemůžete udělat změny, které si přeje.

Typ gridu (mřížky) na webu a mobilních aplikacích

Při návrhu webů nebo mobilních aplikací dává smysl použít sloupcový grid. To protože uživatelským rozhraním skrolujeme a má svislý ráz. Sloupcový grid se skládá ze sloupců a žlábků. Nejčastěji designéři pracují se 12 sloupci, protože se s nimi nejlépe a univerzálně pracuje. Počet 12 je dělitelný 2, 3 i 4, což se hodí při dělení prostoru na části. Použití 12ti sloupcového gridu není podmínkou. Sloupců si zvolíte tolik, kolik potřebujete přesně pro plánovaný obsah. A je úplně jedno, kolik to je. Striktní pravidla neexistují.

Grid se nepřebírá, ale navrhuje podle typografie a plánovaného obsahu

Občas designéři přebírají nastavení sloupcového gridu. Designér se podívá, jaké velikosti sloupců a žlábků používají ostatní designéři, design systémy nebo vývojové frameworky. To je ale špatně. Hodnoty se vybírají podle zvolené typografie a plánovaného obsahu. Zjednodušený postup je následovný:

• Zamyslíte se nad typem obsahu. Jde o web? Aplikaci? E-shop? Blog? Informační systém? Podle toho usoudíte, kolik sloupců použijte, abyste obsah snadno usazovali. Čím komplexnější obsah, tím více sloupců zvolíte (větší flexibilita). Naopak čím jednodušší rozložení, tím méně sloupců si rozhraní žádá.
• Rozhodnete se pro maximální šířku gridu, na kterém bude zobrazovat obsah (kontejner).
• Vyberete písmo.
• Vytvoříte typografickou stupnici a určíte velikosti a další vlastnosti textových stylů.
• Vyzkoušíte různé šířky textových bloků a zkusíte je usadit na grid. Hledáte ideální šířku odstavce běžného textu. Podle toho zvolíte šířky sloupců a žlábků gridu.

Pamatujte si, že grid byste měli pro návrh webu nebo aplikace použít vždy. Jen tak dosáhnete profesionálního výsledku a na oko skvěle vypadajícího výsledku.