Průvodce krok za krokem k vytvoření návrhového systému

Úvodní stránka

V dnešní době, kdy je vše dostupné všude, se všudypřítomnost stala normou. Je však také známo, že důslednost je důvěryhodnost. Uživatelé jsou nyní uvědomělejší. Rychlé a bezproblémové fungování je základním očekáváním bez ohledu na rozhraní.

Navíc čas je hodnota, kterou si nemůžete dovolit promarnit. To vše by mělo stačit k tomu, abyste se snažili udělat více pro své webové stránky nebo rozhraní. Snažit se však o důsledné dodržování 50 různých komponent v designu bez chyb je náročný úkol.

"Design System" je tu, aby vám usnadnil život.

Co je to návrhový systém?

Návrhový systém je rozsáhlý archiv jasně zdokumentovaných opakovaně použitelných komponent, které může produktový tým využít při vytváření digitálních zážitků. Jinými slovy, designové systémy jsou pro společnost jediným zdrojem pravdy v oblasti designu.

Více než průvodci styly nebo knihovny vzorů je systém návrhu neustále se vyvíjející. Tento ekosystém pokynů týkajících se různých entit, včetně designu UX, lze použít jako rámec stavebních kamenů pro jakýkoli projekt, aby bylo zajištěno, že všechny komponenty jsou konzistentní a odpovídají značce.

Systém návrhu je užitečný pro začínající podniky, rostoucí firmy i podniky, ale s vývojem produktu se stává nezbytným a nepostradatelným prvkem. Může také pozitivně ovlivnit obchodní cíle, pracovní postupy, týmovou práci, uživatelskou zkušenost a celkový dojem ze značky.

Jaké jsou výhody návrhového systému?

Některé z výhod implementace návrhu systému jsou následující

1. Zvyšuje efektivitu a zároveň zkracuje čas - Hlavní výhodou každého návrhového systému je možnost rychle vytvářet a znovu vytvářet návrhy a vývojové práce. Týmy mohou používat předem připravené prvky, čímž se sníží potřeba neustále znovu vymýšlet kolo a sníží se riziko nekonzistence.
2. Zlepšuje vizuální konzistenci napříč stránkami a kanály - absence systému designu v rámci celé organizace může vést k nekonzistentním vizuálům, roztříštěnému uživatelskému prostředí nebo izolaci od značky. Soudržný soubor standardů také pomáhá zvládat rozsáhlé redesigny nebo vizuální rebrandy v měřítku.
3. Podporuje jednotný jazyk - Sdílený jazyk návrhu snižuje možnost promarnění času při návrhu nebo vývoji v důsledku špatné komunikace v rámci jednotlivých týmů a mezi nimi.
4. Umožňuje lépe se soustředit na složitější problémy - týmy mohou lépe řešit složité problémy, jako je stanovení priorit informací, správa cest atd., pokud jsou vytvořeny jednoduché a jednoznačné komponenty uživatelského rozhraní.
5. Slouží jako referenční a vzdělávací nástroj pro přispěvatele - Návrh systému usnadňuje proces nástupu v případě personálních změn. Pomáhá také usnadnit novým individuálním přispěvatelům vstup do návrhu UI UX nebo tvorby obsahu.
6. Přispívá k silné a nadčasové značce - Účelem designového systému je komunikovat určitou identitu a design výrobků, které přepravuje. Pomáhá vytvářet působivé značky a pomáhá lidem zapamatovat si zkušenosti se značkou. Díky tomu se lidé cítí se značkou více spjati a více jí důvěřují.

Desetistupňový průvodce budováním návrhového systému

Vypracovali jsme proces o deseti krocích, který vaší společnosti pomůže vytvořit systém designu.

1. Důkladně analyzujte svůj stávající proces návrhu.

Prvním krokem ke stanovení strategie a zahájení jakéhokoli procesu je pochopení toho, kde se právě nacházíte. Přezkoumání a analýza současného procesu návrhu vaší organizace vám pomůže lépe pochopit, jaký návrh systému je pro vaši značku nejvhodnější. Položte si následující otázky:

• Jaký je současný přístup vaší organizace k návrhu?
• Jaké stávající nástroje vaše organizace využívá?

Ujistěte se, že jste vyhodnotili úroveň vyspělosti návrhu produktového týmu. To vám pomůže při hrubém odhadu času potřebného k implementaci nového systému ve vaší organizaci.

2. Určete abecedu své značky

Abeceda značky by vedla k identitě značky, tj. hodnotám značky a produktu a jazyku značky. Jazyk značky zahrnuje tvary, písma, barvy, animace, hlas a tón.

Designéři budou používat vizuální jazyk definovaný abecedou značky. Pochopit identitu a jazyk značky vám pomůže prostudování směrnic pro značku a rozhovor se zainteresovanými stranami.

3. Provedení auditu současného produktu AI

Provedení auditu uživatelského rozhraní stávajícího produktu vám pomůže vyřešit hlavní problém návrhu produktu: duplicitu návrhu. Cílem auditu je dosáhnout dvou cílů.

• Upozorněte na oblasti v rámci produktu s významnými nesrovnalostmi.
• Rozpoznejte nejpoužívanější a nejdůležitější prvky výrobku.

Audit uživatelského rozhraní je vícestupňový proces. Klíčová je identifikace a analýza hlavních vlastností uživatelského rozhraní a jejich využití v komponentách. Můžete použít dostupné nástroje pro zjištění počtu jedinečných barev a písem v souborech stylů. Každý návrh webu pak můžete dále rozdělit na jednotlivé prvky.

4. Stanovte zásady návrhu systému

Pro vytvoření vynikajícího uživatelského zážitku je nezbytné pochopit důvody, které stojí za rozhodnutími o návrhu. Kromě toho jasný soubor cílů usnadňuje definování principů designu a koordinaci s týmy.

Chcete mít systémový proces návrhu? Začněte těmito otázkami:

• Co vytváříte
• Proč to děláte
• Jak ji postavíte

Zásady designu musí odrážet hodnoty a vizi vaší značky.

5. Vytvoření knihovny komponent

Tato knihovna, známá také jako knihovna vzorů, by měla obsahovat všechny funkční a dekorativní prvky uživatelského rozhraní. Vyhodnoťte komponenty podle projektu, potřeb uživatelů a obchodních cílů a ponechte si ty, které potřebujete.

6. Stanovení pravidel

Návrhové systémy nejsou konstruovány tak, aby omezovaly návrháře na určitý směr návrhu. Naopak, mají pouze poskytnout designérům a vývojářům základní rámec, který rozšiřuje tvůrčí směr a dává prostor pro inovace.

Jedná se o dva přístupy k pravidlům Design System, jak je zmiňuje Alla Kholmatova ve své knize:

• Přísná pravidla - návrháři a vývojáři se při zavádění nových vzorů nebo komponent řídí přísným postupem.
• Volná pravidla - Tato pravidla umožňují návrhářům a vývojářům tvořit bez dodržování přísných omezení, pokud se domnívají, že to povede k lepšímu designu.

Stejně jako v mnoha jiných oblastech života je důležité najít správnou rovnováhu mezi těmito pravidly, aby byl produkt konzistentní a zároveň kreativní.

7. Zvolte si model řízení

Dynamické, neustále se vyvíjející návrhové systémy vyžadují jednoduchý proces schvalování a provádění změn. Existují tři modely řízení:

• Solitérní model - jednotlivec nebo skupina jednotlivců přímo "řídí" proces návrhu systému.
• Centralizovaný model - jeden tým má na starosti a řídí vývoj systému.
• Federativní model - proces návrhu systému vede více lidí z několika skupin.

Každý z těchto modelů má své výhody i nevýhody, ale zejména model osamoceného pracovníka může vést k tomu, že se jeden odpovědný pracovník stane úzkým místem pro provádění mnoha úkolů. Nejlepší je použít kombinaci různých modelů v souladu s vašimi potřebami.

8. Definujte strukturu složek

Duplicita funkčních komponent je v konstrukčních systémech významným problémem. Výsledkem je nepružný systém, který vyžaduje, aby návrháři (a vývojáři) vytvářeli nové prvky při každém novém scénáři.

Úspěšné návrhy systémů jsou velmi dobře opakovaně použitelné a umožňují uživatelům používat je jako základ pro své produkty. Proto se doporučuje vyvíjet prvky, které lze opakovaně použít v různých obsazích.

Kritéria pro opakovaně použitelné a škálovatelné komponenty:

• Modulární - nezávislé komponenty a vyměnitelné prvky.
• Složitelnost - Fúzování stávajících komponent za účelem vytvoření nových.
• Přizpůsobitelné - přizpůsobitelné komponenty, které fungují v mnoha různých kontextech.

9. Ujistěte se, že všechny týmy používají jednotný jazyk

Účelem návrhového systému je mimo jiné usnadnit bezproblémovou týmovou práci. Proto je integrace systému do pracovního procesu týmů zásadní. Zvyšuje produktivitu a zároveň přináší hodnotu členům týmu.

Lepší pochopení toho, jak různí lidé používají návrhový systém v počátečním procesu integrace, vám může pomoci systém odpovídajícím způsobem upravit.

10. Pravidelné předávání změn

Proces návrhu systému se vyvíjí spolu s organizací a nemůže být statický. Proto je po zavedení systému do organizace nezbytné komunikovat o všech změnách a průběžně organizaci informovat.

Stručný a dobře udržovaný seznam změn může uživatelům pomoci pochopit různé aktualizace a jejich dopad na jejich práci.

Tři vzorové příklady pro začátek

Návrhový systém Atlassian

(https://atlassian.design/)

Atlassian Design System, známá australská společnost zabývající se podnikovým softwarem, si klade za cíl zajistit bezproblémovou spolupráci mezi agilními, rozptýlenými týmy po celém světě.

Trello a Jira, dva široce používané nástroje společnosti Atlassian pro spolupráci, plně vystihují filozofii designu společnosti. Tato filozofie spočívá ve využití digitálních zkušeností ke zvýšení produktivity a celkového potenciálu týmů i jednotlivých členů týmu.

Atlassian Design System nabízí agilní techniky a efektivní sledování každé fáze projektu, od plánování produktu až po jeho dodání. To v konečném důsledku přináší přínosné výsledky tvorby a dodávek produktů. Jejich návrhový systém zahrnuje především:

1. Pokyny pro navrhování
2. Standardy značky
3. Produkt
4. Ilustrace
5. Vytváření prototypů
6. Marketing
7. Osobnost

Návrhový systém IBM

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

IBM je ukázkovým příkladem velkého IT podniku, který působí celosvětově a řídí se vlastním systémem návrhu.

Jejich možnosti zahrnují vše od obchodního poradenství a financování až po tvorbu softwaru, hosting/správu IT a řešení, která propojují software s hardwarem.

Základním principem společnosti IBM je neustále řídit pokrok, ať už jde o lidskou společnost nebo značku, pomocí vědy, rozumu a intelektu.

Podle IBM je dobrý design nejen nutností, ale také závazkem vůči uživatelům. Zde jsou některé z význačných funkcí jejich systému Carbon Design System, který poskytuje vývojářům a designérům pracujícím s aplikacemi Adobe, Axure a Sketch množství nástrojů a zdrojů:

1. Vizualizace dat
2. Vzory
3. Komponenty
4. Pokyny
5. Výukové programy

Systém Uber Design

(https://baseweb.design/)

Všichni jsme alespoň jednou jeli Uberem. Tato americká technologická společnost si zakládá na pohybu, včetně rozvozu jídla, spolujízdy, vzájemného sdílení jízd a mikromobility pomocí koloběžek a elektrokol.

Uber potřebuje efektivní systémový design, aby tento typ služby bezchybně fungoval ve všech dílčích značkách, interních značkách, produktech a projektech.

Hlavními atributy systému Uber Design System jsou:

1. Architektura značky
2. Složení
3. Tón hlasu
4. Pohyb
5. Ilustrace
6. Fotografie
7. Ikonografie
8. Barva
9. Logo
10. Typografie

Pokyny, které je třeba znát před vytvořením prvního návrhového systému

1. Včasná a jasná komunikace je váš nový nejlepší přítel

Může být komplikované zapojit interní spotřebitele ihned. Ve skutečnosti může jejich zpětná vazba proces brzdit, pokud je nejednoznačná, poskytnutá příliš brzy v cyklu alfa nebo beta verze nebo není užitečná.

Řekněte svým zákazníkům, uživatelům návrhového systému, co potřebujete, abyste si zajistili konstruktivní zpětnou vazbu. Pokud se nacházíte v raném cyklu před vydáním systému, buďte upřímní a jasně řekněte, jaké přesně podněty chcete. Tím dáte najevo, že hledáte nejvýznamnější nedostatky produktu, a ne kritiku na vysoké úrovni.

Dávejte si pozor na přílišné přemýšlení, uvadání mysli, ale neváhejte nadměrně komunikovat.

2. Vaše kroky nejsou to jediné, co musíte sledovat.

Klíčovou chybějící částí stanovení priorit je často sledování využití návrhových systémů. Je nezbytné pochopit, kde je systém používán, kým, jak často a jaká je četnost aktualizací.

Zavedení každodenního statistického sběru informací o tom, které týmy používají přesně které verze knihovny, umožňuje spravedlivě pochopit míru přijetí, aktualizace a downgradu.

Když identifikujete týmy, které aktualizují jen zřídka, můžete se přesunout k problémům, které aktualizaci blokují, a následně je odstranit.

3. Mechanismy zpětné vazby jsou stejně podceňované jako Rhaeghal z GOT

Abyste zajistili, že váš systém bude pro uživatele nejen cenný, ale také něco, čeho se budou cítit součástí a na čem se budou aktivně podílet, bude klíčovým prvkem jednoduchý, ale přímočarý způsob, jak mohou lidé poskytovat zpětnou vazbu (Slack, e-mail atd.) a přispívat do systému.

Vždy poskytněte pokyny, jak a kde poskytnout zpětnou vazbu na co nejvíce místech, a nikdy nic nepředpokládejte, zejména to, že ji uživatel najde na místě, které považujete za nejzřetelnější.

Návrhový systém je severní hvězda, kterou vaše organizace potřebuje

Úspěšný a dobře propracovaný systém designu se stává součástí samotné páteře společnosti, což vede ke konzistentním a zesíleným zážitkům. Designéři a vývojáři navíc získají možnost lépe komunikovat účel produktu, místo aby zůstali u skládání základních stavebních kamenů.

Partnerem při realizaci návrhu vám může být každý odborník, ale pouze specialista na design identifikuje aktuální problémy, výzvy a touhy a vytvoří systém designu speciálně pro vás. Nyní není čas čekat. S tímto rozsáhlým průvodcem, jak vytvořit systém designu, vás od kompletní transformace vašeho výrobního procesu dělí jen iniciativa.

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