Čo je Scale-ready UI systém?
Scale-ready UI systém je súbor pravidiel, komponentov a princípov, ktoré umožňujú dizajn digitálneho produktu konzistentne rozvíjať aj s jeho rastom.
Nejde len o to, aby aplikácia vyzerala pekne.
UI systém môže definovať napríklad:
- typografiu,
- farby,
- spacing,
- grid,
- tlačidlá,
- formulárové prvky,
- navigáciu,
- modaly,
- notifikácie,
- karty,
- stavy komponentov,
- pravidlá responzivity.
Namiesto toho, aby dizajnér pri každej novej obrazovke vytváral všetko od začiatku, môže využívať existujúce stavebné bloky.
Je to podobné ako stavebnica. Ak máte dobre navrhnuté základné diely, nemusíte pri každom novom produkte vyrábať nové.
Prečo na tom záleží už pri MVP?
MVP má mať jednu hlavnú úlohu: overiť produktovú hypotézu s minimálnym množstvom potrebnej funkcionality.
To však neznamená, že všetko musí byť navrhnuté bez systému.
Predstavme si aplikáciu, ktorá má v MVP päť obrazoviek. Po úspešnom launchi sa pridajú ďalšie funkcie a o rok ich je päťdesiat.
Ak bola každá z pôvodných obrazoviek navrhnutá samostatne, môžu sa postupne objaviť:
- rôzne odtiene rovnakej farby,
- niekoľko typov tlačidiel,
- rozdielne spacingy,
- nekonzistentná typografia,
- rôzne správanie rovnakých komponentov.
S rastúcim produktom rastie aj počet týchto odchýlok.
Preto je už v MVP vhodné premýšľať nad tým, ktoré časti dizajnu budú opakovateľné.
Design system neznamená vytvoriť stovky komponentov
Jednou z častých chýb je snaha vytvoriť kompletný design system ešte predtým, než produkt vôbec existuje.
MVP nepotrebuje stovky komponentov, komplexnú dokumentáciu ani pravidlá pre každú mysliteľnú situáciu.
Potrebuje základ.
Ten môže obsahovať napríklad:
Design tokens
Farby, typografia, spacing, border radius, tiene a ďalšie základné hodnoty.
Core components
Tlačidlá, inputy, dropdowny, checkboxy, karty a ďalšie prvky, ktoré sa opakujú.
Patterns
Opakujúce sa kombinácie komponentov, napríklad prihlasovací formulár alebo produktová karta.
Guidelines
Jednoduché pravidlá, ktoré určujú, ako komponenty používať.
Cieľom nie je predvídať všetky budúce potreby produktu. Cieľom je vytvoriť dostatočne pevný základ, ktorý sa dá rozširovať.
Od jednotlivých komponentov k systému
Pri návrhu UI systému je dôležité premýšľať v úrovniach.
Namiesto:
„Potrebujeme tlačidlo na túto konkrétnu obrazovku.“
je užitočnejšie premýšľať:
„Aké typy tlačidiel náš produkt potrebuje a v akých situáciách ich budeme používať?“
Rovnaký princíp platí pri formulároch, kartách, navigácii či modaloch.
Ak máme napríklad jeden komponent tlačidla, ktorý sa používa na desiatich miestach, zmena jeho dizajnu sa môže prejaviť konzistentne v celom produkte.
To je jedna z hlavných hodnôt design systému.
Design system nie je len dizajnérsky nástroj
Scale-ready UI systém má veľký význam aj pre vývojárov.
Ak dizajn a development používajú rovnaké komponenty a pravidlá, znižuje sa priestor na interpretáciu.
Dizajnér nemusí pri každej obrazovke vysvetľovať, ako sa má tlačidlo správať. Vývojár zároveň nemusí vytvárať nový komponent vždy, keď sa objaví podobný prvok.
Ideálne tak vzniká spoločný jazyk medzi dizajnom a vývojom.
Figma komponent a frontend komponent by nemali byť dve úplne odlišné veci.
Čím lepšie sú tieto dva svety prepojené, tým jednoduchšie je systém udržiavať a rozširovať.
Kedy začať?
Najlepší čas začať budovať základ UI systému je často práve pred alebo počas MVP.
Nie však spôsobom:
„Najskôr vytvoríme kompletný design system a potom začneme produkt.“
Praktickejší prístup je:
Navrhujeme → používame → pozorujeme → zjednocujeme → rozširujeme.
Počas tvorby MVP sa ukáže, ktoré komponenty sa skutočne opakujú a ktoré boli iba teoretickou potrebou.
Design systém tak rastie spolu s produktom.
Ako môže vyzerať Scale-ready proces?
Pri novom projekte môže byť postup napríklad takýto:
1. Identifikujeme základné princípy
Definujeme vizuálny smer, typografiu, farby, spacing a základné pravidlá.
2. Vytvoríme najdôležitejšie komponenty
Nezačíname všetkým. Vyberieme prvky, ktoré MVP reálne potrebuje a ktoré sa budú pravdepodobne opakovať.
3. Použijeme ich v reálnych obrazovkách
Komponenty testujeme priamo v kontexte produktu.
4. Sledujeme opakujúce sa vzory
Ak sa rovnaký problém objaví na viacerých miestach, je to signál, že môže patriť do systému.
5. Systém postupne rozširujeme
Nové komponenty pridávame vtedy, keď ich produkt skutočne potrebuje.
Takto nevzniká design system odtrhnutý od reality produktu.
Čo sa stane, keď systém neexistuje?
Na začiatku možno nič.
Prvých pár obrazoviek môže dokonca vzniknúť rýchlejšie.
Problém sa ukáže neskôr.
Každá nová funkcia môže vyžadovať ďalšie rozhodnutia. Dizajnér vytvorí nový komponent, vývojár ho implementuje trochu inak a produkt postupne získava čoraz viac vizuálnych variácií.
Výsledkom môže byť design debt – podobne ako technical debt.
Namiesto toho, aby tím pracoval na nových funkciách, musí postupne opravovať nekonzistencie a prerábať existujúce časti produktu.
Scale-ready neznamená overengineered
Najväčšou chybou je myslieť si, že škálovateľný dizajn musí byť od začiatku komplexný.
Nemusí.
Scale-ready znamená pripravený na zmenu, nie pripravený na všetko.
Dobré MVP môže mať malý UI systém s niekoľkými desiatkami dobre premyslených pravidiel a komponentov. Ako produkt rastie, systém sa môže prirodzene rozširovať.
Takýto prístup šetrí čas dizajnérom aj vývojárom a zároveň pomáha udržať konzistentnú používateľskú skúsenosť.
Dizajn, ktorý rastie spolu s produktom
MVP je experiment. Ale ak sa experiment podarí, produkt bude rásť.
Preto sa oplatí už na začiatku premýšľať nielen nad tým, ako bude aplikácia vyzerať dnes, ale aj nad tým, ako sa bude jej dizajn meniť, keď pribudnú nové funkcie, používatelia a platformy.
Dobre navrhnutý UI systém nemusí MVP spomaľovať. Ak je vytvorený správne, môže naopak zrýchliť ďalší vývoj.
Nejde o to vytvoriť dokonalý design system od prvého dňa. Ide o vytvorenie dostatočne dobrého základu, ktorý môže rásť spolu s produktom.