Lego pro web: Jak přemýšlet o design systémech
PŘEČÍST ČLÁNEK
Design systémy dnes představují základ moderního webového vývoje. O jejich smyslu a správné implementaci mluvil na své přednášce Design systémy - od atomu po galaxii na letošním FrontKonu Petr Koláček z Etnetery, který se webovému vývoji věnuje už téměř čtvrt století. S nadhledem a zkušeností ukazuje, že dobře navržený design systém se chová jako stavebnice Lego. Vše do sebe zapadá, funguje napříč projekty a umožňuje budovat složité celky z jednoduchých komponent.
Podle Petra je nejlepším design systémem na světě právě Lego. Stavebnice, která je už devadesát let stará, ale stále dokonale kompatibilní napříč generacemi. Z kostek z dětství lze postavit něco nového i dnes, a přesně takhle by měl fungovat i design systém. Jednotlivé komponenty musí být navzájem propojené, konzistentní a snadno znovupoužitelné.
Vývoj UI tedy není o tom, že pokaždé vytváříme něco zcela nového. Je to o tom, že stavíme z již existujících, ověřených a přehledně definovaných dílků. To přináší rychlost, úsporu nákladů i vyšší kvalitu výsledku.
Vytváření design systému však znamená investici. Nejprve je potřeba vybudovat samotné „kostičky“ – základní komponenty, které pak vývoj zrychlují. „Zpočátku to stojí čas i peníze,“ říká Petr, „ale v okamžiku, kdy se komponenty začnou znovu používat, začne se investice vracet a systém začne zářit.“
Základní stavební jednotkou design systému jsou tzv. design tokens – proměnné, které definují vizuální charakter aplikace. Barvy, mezery, velikosti nebo stíny. Pro větší projekty je vhodné pracovat se třemi vrstvami:
Klíčem k úspěchu je konzistence a jasná struktura. Petr doporučuje nikdy nepoužívat primitivní hodnoty přímo v kódu a mít systém promyšlený tak, aby podporoval témování i responzivitu už na úrovni tokenů.
Komponenty samotné by pak měly být co nejvíce nezávislé a snadno testovatelné. Už při jejich tvorbě je dobré myslet na přístupnost, SEO i výkon.
Dalším klíčem k úspěchu jsou design patterns. Jsou to návody, jak z komponent skládat větší celky. Stejně jako v Legu máme návod, jak z kostiček postavit auto nebo dům, tak i design systém by měl nabízet vzory pro typické situace (např. formulář, navigace či karta produktu). Tyto vzory pomáhají udržet konzistenci a zrychlují vývoj.
Bez dobré dokumentace by ale design systém neměl šanci přežít. Je potřeba mít jasně popsané principy, workflow a návody, aby vývojáři věděli, jak systém používat. Figma často nestačí, ideální je kombinace dokumentační vrstvy s odkazy na zdrojové komponenty, například v nástrojích jako Storybook nebo Pattern Lab.
Design systém není jen o technologiích, ale i o lidech. Je nezbytné mít určeného garanta systému. Člověka, který má přehled o všech prvcích a stará se o jeho konzistenci. Stejně důležité je získat podporu od klienta a stakeholderů. Bez jejich pochopení procesů (např. jak přidávat nové komponenty) může systém rychle ztratit smysl.
Na závěr Petr připomíná myšlenku Brada Frosta, autora atomického designu: „Produkt musí být vždy v souladu se svým design systémem.“ Pokud je systém příliš striktní, brzdí vývoj, pokud se naopak přizpůsobuje každé nové potřebě produktu, ztrácí integritu. Úspěch tkví v rovnováze.
Ačkoliv se dnes do vývoje stále více zapojuje umělá inteligence, Petr věří, že „oldschoolové“ design systémy, ty pečlivě promyšlené, ručně tvořené a laděné, budou mít své místo i nadále. „Doufám, že se takhle poctivě dělané systémy budou dělat ještě dlouho,“ uzavírá.
.png)
.png)
.jpg)
