Co jsou to design systémy a jaká je jejich základní struktura

Design systémy se staly klíčovou součástí mé každodenní práce, a proto jsem se rozhodl věnovat pár řádků textu, které popisují jeho základní strukturu a rozdíly oproti komponentovým knihovnám.

Základní definice design systému

Velmi stručně řečeno, design systém je kolekce definic pravidel designu a jejich provázanosti, které jsou vedeny jasnými standardy spolu s jejich dokumentací a které usnadňují práci pro všechny, kteří se podílí na vývoji digitálních produktů. Jde 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.

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ů. Řeší nástroje pro designéry a vývojáře, designové paterny, 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 náročnější na definici.

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 digitálního produktu.

Design systém pomáhá ke zlepšení a zrychlení pracovního procesu návrhu a vývoje digitálního produktu a usnadňuje celému týmu komunikaci. Je skoro nezbytnou součástí pro vývoj multiplatformních produktů, spolupráci velkých designérských nebo vývojářských týmu nebo když z jedné knihovny komponent vytváří více produktů, které mají být v souladu s principy konkrétní značky. Zjednodušeně řečeno – aby mohli designéři a vývojáři rychle iterovat, musí mít přístup k jednomu zdroji pravdy, kterým je právě design systém.

Design systémy vs. komponentové knihovny vs. styleguides

Tyto tři pojmy se dost často mezi sebou zaměňují a zřídkakdy odpovídá realita tomu, co je při komunikaci zmíněno. Style guide i komponentové knihovny se často zaměňují s design systémy a naopak. V následujících odstavcích trochu upřesním tyto pojmy.

Style guide popisuje nejnižší úroveň abstrakce designu. Jak je 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ísma a typografii, ikon, 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.

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í je výborně anglicky popsáno v článku 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.

Design systém je jediným zdrojem pravdy, který seskupuje všechny oblasti a umožňuje týmům navrhnout, realizovat a vyvinout digitální produkt. Je souborem výstupů z různých oblastí designu, které jsou potřeba k vytvoření kvalitního digitálního produktu. Neustále se vyvíjí s produktem, použitými nástroji a technologiemi. Kromě nástrojů pro designéry a vývojáře, komponentové knihovny a style guide by měl design systém 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 angličtině tyto rozdíly velmi pěkně popsal Jan Toman v jednom z jeho článků.

Závěrem

Již nějakou dobu můžeme v diskuzích pozorovat hojný výskyt tohoto větného spojení, které je pro robustnější firmy čím dál více žhavějším tématem a pro další vývoj jejich digitálních produktů začíná být nezbytnou součastí při vývoji. S rostoucí náročností a komplexitou produktu je skoro nezbytné definovat jasně daná pravidla, které může celý tým nejen využívat, ale také navrhovat jejich úpravy a přispívat svými znalostmi k jejich rozšíření.

Zpět na výpis článků