Postup pro vytvoření Component library

Příklady design systémů

Důležité odkazy

Step by step

Postup

 

Postup

 

1

Rozeber obrazovky na ty nejmenší UI elementy (říkejme jim třeba atomy)

Příklad (Rozdělení barev v příkladu zatím ignoruj.)

 

 

Například si otevřeš ve Figma stránku Onboarding, z ní rozebereš všechny komponenty na ty nejmenší části (atomy). A na větší částí, které dávají smysl samy o sobě (molekuly).Tenhle rozbor není povinný, ale doporučujeme ho. Rozbor udělej na stránce Onboarding Component Inventory pod DESIGN SYSTEM.

 

 

2

Zařaď atom do kategorie

Vytvořili jsme nový file ve Figma: Loono Design System a na něm stránku Component library, obsahuje kategorie jako třeba Button, Text Input atd.

 

Pokud atom či molekula nikam nezapadá, dej jej do kategorie Undefined s komentářem odkud pochází. Neboj se inspirovat ostatními design systémy.

Sbíráme všechny varianty i drobné změny, pokud se nejedná o obsah. Takže třeba stejný nadpis, který jednou říká Rakovina Prsu a jindy Kardiovaskulární Onemocnění je dvakrát jeden a ten stejný nadpis a tak netřeba ho mít víckrát.

Pokud je to specifická ilustrace, i když opakující se, tak do systému patří.

3

Neboj se to roztřídit rychle a udělat chyby

Není vhodné trávit hodiny rozmýšlením nad jedním atomem a do jaké kategorie patří.

 

Rozdělení analýzy po sekcích

Sekce aplikace

Designer/ka

Sekce aplikace

Designer/ka

Onboarding

@Otakar Hyps

Main screen

 

Settings and Messages

 

Prevence

@Lea Ballová

Samovyšetření

@Eva Rippl

Najít lékaře

Lea

O zdraví

Eva

MIMO APLIKACI

Web

 

Školící materiály

 

Marketingové materiály