Dizajn systémy
Dizajn systémy sú dnes populárnou témou, tak si niečo o nich povedzme. Rôzne definície môžeme zhrnúť do nasledovného tvrdenia:
Design system je sada prepoužiteľných komponentov, princípov a dokumentácie, ktoré sú určené na tvorbu a udržiavanie konzistentných používateľských rozhraní (user interface - UI) a používateľského zážitku (user experience - UX) naprieč rôznymi produktmi a platformami.
Slúži ako "single source of truth" pre dizajnérov, developerov a ostatných ľudí zapojených do tvorby a rozvoja digitálnych produktov.
Len digitálne?
Hneď v úvode si dovolím polemizovať s poslednou vetou definície vyššie. Dizajn systémy totiž nemusia byť (a často nie sú) iba o digitálnych produktoch. Ako príklad dávam "dopravný podnik" hlavného mesta Veľkej Británie - Transport for London, ktorí majú výborne spracované manuály jednak pre online služby, ale tiež pre vzhľad a funkčnosť staníc, dopravných prostriedkov či informačných máp v uliciach Londýna.
Ukážka z dizajn systému aplikovaného na fungovanie stanice metra.
Nemusíte byť dopravným podnikom niekoľkomiliónovej metropoly aby na vás neplatilo pravidlo, že aj pri poskytovaní digitálnych služieb sa user experience nekončí zatvorením okna webového prehliadača či aplikácie v mobile. Zohľadnite to pri tvorbe svojho vlastného dizajn systému pre zaručenie konzistentného zážitku vašich zákazníkov a zákazníčiek.
Čo obsahuje dizajn systém
1. Princípy
Ak staviame dom, pevné základy sú to najdôležitejšie. V dizajn systémoch musíme mať ujasnené princípy ako pracujeme s prvkami tvoriacimi našu značku a vizuálny obsah:
- farby a typografia,
- štýl "tone of voice", tj. ako komunikujeme v textoch či audio/video komunikácii,
- aký použiť štýl fotografií, ilustrácií a ikony
a ďalšie.
Pre grafický dizajn sú dôležité princípy pre rozloženia prvkov (layout), vytváranie priestoru medzi prvkami (spacing) ale aj spôsob ako tvoríme interaktivitu elementov, animácie a pod.
Ukážka z dizajn systému ui42. Definície farieb rovno uvádzajú kontrast napr. s bielou. Keď sa bude niekto rozhodovať, či konkrétnu farbu môže použiť pre text na bielom pozadí, stačí si skontrolovať či spĺňa najmenej AA úroveň prístupnosti.
2. Komponenty
Komponenty sú zrejme najznámejšia časť dizajn systémov.
- Jednak sú to predpripravené vizuálne elementy, ktoré vieme prepoužívať vďaka knižniciam v nástrojoch ako Figma, Adobe XD, Sketch a ďalšie. Samotné komponenty bez princípov a dokumentácie sa zvyknú nazývať UI kit.
- Komponenty pre vývojárov sú už naprogramované verzie toho, čo bolo nakreslené. V ideálnom prípade obsahujú jednoducho skopírovateľný kód, ktorým do svojej aplikácie vložíme prvok nie len s jeho vzhľadom ale aj správaním.
Pri tvorbe komponentov pre dizajn systémy odporúčame držať sa princípov tzv. atomic design, kde z najmenších "atómov" postupne vyskladávame zložitejšie prvky. Vďaka tomuto vyskladávaniu aktualizovanie nižšieho prvku na jednom mieste bude znamenať zmenu všade, kde je použitý a dosahuje sa tak jednotnosť nášho vizuálu.
Ukážka komponentu Stepper na princípe atomic design - zo základných atómov sa vyskladajú tzv. molekuly, ktoré ďalej vytvoria organizmus. Prípadná zmena atómu sa prejaví na všetkých miestach a udržiavanie konzistencie dizajnu sa tak stáva jednoduchším.
3. Dokumentácia
Iba nakresliť komponent - napr. modálne okno - nestačí. Dokumentácia je priestor, ktorý slúži na objasnenie ako s daným komponentom narábať, ako sa na neho aplikujú stanovené princípy, kedy ho použiť a pod. Dobre spísaná dokumentácia obsahuje príklady správneho aj nesprávneho použitia a možnosti prispôsobenia komponentu.
Extrémne dôležitým prvkom je dokumentácia, pokiaľ tvoríte dizajn systém, ktorý bude používaný ľuďmi z externého prostredia či širokej verejnosti. Dobrým príkladom sú (niektoré) dizajn systémy štátnych digitálnych služieb, napr. GOV.UK Design system, kde je kladený priestor aj pre spätnú väzbu, možnosti rozširovania dizajn systému zo strany verejnosti, či komunikácia o plánovaných zmenách - aby ste napr. vedeli, že komponent, ktorý by sa vám veľmi zišiel a nenašli ste ho, sa možno už vyvíja.
Ukážka z dokumentácie dizajn systému firmy Atlassian. Komponent Date picker s príkladmi použitia, kód pre developerov, možnosti prispôsobenia pre rôzne krajiny a pod.
Prečo by ste mali mať dizajn systém
V prvom rade je dôležité povedať, že "váš" dizajn systém, nemusí byť nevyhnutne "váš vlastný". Pokojne môžete použiť niektoré z voľne dostupných, napr. Material design od Google. Samozrejme si viete prispôsobiť farebnosť a typografiu tak, aby ladila s vašou značkou. Hlavne aby ste sa držali nejakého systému vo všeobecnosti.
Či už budete mať dizajn systém vlastný alebo siahnete po otvorenom riešení, môže to mať na vaše fungovanie množstvo benefitov:
- Konzistencia - dizajn systém vám pomôže udržať jednotnosť vizuálu, interakcií a brandingu vášho produktu. To prispieva k budovaniu lepšieho user experience vďaka tomu, že používatelia pracujú v rozhraní, ktoré sa správa jednotne (aj naprieč zariadeniami či rôznymi aplikáciami), má rovnaké princípy navigácie, je teda celkovo ľahko naučiteľné a po určitom čase intuitívne.
- Efektivita a produktivita - vďaka predpripraveným komponentom a princípom fungovania sa môžu dizajnéri, developeri či produktoví manažéri sústrediť na riešenie väčších problémov (než napr. či tlačidlo v modálnom okne bude vpravo alebo vľavo). Vzniká tak priestor na rapídne prototypovanie, čiže váš tím môže rýchlo generovať nápady a testovať ich bez toho, aby strávili priveľa času tvorbou dizajnu ako takého. Vplyv na efektivitu tímov výborne ilustruje nasledujúci graf, ktorý hovorí, že na úvod pri tvorbe dizajn systému efektivita poklesne (pretože staviate základy), ale neskôr budete benefitovať z vykonanej práce oveľa viac.
Ben Callahan, https://alistapart.com/article/selling-design-systems/
- Škálovateľnosť a prispôsobenie - ako váš biznis rastie, dizajn systém vám umožní rýchlo pridávať nové časti produktu či tvorbu úplne nového, no stále jednotného so zvyškom ekosystému. Ak počas rozvoja vznikne potreba rozšírenia dizajn systému, jednoducho do neho pridáte nové časti, ktoré ale budú stavať na rovnakých základoch.
- Zlepšenie vzájomnej spolupráce - dizajn systém je využívaný mnohými ľuďmi vo vašej organizácii. Vznikajú tak častejšie kontakty napr. medzi dizajnérmi a developermi alebo produktovými manažérmi, smerujúce k spoločnému porozumeniu princípov dizajnu vo vašej firme a tiež zdieľaniu dôležitej spätnej väzby, vďaka ktorej sa môže dizajn systém vyvíjať.
- Lepšia aktualizácia - za predpokladu, že dizajn systém je implementovaný správne, zmena na jednom mieste bude distribuovaná na každé použitie v rôznych aplikáciách, produktoch, platformách.
Dizajn systémy a ui42
V našom portfóliu máme niekoľko projektov, kde sme riešili:
- Tvorbu nového dizajn systému "na zelenej lúke", napr. pre klienta Asseco.
- Aktualizáciu a rozširovanie existujúceho dizajn systému pre klienta zo sektoru financií a poisťovníctva. V rámci dlhodobej spolupráce sme zabezpečovali aj migráciu dizajn systému pri prechode na inú platformu či tvorbu dokumentácie pre zamestnancov klienta.
- Implementovanie externého dizajn systému s vytváraním komponentov na mieru napr. pre klienta Essential Data. Pracovali sme s Jednotným dizajn manuálom elektronických služieb Slovenskej republiky (tzv. ID-SK), kde bolo potrebné rozšíriť tento systém o ďalšie prvky na základe stanovených princípov a následne vytvoriť high-fidelity prototypy pre testovanie a development.
