Co potřebují úspěšné značky od designérů? Rychlost, kreativitu a především konzistenci, aby značka byla dobře rozpoznatelná napříč celým spektrem marketingových materiálů (tzv. touch pointech). Současným trendem pro rozvoj vizuální identity značky je tvorba design systémů. Pojďme si vysvětlit,
co design systém je a proč ho potřebujete.
Obsah
Co je to design systém?
Design systém je knihovna klíčových prvků (elementů), stylů, vzorů a pravidel pro práci se značkou napříč různými marketingovými materiály a komunikačními kanály. Design systém využijete při tvorbě webů, aplikací, tiskovin, prezentací, šablon, zkrátka čehokoliv, co prezentuje vaši značku. Vždy by mělo jít o živý, neustále rozvíjený a aktualizovaný systém, který je průvodcem a základem tvorby nových materiálů i kontrolním mechanismem pro udržení konzistence značky.
Co obsahuje design systém?
Design systém obsahuje velké množství informací od barevné palety, přes fonty a typografii až po tlačítka, layout (rozvržení struktury konkrétního materiálu) nebo třeba i interaktivní komponenty.
Potřebujete design systém? Odpovězte si na několik otázek:
- Kolik vizuálních materiálů pro naši značku během roku tvoříme? Kolik tomu věnujeme času a peněz?
- Je pro nás kvalita vizuální prezentace značky důležitá?
- Potřebujeme, aby se naše brandové materiály často měnily, a přitom značka byla stále dobře rozpoznatelná?
- Bojujeme s konzistencí značky a stává se, že se naše materiály výrazně liší?
- Pracujeme často pod časovým tlakem?
- Je pro nás těžké prosazovat změny v našem designu?
- Kolik času strávíme odstraňováním chyb nebo řešením změnových požadavků v oblasti designu?
- Pracuje s designem naší značky více lidí nebo dokonce více různých týmů? Např. marketingový tým, vývojáři, agentury, obchodní partneři apod.
Je nutno říci, že tvorba a následná údržba design systému může být náročná. Design systémy mohou mít různý rozsah. Vstupní investice se ale postupně vrací při efektivním rozšiřování a aktivním využíváním pro rozvoj produktů a marketingových materiálů. Proto firmy k tomuto účelu najímají UX designéry, kteří se na systémy zaměřují.
Výhody a nevýhody design systému
Výhody:
Rychlejší návrh a design produktů
Díky opakování stylů, elementů a bloků, bude design produktů mnohem rychlejší. Základní kameny jsou totiž připraveny v design systému a pak se už pouze více méně aplikují. Práce s design systémem dokáže zrychlit jejich navrhování a vývoj až o 30 %.
Škálovatelnost
Váš design je schopen růst a rozvíjet se spolu s vaším produktem. Design systém vám umožňuje reagovat na změny a požadavky vašich kolegů, partnerů, uživatelů a zákazníků. Výhodou je také usnadnění přizpůsobení elementů značky pro různé formáty a komunikační kanály (web, tiskoviny, sociální sítě, prezentace apod.)
Konzistence a jednotná prezentace značky
Od samého začátku budete mít vše konzistentní, organizované a tím lépe udržitelné. Celý tým pak po celou dobu tvorby produktu (například webu) zůstane na stejné vlně a bude přesně vědět, jak má co použít. Nemusíte porovnávat nový výstup grafika s roky neaktualizovaným brand manuálem. Při práci s design systémem často víte, že použité prvky a pravidla odpovídají 1:1.
Změny rychle a jednoduše
Díky design systému může váš tým provádět jakékoliv změny rychle a jednoduše. S řadou elementů je následně možné pracovat stylem „copy & paste“ nebo nové pravidlo automatizovaně propsat napříč materiály (např. plošná změna barev či písma napříč webem).
Jednoduchá kontrola a schvalování vedením nebo klientem
Se zavedením design systému se na něj mohou designéři a vývojáři odkazovat, protože se stává “jediným zdrojem pravdy”. Tím se zjednoduší kontrola správnosti a kvality produktu, protože budou jasně definovaná pravidla. V praxi se setkáváme s tím, že o nových brandových materiálech se tak již nevedou dlouhé diskuze, zda takto nebo jinak. Debata probíhá na úrovni rozvoje design systému, ale konkrétní materiály jsou pak již jen jeho výsledkem. Pokud ve své práci často slýcháte „potřebujeme to ASAP, ale ještě to musí schválit šéf a kolegové“, tak design systém je přesně to, co Vás ušetří spoustu starostí a výrazně sníží počet dalších úprav a korektur.
Snížení výdajů za vývoj
Vývoj nových produktů i některých marketingových materiálů je často časově i finančně náročný. Práce s existujícím design systémem šetří obojí. Když design systém nemáte, často narážíte na zbytečné chyby, které by s jasně definovaným design systémem nenastaly. Návratnost investice do design systému bývá rychlejší, než byste čekali.
Nevýhody:
Potřebný čas na údržbu
Designové systémy se, stejně jako společnost a firmy, neustále vyvíjí a mění. Musíte proto vynaložit čas i peníze na jeho údržbu, aby byl stále aktuální. V případě, že se na tvorbě design systému a práce s jeho aplikacemi podílí více lidí je důležité nepodcenit vzájemnou komunikaci a každou změnu poctivě evidovat a sdílet s kolegy.
Snížení kreativity
Jasně definovaná pravidla sice šetří čas i peníze, ale ubírají kreativitu vašim designérům. V takovém případě doporučujeme nastavit si pravidelná období pro revizi design systému např. v podobě Brand hackatonu, kde dáte designérům prostor přinést opět něco nového a značku posunout zase o kus dál.
Naučení se design systému vyžaduje čas
Pro váš tým bude design systém něco nového, co jeho členové budou muset dodržovat. To vyžaduje čas (a někdy i odpor). Obojí se dá naštěstí snadno překonat.
Vytvořením uceleného a udržovaného design systému předejdete řadě (mnohdy velmi drahých) chyb. Skládá se z několika částí, které spolu souvisí a doplňují se.
Design systém podrobněji
První a zásadní částí je style guide, který obsahuje základní prvky designu, jako jsou fonty, barvy, ikony nebo třeba responzivní chování webu/aplikace. Style guide vám pomůže zajistit vizuální jednotu celého designu a zároveň přesně definovat stavební kameny celého systému.
Další částí jsou komponenty (elementy), kam patří ucelenější prvky, jako jsou tlačítka, formuláře, tagy a další.
Další částí jsou sekce, které tvoří celé části designu, jako jsou call to action bannery, cenové karty, karty produktů, dashboardy nebo cokoliv, co váš web/aplikace vyžaduje. Sekce jsou spíše taková třešnička na dortu v případě, že máte prostředky, čas a chuť svůj DS rozšiřovat, nebo pokud právě navrhujete nový komplexní materiál či projekt jakým je třeba web nebo e-shop.
A zmínit můžeme i další assety, zdrojové soubory a kódy, designové principy nebo i styly animací a další.
Jak tvořit design systém?
Už víte, že design systém chcete a potřebujete? Tak pojďme tvořit. Během tvorby design systému se můžete setkat s následujícími fázemi.
Zvažte způsob implementace a proces tvorby
Rozhodnutí mezi vytvořením vlastního design systému a využitím již existujícího systému značně ovlivní celý další postup.
Vytváření vlastního systému nabízí flexibilitu, ale nese s sebou časovou náročnost a vyžaduje určité investice. Naopak, již existující design systémy šetří čas a nabízejí ověřenou kvalitu, avšak mohou omezovat flexibilitu celkového projektu a tím způsobovat ústupky, které byste jinak do svého DS implementovali. Zkrátka pokud potřebujete řešení na míru (což je poměrně obvyklé) je dobré na něj být od začátku připraven. Celkový výběr závisí na konkrétních potřebách, časovém rámci a preferencích týmu, je možná i kombinace obou přístupů podle konkrétní situace.
Kvalitní příprava a tvorba komplexního zadání je základ. Vytvořte si přehled všech materiálů, se kterými pracujete a zkuste si představit jaké další materiály budete v budoucnu tvořit. Vypište si, co jsou klíčové vizuální kódy značky (tzv. brand codes), podle kterých lidé vaši značku spolehlivě poznají. Popřemýšlejte o tom, co tvoří vaši značku konzistentní, kde vzniká variabilita (jak ta vyžadovaná, tak ta možná nežádoucí) a proč? Na začátku vytvoříme:
1. Podrobné zmapování situace v jaké se vaše práce nachází, potřeby i případné problémy, které vám design systém může pomoct vyřešit.
2. Přehled touch pointů (komunikačních kanálů, produktů a klíčových marketingových materiálů) značky.
3. Seznam vizuálních kódů značky (loga, symboly, barvy, písma, vzory, ikony apod.).
4. Přehled elementů (viz výše).
5. Na fázi vytváření seznamů a přehledů obvykle navazuje proces inovace, vylepšování a kreativní tvorby tak, abyste do nového design systému již vkládali pouze a jen ty prvky, se kterými v rámci své značky chcete nadále pracovat.
Nutno říct, že design systém není pouze otázka “grafického designu”, ale i kooperací mezi designéry a vývojáři. Již existující design systémy mají velmi dobře zmapovanou část dokumentace, kterou developeři mohou využít a pracovat se systémem velmi efektivně.
Dokumentace hraje klíčovou roli v poskytování informací vývojářům o tom, jak správně implementovat designové prvky a zachovat konzistenci v celém projektu. To může zahrnovat informace o barvách, typografii, komponentech, interakcích a dalších designových pravidlech.
Dále tedy tvoříme:
6. Dokumentaci a popis pravidel práce se značkou (definování stylů, gridů, layoutů apod.).
7. Systém / rozhraní, kde to všechno bude zaznamenané a kde budeme s design systémem pracovat.
K vytvoření a správě jednoduché dokumentace je možné využít např. Notion. Ten ale nemá přímé napojení na Figmu, Sketch nebo XD. Nejlepším místem, kde spravovat dokumentaci jsou dedikované nástroje jako je Zeroheight nebo Storybook. Konzistentní struktura a snadná aktualizace jsou klíčové pro efektivní spolupráci, aktualizaci a udržení jednotného vizuálního stylu.
Designéři by měli být schopni definovat jasná a srozumitelná pravidla, zatímco vývojáři by měli být schopni dávat zpětnou vazbu na proveditelnost a technické hledisko implementace.
8. Zpětná vazba mezi všemi, jejich práci nový design systém ovlivní.
Údržba – Hotovým design systémem to nekončí. Musíte ho neustále udržovat aktuální a kontrolovat, aby byl v souladu s potřebami značky i podobou vašich webů, aplikací, produktů i markertingových materiálů.
Náš tip: Inspirujte se jinými design systémy, nástroji, články apod.
Kdy je hotovo?
No…vlastně nikdy. Design systém se neustále vyvíjí a je potřeba ho pravidelně aktualizovat a rozšiřovat. Pokud se ale do celého procesu pustíte, bude pro vás brzo nenahraditelným nástrojem pro každodenní práci. Navíc pokud máte design systém správně nastavený, poskytuje vám solidní konkurenční výhodu – rychlost, spolehlivost a efektivitu. Věřte nám, že víme, o čem mluvíme. V Uniferu s design systémem již nějakou dobu pracujeme a jediné, co nám na tom vadí je, že jsme s tím nezačali ještě dřív. 🙂
Design systém si vždy dobře promyslete
Promyšlený design systém totiž ovlivní jeho kvalitu a podpoří efektivitu práce designerů. Měli byste ho vždy stavět trpělivě a pozorně. Pokud to totiž neuděláte, případné chyby se budou propisovat do celého design systému, a ve finále vám přinese více škody než užitku.
Při jeho tvorbě byste měli zvážit
KDO BUDE DO DESIGN SYSTÉMU PŘISPÍVAT
Určete si osoby, které budou design systém pomáhat vytvářet a udržovat. Mohou to být jednotlivci z různých týmů nebo tým designerů.
MYSLETE NA UŽIVATELE
Přemýšlejte o tom, že designéři nejsou jediní, kteří budou váš design systém využívat. Co uživatelé, copywriteři, UX týmy nebo marketingový tým? Každého z nich informujte o tom, jak se do design systému dostanou a jak ho používat.
Inspirace pro design systém od nejlepších
Material Design by Google
Jedná se o jeden z nejoblíbenějších a nejvíce využívaných design systémů. Existuje už dlouho a využívají ho ti nejlepší designéři.
Atlassian Design System
Tento systém se používá na reálných produktech společnosti Atlassian. Je velmi podrobný, najdete v něm dokonce i zdůvodnění každého provedeného kroku.
Apple Human Interface Guidelines
V Applu mají design systém velmi elegantní a promyšlený. Nejde zde pouze o design systém, ale také o zdroj plný šablon ke stažení a dalších informací, které můžete využít na svých projektech.
Microsoft Fluent Design System
Tento design systém je, jak už název napovídá, od společnosti Microsoft. Jde o dobrý příklad nástrojů, které vám mohou pomoci velmi rychle dosáhnout stejného vzhledu všech vašich produktů.
Shopify Design System
Systém Polaris od Shopify obsahuje všechny prvky potřebné k vytváření aplikací bez náročného studování a učení. Navíc umožňuje stáhnout knihovnu komponent, vzorů a průvodců stylů.
Carbon
Oblíbený open-source návrh, který poskytuje dobrou sadu pravidel a návodů pro vytváření vysoce kvalitních design systémů. Můžete ho použít jako návod, jak elegantně manipulovat se složitými daty.
Mailchimp
Společnost Mailchimp je dlouhodobým lídrem svého oboru a vytvořila jednoduchý a uživatelsky velmi přívětivý design systém pro malé firmy.
Kolik stojí vytvoření design systému?
„Je to různé :), “ to je odpověď jakou jste asi nechtěli slyšet. Nicméně po dočtení až sem asi tušíte, jak obrovskou variabilitu mohou design systémy mít. Z našeho pohledu se tvorba design systému vyplácí už i menším firmám. V takovém případě obvykle není nutné mít od začátku hotové všechno. Důležitý je dobrý základ, který rozšiřujeme společně s tím, jak vznikají nové materiály a projekty. Např. v případě tvorby webu často stačí k rozpočtu na tvorbu webu přidat 10-15 % a společně s webem vznikne kvalitní design systém, které následně můžeme rozvíjet a on se rychle zaplatí díky zefektivnění tvorby dalších grafických materiálů. Z vlastní zkušenosti nevíme o žádné firmě, která by si nechala vytvořit design systém a pak s ním přestala pracovat. DS značku provází další dlouhé roky.
Pro velké firmy a organizace, kde se značkou a jejími vizuálními prvky a pravidly pracuje větší množství lidí a týmů jde již o naprostou nutnost a základ pro efektivní spolupráci. Zkrátka čím rozsáhlejší a složitější systém, tím důležitější je, aby všechno a všichni hráli podle jasných pravidel. Vytvoření komplexního design systému od nuly představuje podobnou investici jako vytvoření nové komplexní vizuální identity – jsou firmy, které si vystačí se základy v hodnotě desítek tisíc korun, ale jsou také firmy, pro které je investice do design systému v řádech statisíců i milionů stále efektivní vynaložení prostředků s rychlou návratností.
