Nezáleží na tom, o jak velký projekt se jedná, design systém ulehčuje nastavení projektu vždy, a to už v jeho prvotních fázích. V Ackee jsme se konzistencí procesů zabývali už nějakou dobu a právě díky design systému se tyto procesy staly přehlednější a konzistentnější. Ve vztahu ke klientům máme více času na řešení komplexnějších problémů a s týmem vývojářů sjednocená pravidla spolupráce. Jak nám design systém šetří čas, energii i peníze?
Design systém? A to je co?
Design systém je kompletní sada UI a UX standardů určených pro uspořádání designu pomocí znovu použitelných komponent, patternů a zavedených postupů, které je třeba nastavit tak, aby práce na digitálním produktu byla pro každého, kdo se na projektu podílí, jednodušší a přehlednější.
Design systém není jenom knihovna barev, písem nebo tlačítek. Je to způsob, jakým designer přistupuje ke každému projektu, a každý tento přístup je svým způsobem jedinečný. Jde tedy o celkový vývoj produktu od momentu prvního kontaktu s klientem až po výsledný produkt a případně následnou spolupráci.
Může se stát, že na projektu bude po jeho odevzdání později pracovat jiný tým designérů – to je důvod, proč je důležité mít design systém dobře připravený už od začátku. Pomůže to jak klientovi, tak dalším designérům správně postupovat při dalším rozvoji produktu bez toho, aby design ztratil svou konzistenci.
V čem nám design systém pomáhá?
- Urychluje práci designérů a vývojářů tím, že umožňuje efektivní replikaci činností.
- Zjednodušuje designérovu počáteční práci a dovoluje mu soustředit se na složitější a důležitější problémy.
- Definováním způsobu spolupráce vytváří jednotný jazyk (nejen) mezi týmy vývojářů, designérů, projektových manažerů.
- Dává vzniknout vizuální konzistenci produktu, která je důležitá i při vývoji nových funkcí.
- Slouží jako edukační nástroj pro všechny interní týmy i pro klienty.
Kdy se (ne)pustit do tvorby design systému?
Na začátku je vždy potřeba si uvědomit, s jak velkým a komplexním projektem se potýkáme. Na základě toho se můžeme rozhodnout, jestli má vůbec smysl design systém budovat. Pokud se jedná o jednorázový projekt nebo událost s krátkodobou životností bez aspirace na pokračování, není třeba se do tvorby design systému pouštět.
Úkolem UI a UX designéra je chápat širší kontext a mít kromě základních technických znalostí přehled také o tom, jakým způsobem funguje řízení projektu, resp. jak fungují všechny týmy, které se na projektu podílí. Proto je nutné být od počátku na jedné straně s vývojovým týmem a dohodnout se na tom, jakým způsobem budeme systém budovat. Tímto krokem eliminujeme mnoho problémů, které by nás jinak čekaly v dalších fázích vývoje. I správné nastavení interních procesů je totiž součástí design systému.
Ackee fast design systém
Design systémy, které běžně najdeme online jako inspiraci, slouží k budování produktů větších rozměrů, které mají svůj dedikovaný design tým nebo jednotlivce schopné starat se o jeho údržbu – například Airbnb, Apple nebo Google. Jedná se o velmi sofistikované a komplexní soubory procesů, pravidel a dalších částí, ze kterých se design skládá.
V našem případě vývoje aplikací, kdy na projekt máme zhruba 1–3 měsíce, design systém nefunguje, protože za tak krátkou dobu není možné vytvořit relevantní a fungující výstup. I přesto se nám v Ackee podařilo tento běžný přístup optimalizovat a zautomatizovat. Vytvořili jsme zjednodušenou verzi design systému ve formě šablony, která umožňuje jeho budování rychle a efektivně.
Je třeba myslet na to, že design systém je součástí komplexnějšího procesu (při kterém bereme v potaz naše design principy) a všechny jeho součásti jsou mezi sebou provázané:
- Pochopení potřeb klienta a uživatele,
- tvorba wireframového prototypu produktu,
- vytvoření design systému,
- komunikace a hand-off mezi všemi týmy,
- kontrola realizovaného řešení.
Atomic design vs. Ackee Atomic
V mnohých případech se používá systém tzv. atomického designu, který má jasně definovanou logiku, na níž je možné design systémy stavět. Skládá se z atomů, molekul, organizmů, patternů a stránek – to nezní jako málo, co? Definice takového systému vyžaduje mnoho (zbytečných) kroků a právě kvůli jeho komplexitě často není možné jeho strukturu použít. Už jen filtrace toho, co bychom rádi využili, a následná prezentace takového monstra vývojářům (o implementaci nemluvě), by nás stála nejen spoustu času, ale hlavně peněz.
V Ackee jsme si proto vybrali jen jeho důležité a neměnné části a zpracovali je do šablony, kterou využíváme při každém projektu. Šablonu jsme připravili ve spolupráci s vývojovými týmy (ať už jde o front-end, tým projektových manažerů a vůbec všechny další týmy). Původní atomic design jsme zredukovali o dvě sekce a postavili jsme Ackee Atomic (AA) s následující strukturou: Tokeny, Komponenty a Layout. Při krátkodobých projektech víc nepotřebujeme. Samozřejmě je možné tímto způsobem nastavit design systém i pro produkty větších rozměrů s dlouhodobým kontinuálním vývojem.
Tokeny: základní stavební kameny design systému
Nezáleží na tom, který design software používáme – v šabloně jsme definovali základní postupy pro organizaci komponent a jejich pojmenování tak, aby každý designér předal práci vývojářskému týmu vždy ve stejné struktuře, se kterou jsou všichni obeznámeni. Jako základ pro design systém pak slouží tzv. Tokeny, jejichž logika je vždy stejná:
- barvy, jejich hierarchie a způsob pojmenování,
- textové styly,
- cheatsheet pro pojmenování komponent a jejich stavů,
- samostatné artboardy pro tokeny a komponenty,
- artboard s exportovatelnými assety,
- exportovatelná AppIcon,
- šablona screenshotů pro Google Play a AppStore.
Tokeny jsou počáteční moment designu, kde vždy nastává zmatek, a to jak mezi vývojáři, tak designéry. V případě Ackee se jedná hlavně o barvy a textové styly – ty je důležité mít dobře připravené (pro situace, kdy potřebujeme změnit barvy v celém systému nebo designu). Pokud by například klient požadoval převedení aplikace do dark modu, díky správně nadefinovaným barvám v design systému to můžeme jednoduše “naklikat.” V opačném případě bychom museli celý projekt kompletně předělat, což by vyžadovalo spoustu času a práce ze strany designu i vývoje. Do sekce tokenů můžeme tak podle potřeby přidat i evaluaci layoutu, zaoblení rohů a části designu, které samy o sobě nejsou komponentami, ale jejich stavebními částicemi.
V případě komponent, které se skládají z již dobře definovaných Tokenů, už máme víceméně volnost – každý ví, jak navrhnout tlačítko, textové pole nebo modální okno. Například běžné tlačítko je poskládané z Tokenů jako je barva pozadí, textový styl s barvou a zaoblení rohů. Tímto nám vznikne konkrétní komponenta, kterou umístíme do artboardu “komponenty”, kam dokreslíme i ostatní stavy. Důležité je zachovat strukturu artboardu a zásady pojmenování všech stavů.
Pořádek dělá přátelé design systém
Komplexnost designu jsme tak zredukovali zhruba o 70 %. Výsledkem je snadnější zaučení juniornějších designérů, vývojářů anebo nových kolegů, kteří potřebují pochopit, jakým způsobem pracujeme. Sjednocená komunikace a procesy mezi týmy odstraňuje otázky jako “kde mám hledat ikony, nepošleš mi odkaz?”, “jak vypadá error stav?” nebo “jsou někde nadefinované textové styly?” a další...
Můžeme vidět, že design systém je nevyhnutelnou součástí většiny projektů – naše práce není jen o odevzdávání výsledného designu. Jde o to zjednodušit procesy, které odevzdání výsledného designu umožňují. Proto je důležité si tyto procesy zautomatizovat, udělat si v nich pořádek a myslet vždy pár kroků dopředu. S design systémem na mysli tak ušetříme neskutečné množství času.
