Designový systém: co to je, proč a jak jej vytvořit

Zdá se, že téma návrhových systémů již bylo zváženo ze všech stran: můžete najít mnoho článků, příspěvků, zpráv a dalších materiálů o vytvoření designového systému. Navzdory tomu má každý, kdo se s tímto pojmem setká, mnoho otázek. Pokusíme se podrobně odpovědět na ty hlavní:

• Co je designový systém?
• Co to je?

Co je designový systém?

Návrhový systém je struktura, která zahrnuje vizuální komponenty, knihovnu kódu a pokyny k použití.

Začínající designéři často dělají tu chybu, že zjednodušují koncept tím, že považují návrhový systém za pouhou sadu uživatelského rozhraní – dokument, který obsahuje prvky grafického rozhraní, typografii a barvy.

Konstrukční systém se skládá ze tří úrovní:

A UI kit je vizuální jazyk produktu, pro který je vytvořen designový systém. Jsou to barvy, písma, ikony, tlačítka, odrážky, přepínače, posuvníky, obrázky, animace. Prvky se liší a závisí na specifikách digitálního produktu. Všechny pomáhají vytvářet viditelnou část rozhraní, se kterou uživatel komunikuje.

Framework je knihovna kódu, která je napsána pro každý z těchto prvků, stejně jako zásuvné moduly pro animaci, značky a štítky pro navigaci.

pokyny jsou souborem šablon a pravidel pro používání prvků, které organizují pracovní proces. Díky pokynům se do jednoduchých úkolů nezapojuje designér, ale přímo se zapojuje vývojář.

Pokyny například určují parametry vyskakovacího okna na webu: odsazení od textu, umístění a velikost nadpisu a hlavního textu, místo pro tlačítko a jak bude okno vypadat s menším, resp. více textu.

Typy návrhových systémů

Neexistuje jednotná klasifikace, ale odborníci rozlišují dva typy návrhových systémů – otevřený a uzavřený zdroj.

V systémech s otevřeným zdrojovým kódem může kterákoli společnost používat materiály a upravovat je pro své projekty – měnit barvy tlačítek, písma a ikony. Například v systémech Ant Design, Human Interface Guidelines a Material Design.

Uzavřené návrhové systémy jsou obvykle vytvářeny pro konkrétní společnost nebo produkt. Jsou to buď zcela uzavřené materiály, přístupné pouze zaměstnancům, nebo částečně otevřené.

Jak vytvořit designový systém

Vývoj návrhových systémů je založen na principech atomového designu. Atomový design je technika, která zahrnuje pět úrovní designových prvků: atomy, molekuly, organismy, vzory a stránky.

Návrh struktury systému:

• Atomy jsou nejmenší součásti: tlačítka, ikony, vstupní pole a písma.
• Molekuly jsou kombinací několika jednoduchých prvků: dvou tlačítek, nadpisu a vstupního řádku, oznamovací lišty, zaškrtávacího políčka a textu.
• Organismy jsou kompletní komponenty: hlavička webu, autorizační formulář, produktové karty a oznamovací banner.
• Šablony – rozložení stránek bez obsahu: nabídka, vzhled webu.
• stránky jsou stránky plné obsahu.

Obecný algoritmus vypadá takto:

• Vyberte barvy a písma, nastavte modulární mřížky a vyberte animaci, obrázky a zvuky.
• Vytvořte základní prvky rozhraní.
• Kombinace a rozložení designových prvků.
• Vytvořte seznam prvků spolu s pravidly. V pokynu specifikujte, o jaký prvek se jedná, kde se používá a jaké úkoly řeší.

Návrhové systémy se obvykle nevytvářejí od nuly, ale jsou postaveny na základě již vyvinutého materiálu: sad uživatelského rozhraní, pokynů nebo knih o značkách.

Proč potřebujete designový systém?

Jako u každého IT produktu je důležité odpovědět na otázku: „K čemu je návrhový systém? Nebo, jak poznamenávají někteří kolegové v obchodě, „no a co“?

Odpověď na tuto otázku vám pomůže pochopit hodnotu produktu. Část už je vidět z toho, co jsme popsali výše. Ale pojďme si to rozebrat a podívat se hlouběji.

Automatizace

Automatizace poskytuje nejviditelnější výhodu. Designový systém vám pomůže automatizovat operace a uvolní vám čas na jiné povinnosti.

Iterativnost

Schopnost zdědit a automaticky aplikovat úpravy prvků návrhového systému je cenným nástrojem pro produktový tým. Na jednom místě můžete rychle provést kosmetické nebo dokonce velké změny. Tímto způsobem můžete produkt vždy vylepšit.

Konzistence

Konzistence říká, že objekty a entity v produktu, které plní stejnou funkci, by měly usilovat o jednotu a podobnost.

Když použijeme srovnatelné funkce v produktu, stanou se známými a pohodlnými: instinktivně chápeme, jak tlačítko funguje a jak se zobrazuje, a také kde je umístěno.

Doufáme, že si každý z článku odnesl něco cenného. A opět jsme se přesvědčili, že práce na článku strukturuje znalosti a motivuje k dalšímu studiu.