Jak sjednotit web, zákaznický portál, mobilní aplikaci i další digitální produkty do jedné vizuální identity? Pro velkého evropského hráče v energetice jsme vytvořili design systém, který pomohl nastavit společný vizuální jazyk napříč celým ekosystémem. V tomto článku si ukážeme, jak jsme k tomu přistoupili, co hrálo klíčovou roli a jak jsme došli k řešení.
Od chaosu ke konzistenci
Když spolu různé produkty v rámci jednoho ekosystému nemluví stejným vizuálním jazykem, uživatel to pozná velmi rychle. Často se setkáváme s grafickými komponentami (například tlačítky), které na různých místech vypadají stejně, ale chovají se odlišně. Nebo s barevným textem, který je někde interaktivní a jinde pouze vizuálně zvýrazněný, bez možnosti prokliku. Jak pak zákazníkovi zajistit kvalitní a konzistentní uživatelský zážitek?
S podobnou výzvou za námi přišel E.ON Energy, který si dal za cíl sjednotit všechny své digitální touchpointy na českém trhu – od webových stránek přes mobilní aplikace až po informační kiosek. S novou vizuální identitou přišel nový vizuální jazyk – říkejme mu třeba novoeonština – a naším úkolem bylo naučit tímto jazykem mluvit produkty pro více než milion zákazníků. Jak ale začít, když je toho tolik?
Jak zkrotit digitální babylon
Hádáte správně – klíčem bude dobře navržený design systém. My jsme se inspirovali těmi nejznámějšími, jako je Material Design, Carbon Design System od IBM, Atlassian Design System, Encore od Spotify nebo U.S. Web Design System. Ale co dál?
Každý jazyk je postavený na abecedě. Tu můžeme chápat jako systém znaků, které v různých kombinacích vytvářejí význam. I my jsme si proto ve Figmě vytvořili vlastní základní sadu prvků, kterou jsme nazvali Core library (v jiných design systémech se můžete setkat s označením jako Foundations nebo Brand essentials). Naše Core library obsahovala barevné škály, numerické hodnoty, typografii, ikony a piktogramy. V tomto článku se ale zaměříme především na barvy a numerické hodnoty.
Core library = základ design systému
Barvy patří mezi nejdůležitější prvky designu, samy o sobě ale nestačí – musí mít jasně definovanou funkci. V rámci projektu jsme proto jednotlivým barevným škálám přiřadili konkrétní využití. Například červená barva byla vyhrazena pro interaktivní prvky, zatímco fialová sloužila k vizuálnímu zvýraznění statických částí. Díky tomu se už nemohlo stát, že by barevný text působil jako klikatelný, aniž by skutečně byl.
U numerických hodnot jsme pracovali s násobky čtyř, které jsou v digitálním prostředí standardem. I jim jsme přiřadili jasné funkce – například pro radius, spacing nebo další rozměrové vlastnosti.
Jakmile jsme měli tento základ rozvržený, bylo potřeba samotnou knihovnu vytvořit. Skvělým nástrojem se v tomto ohledu ukázaly Figma variables – díky nim vznikla přehledná databáze hodnot, která fungovala jako jeden zdroj pravdy. Na Core library se následně napojovaly jednotlivé design systémy i konkrétní designové soubory. Propojení knihoven a komunikaci mezi nimi rozebereme více do hloubky třeba příště.
Abeceda vizuálního jazyka
Abychom mohli vytvářet komplexní sdělení, potřebujeme slova a věty – tedy prvky složené z jednotlivých znaků. Těmi „slovy“ si v design systému můžete představit základní komponenty, například tlačítko. Aby ale mohlo vzniknout, je nutné zkombinovat barvy, typografii a numerické hodnoty určující radius, šířku, výšku nebo padding.
Stejně jako se slova v jazyce vyskytují v různých tvarech, je potřeba u komponent zohlednit i jejich stavy, zejména u těch interaktivních. Z těchto základních komponent pak můžeme skládat složitější celky – takzvané organismy. Výsledkem je ucelený design systém, který funguje jako slovník společného vizuálního jazyka. Core library pak zajišťuje konzistenci celého projektu, protože z ní čerpají všechny navazující design systémy.
Síla společného vizuálního jazyka
Design je jazyk, který umožňuje digitálním produktům komunikovat mezi sebou i s uživateli a má zásadní vliv na zákaznickou zkušenost. Každé tlačítko, barva nebo rozestup něco sděluje – a pokud si jednotlivé produkty „říkají“ něco jiného, uživatel to velmi rychle pozná a pocítí. Design systém tedy není jen nástroj pro designéry, ale efektivní prostředek, jak vytvořit společný hlas napříč celým digitálním ekosystémem a konzistentní uživatelskou zkušenost.
Díky jasně definované Core library jsme dokázali nastavit pevné základy, na kterých mohou jednotlivé produkty dál růst, aniž by ztratily kvalitu a konzistenci. Každý z nich si zachová svou funkčnost a kontext, ale všechny mluví stejným vizuálním jazykem – srozumitelně, předvídatelně a bez zbytečných nedorozumění. Zkrotit digitální babylon tedy neznamená potlačit rozdíly, ale dát jim jasná pravidla. A právě v tom spočívá síla dobře navrženého design systému.
