Dizajn koncept
Po testovaní wireframov ktoré nám pomohli doladiť kľúčové flowy a funkcionality sme sa s jasnou víziou presunuli do dizajn fázy, ktorú sme odštartovali moodboardom. Na jeho základe vznikol Lead dizajn, ktorý prešiel viacerými iteráciami a obohatili sme ho o custom ilustrácie. Následne sme vytvorili dizajn systém pomocou tokenov a postupne nakreslili viac než 500 unikátnych screenov v Light a Dark mode.
Začali sme moodboardom
Každú dizajn fázu začíname moodboardom, kde si zbierame desiatky inšpirácií z rôznych aplikácií a webov, pričom sa sústredíme výlučne na vizuál. Nezáleží nám na tom, či ide o bankovú aplikáciu, fitness platformu alebo e-shop – dôležitý je celkový dojem a estetika. Každý moodboard reprezentuje jeden vizuálny smer, napríklad „Clean and Modern“, „Playful“ alebo „Elegant and Minimal“. Pri návrhu sme vychádzali z existujúceho brand manuálu, ktorý určoval základné vizuálne pravidlá, no mali sme možnosť si ho do určitej miery prispôsobiť. Tento balans medzi konzistenciou značky a kreatívnou slobodou nám umožnil nájsť vizuálny štýl, ktorý je nielen esteticky príťažlivý, ale aj funkčný. Po sérii diskusií a feedbackových kolečiek sme sa zhodli na smerovaní „Clean and Modern“ s jemne hravými ilustráciami.
Mnoho iterácii Lead dizajnu
Po zadefinovaní moodboardu sme sa presunuli k tvorbe Lead dizajnu, ktorý je kľúčovou súčasťou každého projektu. Pomáha nám preskúmať rôzne vizuálne možnosti a nasmerovať produkt k ideálnemu dizajnovému riešeniu, pričom vždy berieme do úvahy nielen estetiku, ale aj funkčnosť a používateľský zážitok. V tejto fáze prechádzame množstvom iterácií hlavných obrazoviek – v tomto prípade domovskej obrazovky a neskôr aj detailu trasy – aby sme našli rovnováhu medzi vizuálnom a intuitívnym ovládaním. Lead dizajn definuje dizajnový smer a je prvým krokom k vytvoreniu uceleného dizajn systému, ktorý zabezpečí konzistenciu naprieč celou aplikáciou.
Illustrácie a animácie ako overdelivery
V Outloud nerobíme len to, čo je v scope – robíme to, čo je správne pre produkt a jeho používateľov. Ak vidíme priestor na vylepšenie, nebojíme sa ísť nad rámec zadania, často aj na vlastné náklady. V tomto projekte nebol rozpočet na ilustrácie ani animácie, no verili sme, že bez nich by výsledok nebol kompletný a preto sme sa rozhodli ich vytvoriť. Ilustrácie sme nakreslili a zanimovali v Lottie, aby sa dali jednoducho implementovať v developmente a zároveň rozžiarili deň aj tým, ktorí musia vstávať o piatej ráno do práce – pretože aj malé vizuálne detaily môžu spraviť veľký rozdiel.Veríme, že práve takéto detaily dokážu posunúť používateľský zážitok na vyššiu úroveň a spraviť produkt nielen funkčným, ale aj vizuálne príťažlivým a intuitívnym.
Tokeny a systémik sú základom
Základom kvalitného dizajnu je dobre nastavený dizajn systém. Ten zabezpečuje konzistentnosť, urýchľuje proces návrhu a vývoja a zároveň optimalizuje náklady. Vďaka neustálemu vývoju Figmy dnes môžeme dizajn systém definovať pomocou tokenov, čo prináša množstvo výhod pre dizajnérov aj developerov.
- Light & Dark mode jedným klikom – vďaka tokenom môžeme definovať farebné variácie pre light a dark mode už na úrovni systému. To znamená, že namiesto manuálneho prekresľovania všetkých obrazoviek stačí prepnúť hodnoty tokenov a celý dizajn sa automaticky prispôsobí novému modu
- Jednoduché úpravy – namiesto ručných zmien vo všetkých komponentoch stačí upraviť jeden token, čím sa dizajn automaticky aktualizuje naprieč celým projektom.
- Konzistencia naprieč celým dizajnom – farby, typografia, paddingy a ďalšie prvky sú definované na jednom mieste, čím sa eliminuje inkonzistentnosť v dizajne.
- Plynulejšia spolupráca medzi dizajnérmi a vývojármi – tokeny sú exportovateľné priamo do kódu napr. vo forme JSON, CSS alebo Tailwind configu
- Jednoduchšia údržba kódu – keď sa zmení napríklad primárna farba alebo veľkosť textu, stačí upraviť jeden token namiesto úprav v stovkách riadkov kódu.
- Lepšia optimalizácia a výkonnosť aplikácie – definované tokeny redukujú zbytočné duplikovanie štýlov a zefektívňujú CSS alebo komponentové knižnice.
Finálny dizajn
Celý proces tohto projektu vyvrcholil návrhom všetkých obrazoviek. Vytvorili sme viac než 500 obrazoviek v každom režime a dbali na každý detail. Zahrnuli sme všetky možné stavy – od empty states a error states, offline mode, cez interakcie pri vypĺňaní formulárov, až po 404 stránky či bannery pri údržbu aplikácie.
