Vizuální design systém

Nehledě na to, jaký používáte builder, šablonu, nebo framework, princip Design systemu se vám bude hodit téměř vždy (nebo jeho část) a je aplikovatelný všude, dokonce i ve Figmě.

Pozn: “Design system” je můj vlastní terminus technicus (pokud máte lepší název, sem sním :-)). Design system používám na mnoha webech (hlavně těch velkých) a hodně mi usnadňuje život. A čím je web větší, tím jsem radši, že jsem na něm strávila čas. A co to vlastně je?

Co je Design system?

Je to takové “globální nastavení” webu. Ale nenechte se zmýlit – není to jen nastavení barev, nebo fontů, ale kompletní nastavení webu, jeho prvků, naformátování komponent na jedno místa… Díky tomu pak tak vznikne celé nastavení všeho pro konkrétní web, odkud můžete jednotlivé prvky Ctrl+C / Ctrl+V přepoužívat. A pokud budete u její přípravy důslední (responzivita, detaily a všechno), ulehčí vám to hodně práce.

Nehledě na to, jaký používáte builder, šablonu, nebo framework, tenhle Design system se vám bude hodit téměř vždy (nebo jeho část).

Z čeho se skládá Design system?

Design systém, jak si ho připravuji na webech, se skládá ze 3+1 věcí:

globální nastavení webu + globální pravidla stylů + knihovna naformátovaných komponent na jedné stránce (+ responzivita)

1. Globální nastavení

Myšlenka tkví v tom maximálně využít globální nastavení nástroje, které máte k dispozici.

• Např. Bricks builder má globální nastavení (Theme styles), kde si nastavíte typografii, jednotlivé prvky, šířku layoutu, pozadí celého webu, a umožní vám tu nastylovat i jednotlivé komponenty. Díky tomu jsou jednotné na celém webu.
• DIVI má toto nastavení v šabloně, Elementor má také svoje globální nastavení, atd.

2. Pravidla stylů

Pokud zjistíte, že vám globální nastavení někde nestačí (např. neumí globálně na celém webu nastavit kulaté rohy obrázků), pak přichází na řadu nastavení, která jsou přenositelná – např. menší šablony, presety nebo CSS třídy. Ty můžete použít pro nastavení čehokoli, na co globální nastavení nestačí.

Tip: buildery/šablony i frameworky často přidávání určité CSS třídy prvkům automaticky, např. .brxe-image pro obrázek, který vytvoříte v Bricks. Není tedy nutné vytvářet svoje, ale můžete přepoužít ty, které vám dává váš nástroj.

3. Stránka Design system

Jednu stránku (která je většinou soukromá, draft, schovaná za přihlášením nebo jinak ne/dostupná) použiji k sestavení Design systemu jako takového. Tady je seznam komponent, připravené řádky se sloupci, ukázkový text s nadpisy, naformátované moduly (accordeony, countery…)… prostě vše vizuální.

4. Responzivita

Na to nezapomeňte. Čím lépe si Design systém uděláte responzivní hned na začátku, tím víc si ušetříte vrásek později.

Výhody Design systemu

Celý princip Design systemu je založen na tom, že komponenty ovládáte z jednoho místa. Tedy že si už naformátované komponenty a moduly jen vkládáte tam, kde je třeba a stavíte z nich jednotlivé stránky. Toto funguje za předpokladu, že komponenty po přepoužití měníte jen minimálně, nebo vůbec (v opačném případě se vám nemusí aplikovat globální nastavení a styly, které jste si připravili).

• Je unikátní pro konkrétní web – není to jen obecná knihovna komponent, je to konkrétní Design system na míru konkrétnímu webu.
• Všechny prvky, aplikovaná nastavení webu… jsou na jedné stránce, nestane se tedy, že vám nějaký prvek vizuálně “ujede” nebo nezapadne. Pokud ho ovládáte jen globálním nastavením, převezme si ho právě odsud.
• Web bude vizuálně jednotný, nastavitelný na jednom místě, díky čemuž bude snadnější na údržbu.
• A díky globálnímu nastavení je snadno změníte po celém webu, protože je změníte jen na této stránce.
• Díky globálním nastavením je web rychlý, už jen proto, že výsledných CSS stylů je méně.
• Snadněji se vám bude komunikovat s grafikem, protože už na začátku uvidíte které prvky zapadají a které ne.
• Jednu stránku pak můžete testovat např. na přístupnost a víte, že projdou i ostatní.
• I když se vám může zdát, že příprava design systemu zabere čas, investice se vrátí v podobě rychlejší práce, snazší údržby a spokojených uživatelů, kteří ocení logický a přehledný design.

Kdy se Design systém nevyplatí

I když je design systém skvělým nástrojem pro většinu webů, nejsou situace, kdy jeho použití dává smysl. Na malých webových projektech nebo stránkách s minimálním množstvím komponent se často vyplatí pracovat bez něj – příprava systému by zabralo více času, než kolik by přinesla užitku.

Princip design systému je tedy nejvíc přínosný tam, kde je potřeba jednotnost, opakované používání komponent a snadná údržba – čím větší a komplexnější web, tím víc se vyplatí.

Co obsahuje Design system?

1. Barvy a jednotná barevná paleta

Doporučení, jak vybrat barvy pro web a kolik jich nadefinovat, už mám v jednom článku také, proto vás odkážu rovnou tam. Ve vašem Designu systemu je důležité si pouze barvy přiřadit do palety v šabloně/builderu a začít je používat všude tam, kde jsou třeba.

Výsledek: Barvy jednoduše použijete z vaší připravené palety a nemusíte přemýšlet nad tím, jestli vám tam nějaká chybí.

2. Logický systém mezer mezi prvky

Nadefinujte si nějaký systém mezer, který se drží principů:

1. Prvky, které k sobě logicky/informačně/jinak patří, jsou k sobě blíž, než prvky, které k sobě nepatří.
2. Je to nějaká opticky logická posloupnost, např. mocniny 2 a podobně. Díky tomu to bude vypadat vizuálně dobře. Tip: Geometrická řada je vizuálně lepší než lineární – rozdíly jsou více vidět.
3. Nezapomeňte na responzivitu.

Tyto mezery si pak nadefinujte všude, kde to jen jde (ať už pomocí CSS tříd, presetů nebo jiných možností, které nabízí vaše šablona/builder): sloupce, paddingy tlačítek a jiných prvků, mezery mezi texty, odsazení prvků od sebe, různé karty nebo jiné grafické prvky, které na webu máte.

Výsledek: Design bude jednotnější, logičtější a pro vás mnohem jednodušší mezery používat, protože budete vědět kdy a kde jakou dát.

3. Fonty a typografie

Jak vylepšit typografii webu, to si můžete přečíst zde. U fontů jde jen o to uložit je lokálně do webu, abyste měli k dispozici všechny potřebné řezy. Následně si je pak přiřadíte v nastavení fontů ke všem prvkům, které fonty potřebují.

A také si nadefinujete správné mezery mezi nadpisy a texty, případně výčty a dalšími textovými prvky, aby typografie vypadala jednotně.

Výsledek: Při samotné tvorbě pak jen vkládáte nadpisy, měníte jejich úrovně, a připravené styly se automaticky aplikují.

4. Tlačítka

Díky tomu, že máte v design systému definované barvy i mezery, můžete si začít připravovat i jednotlivé moduly/bloky/prvky, které budete na webu potřebovat. A jedním z nich jsou tlačítka:

• dejte jim vhodný padding a velikost textu,
• nezapomeňte na velká a malá tlačítka, u kterých je to potřeba nastavit proporcionálně,
• případně variantu s ikonkou a bez ní,
• tlačítka se mohou lišit podle typu (primary, secondary) a dokonce i podle pozadí, aby na něm byla vidět.
• nezapomeňte na hover efekt, pokud ho používáte.

Tip: nezapomeňte na to, že tlačítko má vypadat jako tlačítko bez jakékoli interakce. Na dotykových zařízeních hover efekt není.

5. Řádky, sloupce, karty

Stejným způsobem můžete definovat (samozřejmě i responzivně) velké prvky, jak jsou celé sekce, řádky a sloupce, nebo karty. Některé šablony/buildery už mají řádky a sloupce definované (DIVI nebo Elementor), u jiných si je musíte připravit sami.

Tip: Nezapomeňte na různé poměry sloupců, např. 1:1:1, 2:3, 1:2 a podobně.

Výsledek: Jen si vykopírujete řádek se sloupci, který potřebujete, a změníte uvnitř obsah.

6. Komponenty

Po velkých prvcích zbývají i ty malé, resp. jednotlivé moduly a stavební bloky. Sem patří všechny moduly, které vás napadnou a budete pro ně na webu využití.

Výsledek: Pak si jen zkopírujete komponentu a přepoužijete ji kdekoli na webu.

7. Další libovolné části

Cokoli dalšího, co na webu bude a je součástí vizuální identity, např. 

• sada ikon,
• animace a interakce,
• formuláře,
• grafy,
• atd…

Design system stojí za to

Vizuální design systém není jen globální nastavení a není jen knihovna komponent – je to všechno dohromady, navíc na míru konkrétnímu webu.

Je to systém, který vám usnadní práci, zaručí jednotný vzhled a ušetří spoustu času. Správně připravený systém vám umožní rychle vytvářet nové stránky a komponenty, snadno je aktualizovat a zajistit, že všechno vypadá konzistentně napříč webem.

Tip na konec: Design systém roste s vaším webem – začněte s tím, co potřebujete hned, a postupně ho rozšiřujte o další komponenty, pravidla a detaily. Čím větší a složitější web, tím víc se vám tato investice vyplatí.