Sprievodca krok za krokom na vytvorenie systému dizajnu

Úvod

V tejto ére dostupnosti všade a kdekoľvek sa všadeprítomnosť stala normou. Je však tiež známe, že konzistentnosť je dôveryhodnosť. Používatelia sú teraz viac informovaní. Základným očakávaním je rýchla a bezproblémová skúsenosť bez ohľadu na rozhranie.

Okrem toho čas je hodnota, ktorú si nemôžete dovoliť premrhať. To všetko by malo stačiť na to, aby ste sa snažili urobiť viac pre svoje webové stránky alebo rozhranie. Snažiť sa však o dôsledné dodržiavanie 50 rôznych komponentov v dizajne bez chýb je vysoký cieľ.

"Design System" je tu, aby vám uľahčil život.

Čo je to systém dizajnu?

Návrhový systém je rozsiahly archív jasne zdokumentovaných opakovane použiteľných komponentov, ktoré môže produktový tím využiť pri vytváraní digitálnych zážitkov. Inými slovami, systémy dizajnu považujte za jediný zdroj pravdy pre spoločnosť v oblasti dizajnu.

Systém dizajnu sa neustále vyvíja viac ako sprievodcovia štýlmi alebo knižnice vzorov. Tento ekosystém usmernení týkajúcich sa rôznych subjektov vrátane dizajnu UX možno použiť ako rámec stavebných kameňov pre akýkoľvek projekt, aby sa zabezpečila konzistentnosť všetkých komponentov a ich súlad so značkou.

Systém dizajnu je užitočný pre začínajúce podniky, rastúce firmy aj podniky, ale s vývojom produktu sa stáva nevyhnutným a neodmysliteľným prvkom. Môže tiež pozitívne ovplyvniť obchodné ciele, pracovné postupy, tímovú prácu, používateľský zážitok a celkový dojem zo značky.

Aké sú výhody návrhového systému?

Niektoré z výhod implementácie návrhu systému sú

1. Zvyšuje efektivitu a zároveň skracuje čas - Hlavnou výhodou každého návrhového systému je možnosť rýchlo vytvárať a obnovovať návrhové a vývojové práce. Tímy môžu používať predpripravené prvky, čím sa zníži potreba neustále znovu vymýšľať koleso a zníži sa riziko nekonzistentnosti.
2. Zlepšuje vizuálnu konzistenciu medzi stránkami a kanálmi - Absencia systému dizajnu v rámci celej organizácie môže viesť k nekonzistentným vizuálom, roztrieštenému používateľskému zážitku alebo izolácii od značky. Súdržný súbor štandardov tiež pomáha zvládnuť rozsiahle redizajny alebo vizuálne rebrandy vo veľkom rozsahu.
3. Podporuje jednotný jazyk - Spoločný jazyk návrhu znižuje možnosť plytvania časom návrhu alebo vývoja v dôsledku nesprávnej komunikácie v rámci medzifunkčných tímov a medzi nimi.
4. Umožňuje lepšie sa sústrediť na zložitejšie problémy - tímy môžu lepšie riešiť zložité problémy, ako je prioritizácia informácií, správa ciest atď., keď sú vytvorené jednoduché a jednoznačné komponenty používateľského rozhrania.
5. Slúži ako referenčný a vzdelávací nástroj pre prispievateľov - návrh systému uľahčuje proces nástupu v prípade personálnych zmien. Pomáha tiež uľahčiť novým individuálnym prispievateľom vstup do dizajnu UI UX alebo tvorby obsahu.
6. Prispieva k silnej a nadčasovej značke - Cieľom dizajnového systému je komunikovať konkrétnu identitu a dizajn produktov, ktoré prepravuje. Pomáha vytvárať pôsobivé značky a pomáha ľuďom zapamätať si skúsenosti so značkou. Vďaka tomu sa ľudia cítia so značkou viac prepojení a viac jej dôverujú.

Sprievodca desiatimi krokmi na vytvorenie systému dizajnu

Vypracovali sme desaťstupňový proces, ktorý pomôže vašej spoločnosti vytvoriť systém dizajnu.

1. Dôkladne analyzujte svoj existujúci proces návrhu.

Prvým krokom pri tvorbe stratégie a začatí akéhokoľvek procesu je pochopiť, kde sa práve nachádzate. Preskúmanie a analýza súčasného procesu návrhu vašej organizácie vám pomôže lepšie pochopiť návrh systému, ktorý je pre vašu značku najvhodnejší. Položte si nasledujúce otázky:

• Aký je súčasný prístup vašej organizácie k dizajnu?
• Aké existujúce nástroje vaša organizácia využíva?

Uistite sa, že ste zhodnotili úroveň vyspelosti návrhu produktového tímu. To vám pomôže pri približnom prístupe k času potrebnému na implementáciu nového systému v organizácii.

2. Určite abecedu svojej značky

Abeceda značky by viedla k identite značky, t. j. k hodnotám značky a produktu a jazyku značky. Jazyk značky zahŕňa tvary, písma, farby, animácie, hlas a tón.

Dizajnéri budú používať vizuálny jazyk definovaný abecedou značky. Preskúmanie smerníc značky a rozhovor so zainteresovanými stranami vám pomôže pochopiť identitu a jazyk značky.

3. Vykonanie auditu aktuálneho produktu AI

Vykonanie auditu používateľského rozhrania súčasného produktu vám pomôže vyriešiť hlavnú výzvu v oblasti dizajnu produktu: duplicitu dizajnu. Cieľom auditu je dosiahnuť dva ciele.

• Upozornite na oblasti v rámci výrobku s výraznými nezrovnalosťami.
• Rozpoznajte najpoužívanejšie a najdôležitejšie prvky výrobku.

Audit používateľského rozhrania je viacstupňový proces. Rozhodujúca je identifikácia a analýza hlavných vlastností používateľského rozhrania a ich využitie v komponentoch. Na zistenie počtu jedinečných farieb a typov písma v súboroch štýlov môžete použiť dostupné nástroje. Každý návrh webovej lokality potom môžete ďalej rozdeliť na jednotlivé prvky.

4. Stanovte zásady návrhu vášho systému

Na vytvorenie vynikajúceho používateľského zážitku je nevyhnutné pochopiť dôvody, ktoré stoja za rozhodnutiami o dizajne. Okrem toho jasný súbor cieľov uľahčuje definovanie princípov dizajnu a koordináciu s tímami.

Chcete mať systémový proces návrhu? Začnite týmito otázkami:

• Čo vytvárate
• Prečo ho robíte
• Ako ho vytvoríte

Zásady dizajnu musia odrážať hodnoty a víziu vašej značky.

5. Vytvorenie knižnice komponentov

Táto knižnica, známa aj ako knižnica vzorov, by mala obsahovať všetky funkčné a dekoratívne prvky používateľského rozhrania. Zhodnoťte komponenty podľa projektu, potrieb používateľov a obchodných cieľov a ponechajte si tie, ktoré potrebujete.

6. Stanovenie pravidiel

Návrhové systémy nie sú vytvorené tak, aby obmedzovali návrhárov na konkrétny smer návrhu. Naopak, majú len poskytnúť dizajnérom a vývojárom základný rámec, ktorý rozširuje tvorivý smer a dáva priestor pre inovácie.

Ide o dva prístupy k pravidlám Design System, ako sa uvádza v knihe Ally Kholmatovej:

• Prísne pravidlá - návrhári a vývojári dodržiavajú prísny postup pri zavádzaní nových vzorov alebo komponentov.
• Voľné pravidlá - Tieto pravidlá umožňujú dizajnérom a vývojárom tvoriť bez dodržiavania prísnych obmedzení, ak sa domnievajú, že to vedie k lepšiemu dizajnu.

Podobne ako v mnohých iných oblastiach života je dôležité nájsť správnu rovnováhu medzi týmito pravidlami, aby bol produkt konzistentný a zároveň kreatívny.

7. Vyberte si model riadenia

Dynamické, neustále sa vyvíjajúce konštrukčné systémy si vyžadujú jednoduchý proces schvaľovania a implementácie zmien. Existujú tri modely riadenia:

• Solitérny model - jednotlivec alebo skupina jednotlivcov priamo "riadi" proces návrhu systému.
• Centralizovaný model - jeden tím je zodpovedný a riadi vývoj systému.
• Federatívny model - proces návrhu systému vedie viacero ľudí z viacerých skupín.

Hoci každý z týchto modelov má svoje výhody a nevýhody, najmä model osamoteného pracovníka môže viesť k tomu, že jeden zodpovedný pracovník sa stane úzkym miestom pre vykonávanie mnohých úloh. Najlepšou voľbou je použiť kombináciu rôznych modelov v súlade s vašimi potrebami.

8. Definujte štruktúru komponentov

Duplicita funkčných komponentov je v konštrukčných systémoch významnou výzvou. Výsledkom je nepružný systém a od návrhárov (a vývojárov) sa vyžaduje, aby pri každom novom scenári vytvárali nové prvky.

Úspešné návrhy systémov sú veľmi dobre opakovane použiteľné a umožňujú používateľom používať ich ako základ pre svoje produkty. Preto sa odporúča vyvíjať prvky, ktoré sa dajú opakovane použiť v rôznych obsahoch.

Kritériá pre opakovane použiteľné a škálovateľné komponenty:

• Modulárne - nezávislé komponenty a vymeniteľné prvky.
• Skladateľnosť - Fúzia existujúcich komponentov na vytvorenie nových
• Prispôsobiteľné - Prispôsobiteľné komponenty, ktoré fungujú v mnohých kontextoch.

9. Uistite sa, že všetky tímy používajú jednotný jazyk

K účelu návrhového systému patrí uľahčenie bezproblémovej tímovej práce. Preto je integrácia systému do pracovného procesu tímov veľmi dôležitá. Zvyšuje produktivitu a zároveň prináša hodnotu členom tímu.

Lepšie pochopenie toho, ako rôzni ľudia používajú návrhový systém v počiatočnom procese integrácie, vám môže pomôcť systém zodpovedajúcim spôsobom upraviť.

10. Pravidelne odovzdávajte zmeny

Proces návrhu systému sa vyvíja spolu s organizáciou a nemôže byť statický. Preto je po zavedení systému do organizácie nevyhnutné informovať o všetkých zmenách a priebežne informovať organizáciu.

Stručný a dobre udržiavaný zoznam zmien môže používateľom pomôcť pochopiť rôzne aktualizácie a ich vplyv na ich prácu.

Tri vzorové príklady na začiatok

Návrhový systém Atlassian

(https://atlassian.design/)

Atlassian Design System, známa austrálska spoločnosť zaoberajúca sa podnikovým softvérom, sa zameriava na zabezpečenie bezproblémovej spolupráce medzi agilnými, rozptýlenými tímami po celom svete.

Trello a Jira, dva široko používané nástroje spoločnosti Atlassian na spoluprácu, plne vystihujú filozofiu dizajnu spoločnosti. Táto filozofia spočíva vo využívaní digitálnych skúseností na zvýšenie produktivity a celkového potenciálu tímov a jednotlivých členov tímu.

Systém Atlassian Design System ponúka agilné techniky a efektívne sledovanie každej fázy projektu, od plánovania produktu až po jeho dodanie. To v konečnom dôsledku prináša prospešné výsledky tvorby a dodávania produktov. Ich návrhový systém zahŕňa najmä:

1. Usmernenia pre navrhovanie
2. Štandardy značky
3. Produkt
4. Ilustrácia
5. Vytváranie prototypov
6. Marketing
7. Osobnosť

Návrhový systém IBM

(https://carbondesignsystem.com/migrating/guide/design)

IBM je vynikajúcim príkladom veľkého IT podniku, ktorý pôsobí celosvetovo a riadi sa vlastným systémom návrhu.

Ich možnosti zahŕňajú všetko od obchodného poradenstva a financovania až po tvorbu softvéru, hosting/správu IT a riešenia, ktoré spájajú softvér s hardvérom.

Základným princípom spoločnosti IBM je neustále podporovať pokrok, či už ide o ľudskú spoločnosť alebo značku, pomocou vedy, rozumu a intelektu.

Podľa IBM je dobrý dizajn nielen nevyhnutnosťou, ale aj záväzkom voči používateľom. Tu sú niektoré z výrazných funkcií ich systému Carbon Design System, ktorý poskytuje vývojárom a dizajnérom pracujúcim s aplikáciami Adobe, Axure a Sketch množstvo nástrojov a zdrojov:

1. Vizualizácia údajov
2. Vzory
3. Komponenty
4. Usmernenia
5. Výukové programy

Systém Uber Design

(https://baseweb.design/)

Každý z nás už aspoň raz použil Uber. Táto americká technologická spoločnosť si zakladá na pohybe, vrátane rozvozu jedla, prepravy, vzájomného zdieľania jázd a mikromobility pomocou kolobežiek a elektrických bicyklov.

Spoločnosť Uber potrebuje na bezchybné fungovanie tohto typu služieb účinný systémový dizajn, ktorý sa vzťahuje na všetky čiastkové značky, interné značky, produkty a projekty.

Hlavné atribúty systému Uber Design System sú:

1. Architektúra značky
2. Zloženie
3. Tón hlasu
4. Pohyb
5. Ilustrácia
6. Fotografovanie
7. Ikonografia
8. Farba
9. Logo
10. Typografia

Pokyny, ktoré je potrebné poznať pred vytvorením prvého návrhového systému

1. Včasná a jasná komunikácia je váš nový najlepší priateľ

Zapojenie interných spotrebiteľov môže byť komplikované. V skutočnosti môže ich spätná väzba brzdiť proces, ak je nejednoznačná, poskytnutá príliš skoro v cykle alfa alebo beta verzie alebo nie je užitočná.

Povedzte svojim zákazníkom, používateľom návrhového systému, čo potrebujete, aby ste získali konštruktívnu spätnú väzbu. Ak ste v ranom predrealizačnom cykle, buďte úprimní a jasne povedzte, aké presné vstupy chcete. To naznačuje, že hľadáte najvýznamnejšie nedostatky produktu, a nie vysokofrekvenčnú kritiku.

Dávajte si pozor na prílišné premýšľanie, ubíjajte svoju myseľ, ale neváhajte nadmieru komunikovať.

2. Vaše kroky nie sú to jediné, čo musíte sledovať

Kľúčovou chýbajúcou časťou prioritizácie je často sledovanie používania návrhových systémov. Je nevyhnutné pochopiť, kde sa systém používa, kto ho používa, ako často a aká je frekvencia aktualizácií.

Zavedenie denného štatistického zberu informácií o tom, ktoré tímy využívajú presne ktoré verzie knižnice, umožňuje správne pochopiť mieru prijatia, aktualizácie a downgradu.

Keď identifikujete tímy, ktoré zriedkavo aktualizujú, môžete zistiť problémy, ktoré bránia aktualizácii, a následne ich odstrániť.

3. Mechanizmy spätnej väzby sú podceňované ako Rhaeghal z GOT

Ak chcete zabezpečiť, aby bol váš systém pre používateľov nielen cenný, ale aby sa cítili jeho súčasťou a aktívne k nemu prispievali, kľúčovým prvkom bude mať jednoduché, ale priamočiare spôsoby, ako môžu ľudia poskytovať spätnú väzbu (Slack, e-mail atď.) a prispievať do systému.

Vždy poskytnite pokyny, ako a kde poskytnúť spätnú väzbu v čo najväčšom počte oblastí, a nikdy nič nepredpokladajte, najmä to, že používateľ ju nájde na mieste, ktoré považujete za najzrejmejšie.

Systém dizajnu je severná hviezda, ktorú vaša organizácia potrebuje

Úspešný, dobre prepracovaný systém dizajnu sa stáva súčasťou samotnej chrbtice spoločnosti, čo vedie ku konzistentným a zosilneným zážitkom. Okrem toho dizajnéri a vývojári dostanú príležitosť lepšie komunikovať účel produktu namiesto toho, aby zostávali pri skladaní základných stavebných prvkov.

Pri realizácii dizajnu vám môže byť partnerom každý odborník, ale len špecialista na dizajn identifikuje aktuálne problémy, výzvy a túžby, aby vytvoril systém dizajnu špeciálne pre vás. Teraz nie je čas čakať. Vďaka tejto rozsiahlej príručke o tom, ako vytvoriť systém dizajnu, vás od úplnej transformácie vášho výrobného procesu delí len iniciatíva.

Odkazy

https://ionic.io/resources/articles/why-every-company-needs-a-design-system

https://www.baianat.com/books/merits-of-design-systems/design-systems-and-their-benefits

https://www.uxpin.com/create-design-system-guide/

https://builtin.com/design-ux/11-benefits-design-systems

https://elementor.com/blog/design-system/

https://www.nngroup.com/articles/design-systems-101/

https://www.uxpin.com/studio/blog/best-design-system-examples/#h-4-uber-design-system

https://www.eleken.co/blog-posts/7-design-systems-examples-for-your-inspiration

https://aufaitux.com/blog/best-design-systems/

https://www.copycat.dev/blog/design-system-examples/

https://builtin.com/design-ux/design-system

https://www.editorx.com/shaping-design/article/design-system-examples

https://medium.com/spotify-design/5-things-i-wish-id-known-before-starting-a-design-system-at-spotify-f8624abf1081