Design systémy 101

Design systém je sada standardů pro správu designu webových služeb. Má za úkol snížit redundanci při tvorbě sdíleného jazyka a docílit tak lepší vizuální konzistence napříč produkty pomocí znovupoužitelných komponent a vzorů.

Historie

Když se ohlédneme do minulosti za Bauhaus a Swiss designem, můžeme rozpoznat určité náznaky toho, čemu dnes říkáme design systém. Bauhaus (1919-1933) se točí kolem myšlenky, že „forma následuje funkci“. Myšlenka toho je taková, že primární aspekt je funkční jednoduchost a ne dekorace prvků. Znamená to tedy, že veškeré části stránky musí mít funkce, které se zaměřují na proporce, teorii barev a práci s mřížkou.

Výtvarná škola Bauhaus (1919-1933)

Swiss Style, který je také znám jako International Typographic Style (období 50. a 60. lét 20. století) posunul práci s mřížkou a krok dále a zaměřil svoji pozornost na na asymetrii a čistá bezpatková písma. Obě tyto zásadní období v historii umění jsou zaměřeny na myšlenku jednotného jazyka designu s pokyny, jak pracovat s jednotlivými vzory nebo prvky, které by měly být dodržovány. Šlo tedy o zásadní vliv na vývoj moderního grafického designu, desktop publishing (výraz pro počítačovou sazbu a tedy využití výpočetní techniky pro zpracování textu, obrázků apod.) a nakonec taky ve webovém designu.


Co je design systém

Design systém je souborem výstupů z různých oblastí designu, které jsou potřeba pro konzistentní a udržitelnou tvorbu. Neustále se vyvíjí s produktem, použitými nástroji a technologiemi. Jde tedy o ztělesnění systému konceptů s jasnou strukturou a významem, které jsou na jednom místě a většinou jsou poháněny celým týmem. Pokud budete hledat inspiraci, určitě je dobré začít mezi nejznámějšími systémy designu, na které jsou jejich autoři určitě pyšní.

Autor: Krisztina Szerovay

Proč mít design systém

Design systém může sloužit a slouží jako vzdělávací nástroj. Pro designéry i vývojáře je strukturován tak, aby byly veškeré dostupné informace snadno pochopitelné, i když stojí nějaký čas naučit ostatní, jak ho používat. Explicitně napsané pokyny pro použití a průvodce styly se taky dobře hodí pro ty, kteří jsou v týmu noví. Pro ostatní je to zdroj připomenutí.

Další obrovskou výhodou je vizuální konzistence napříč produkty, odděleními nebo týmy. Design systém poskytuje jediný zdroj komponent, vzorů a stylů a má za úkol sjednotit návrhy tak, aby byly vizuálně soudržné a zapadly do firemního ekosystému. To, že vytváří unifikovaný jazyk společný napříč týmy, je jedna z největších výhod. Design systém je ale nadmíru užitečný taky v případě, kdy dochází ke změne v týmu a dochází ke změne na pozici odpovědné osoby za design.

“Design systems, when implemented well, can provide a lot of benefits to a design team.”
—Therese Fessenden

Je dobré si uvědomit, že nám design systém snižuje tlak na zdroje návrhu a všichni, kteří jsou zapojeni do procesu vývoje, se můžou soustředit na složitější a specifičtější problémy. Designéři můžou využívat již funkční prvky nebo vzory, a nemusí se zdržovat vytvářením nových. To jim zajistí efektivnější tvorbu svých návrhů pro prezentace. Tento postup se nejvíce hodí v případech, kdy webová služba obsahuje velké množství jednotlivých obrazovek a nebo když pracujete v týmu několika designérů.

Proč nemít design systém

Ne vždy se hodí vkládat usílí do tvorby systémů designu. Podle Nathana Curtise je tvorba uživatelského rozhraní systému designu dražší, než tvorba uživatelského rozhraní produktového týmu a mělo by se dobře zvážit, kdy se firmě vyplatí investovat do tak robustního systému.

Jedna taková situace může být v případě, kdy pracujete na projektu, který je plný statických jednorázových výtvorů a není na místě využívat stejné komponenty napříc jednotlivými moduly. Takové webové služby nevyužijí design systém a pokud by na to přišlo, výsledek by se projevil negativně a veškeré náklady spojené s tvorbou systému by nebyly vůbec užitečné.

Další případ, kdy se nemusí vyplatit do tvorby systému investovat, je v případech, kdy se v týmu nenachází nikdo, kdo by měl zájem systém budovat, rozvíjet a hájit jeho hodnoty. A tím nemyslím jednotlivce, ale nejlépe celý specializovaný tým. Tvorba takového systému je časově náročná a pořád se vyvíjí i díky zpětné vazbě produktových týmů. Pokud s takovou iniciativou začnete, jeden z vašich úkolů bude, abyste přesvědčili kolegy z vedení, proč se vyplatí investovat do tvorby a jakým způsobem toho chcete dosáhnout.


Co vše obsahuje

Systémy designu mají mnoho podob a liší se podle rozmanitosti jednotlivých webových aplikací. Vesměs ale obsahují průvodce stylů, knihovnu komponent a knihovnu vzorů. Kromě nástrojů pro designéry a vývojáře by měl design systém také obsahovat abstraktní prvky, jako jsou firemní hodnoty, sdílené způsoby práce, myšlení apod. Měl by taky dokumentovat informační architekturu, práci s pohybem a animacemi, principy tvorby obsahu, popis přístupnosti a další oblasti. V článku Design systems, style guides, pattern libraries. What the hell is the difference? tyto rozdíly velmi pěkně popsal Honza Toman.

Ilustrace struktury systému designu od Honzy Tomana

Takový systém není výstup práce jednotlivce nebo týmu, ale jedná se o soubor výstupů, který se bude neustále vyvíjet s produktem, nástroji i novými technologiemi. Jak je v angličtině detailně popsáno v článku Everything you need to know about Design Systems, design systém se skládá z hmotných i nehmotných prvků. Zahrnuje nástroje pro designéry a vývojáře, designové vzory, komponenty, dokumenty popisující postupy při práci a návrzích, ale také definice firemních hodnot, sdílené způsoby práce a myšlení, které jsou občas hůře definovatelné.

Kromě komponentové knihovny a definic základních vizuálních prvků obsahuje design systém normy a dokumentace. Ty popisují, jak a proč jednotlivé části návrhů používat a za jakým účelem. To je prospěšné nejen pro vývojáře, grafiky nebo UX tým, ale také pro analytiky, produktové manažery, vlastníky produktů a vůbec všechny, kteří se účastní procesu vývoje.

Průvodce styly

Průvodce styly popisuje nejnižší úroveň abstrakce designu. Jak by mohlo být z názvu zřetelné, definuje vzhled a zaměřuje se na grafické styly a jejich použití. Obsahuje definice barev a barevné palety, písem a typografie, ikon, definice využití tvarů, pokyny pro branding produktů nebo definice používání logotypu a jeho správné umístění. Může obsahovat také popis, jak zacházet s interpunkcí, pravopisem, gramatikou a dalšími oblastmi obsahu.

WeWork průvodce styly (prezentace od Gretel)

Nejvíce častá struktura průvodce styly se obvykle zaměřuje na branding (barvy, typografie, loga nebo tištěné média). Často taky nabízejí pokyny jak psát obsah, jakým tónem by se mělo promlouvat k uživatelům nebo popisují vizuální a interakční standardy.

Knihovna komponent

Moderní knihovna komponent uživatelského rozhraní má pro vývojáře nebo designéry k dispozici širokou škálu stavebních bloků. Obsahuje rozvržení komponent do jednotlivých oblastí nebo skupin a v lepších případech i zvolenou metodologii. Takové rozdělení dobře vysvětlil Audrey Hacq v jednom z jeho článků Atomic design: how to design systems of components. Komponentová knihovna by měla obsahovat nejen veškeré znovupoužitelné prvky jako jsou tlačítka, formulářové prvky, seznamy, nadpisy, záložky apod., ale také rozsáhlejší vzory jako například hlavičku, grid, karty, galerii, navigaci apod.

Struktura komponenty Button v komponentové knihovně systému designu Carbon od IBM

Jednotlivé komponenty obsahují vizuální příklady všech variant, typů a stavů. Kromě jména a popisku by měli mít uvedeny atributy a proměnné (jako např. velikost, tvar, barva), příklady užití kódu, informace o knihovnách nebo příklady použití. Mohou taky obsahovat pravidla, v jakých situacích se nejvíce hodí jejich využítí, v jakých případech by se neměli používat nebo kdy je lepší zvolit jinou komponentu.

Knihovna vzorů

Často se výraz knihovna vzorů zaměňuje s knihovnou komponent, ale mezi těmito typy knihoven je rozdíl. Knihovny komponent určují jednotlivé prvky uživatelského rozhraní, zatímco knihovny vzorů obsahují kolekce seskupení nebo rozvržení prvků uživatelského rozhraní.

Knihovna vzorů Attlasian

Knihovny vzorů jsou opakovaně použitelné kombinace komponent, které řeší konkrétní problém a pomáhají uživatelům dosáhnout jejich cílů a zajišťují konzistenci. Většinou nejsou knihovny vzorů tak robustní jako komponentové knihovny, nicméně jsou neméně důležité pro docílení jednotnosti v designu. Obvykle taky obsahují strukturu obsahu a možnosti rozvržení. Pár pěkných příkladů najdete v knihovně vzorů Attlasian.

Závěrem

Systémy designu jsou užitečné a šetří peníze i čas. Dávají všem, kteří se podílí na vývoji digitálních produktů, jediný zdroj pravdy. Potřebují ale odborníky, kteří dokážou systém nejen navrhnout, ale také dál vyvíjet, udržovat a hlavně také vylepšovat. Tvorba takového systému si žádá vyšší náklady na tvorbu a provoz pro dedikovaný tým nebo pár jednotlivců, a to bychom měli vždy dobře zvážit.


Články k tématu

← zpět na výpis článků