Dizajnový koncept
Po testovaní wireframov sme vedeli, ako majú fungovať hlavné úlohy. Mohli sme sa sústrediť na vzhľad. Začali sme moodboardom, vyskúšali viacero vizuálnych návrhov a doplnili vlastné ilustrácie. Potom sme vytvorili dizajnový systém s tokenmi a navrhli vyše 500 obrazoviek vo svetlom aj tmavom režime.
Začali sme moodboardom
Na moodboard zbierame vizuálne inšpirácie z rôznych aplikácií a webov. V tejto fáze ide o farby, písmo a celkový štýl, takže nás môže inšpirovať banka, fitness aplikácia aj e-shop. Každý moodboard predstavuje iný smer, napríklad čistý a moderný, hravý alebo elegantný a minimalistický. Pri IDS BK sme vychádzali z existujúceho brand manuálu, ktorý sme mohli čiastočne prispôsobiť. Po diskusii s klientom sme vybrali čistý, moderný štýl s jemne hravými ilustráciami.
Hľadanie výsledného štýlu
Vybraný štýl sme vyskúšali na úvodnej obrazovke a neskôr aj na detaile spojenia. Vzniklo viacero verzií, na ktorých sme porovnávali farby, rozloženie aj ovládanie. Finálny návrh týchto obrazoviek potom určil pravidlá pre zvyšok aplikácie a stal sa základom dizajnového systému.
Ilustrácie a animácie navyše
V pôvodnom rozpočte neboli ilustrácie ani animácie. Videli sme však, že by aplikácii pomohli, a rozhodli sme sa vytvoriť ich na vlastné náklady.
Ilustrácie sme nakreslili ručne a animovali v Lottie, aby sa ľahko preniesli do aplikácie. Pomáhajú vysvetliť ovládanie a pridávajú trochu hravosti aj do skorého ranného cestovania.
Tokeny a dizajnový systém sú základ
Základom kvalitného dizajnu je dobre nastavený dizajnový systém. Zaisťuje jednotnosť, zrýchľuje návrh aj vývoj a optimalizuje náklady. Vďaka rozvoju Figmy ho dnes vieme definovať pomocou tokenov, čo prináša výhody dizajnérom aj vývojárom.
- Svetlý a tmavý režim jedným kliknutím – tokeny umožňujú definovať farebné varianty na úrovni systému. Namiesto ručného prekresľovania obrazoviek stačí prepnúť hodnoty tokenov a celý dizajn sa automaticky prispôsobí.
- Jednoduché úpravy – namiesto ručnej zmeny všetkých komponentov upravíte jeden token a dizajn sa aktualizuje v celom projekte.
- Jednotnosť celého dizajnu – farby, typografia, odsadenia a ďalšie prvky sú definované na jednom mieste, čo odstraňuje nezrovnalosti.
- Plynulejšia spolupráca dizajnérov a vývojárov – tokeny sa dajú exportovať priamo do kódu, napríklad ako JSON, CSS alebo konfigurácia Tailwind.
- Jednoduchšia údržba kódu – pri zmene hlavnej farby či veľkosti textu stačí upraviť jediný token namiesto stoviek riadkov kódu.
- Lepšia optimalizácia a výkon aplikácie – definované tokeny znižujú duplicitu štýlov a sprehľadňujú CSS aj knižnice komponentov.
Finálny dizajn
Celý proces vyústil do návrhu všetkých obrazoviek. V každom režime sme vytvorili vyše 500 obrazoviek a venovali pozornosť každému detailu. Pokryli sme všetky stavy: prázdne a chybové, offline režim, interakcie pri vypĺňaní formulárov, 404 stránky aj bannery údržby aplikácie.
