Samm-sammult juhised disainisüsteemi loomiseks

Intro

Praegusel kõikjal ja igal pool kättesaadavuse ajastul on kõikjalolek muutunud normiks. Samas on ka teada, et järjepidevus on usaldusväärsus. Kasutajad on nüüd teadlikumad. Kiire ja sujuv kogemus on põhiline ootus, sõltumata kasutajaliidesest.

Lisaks sellele on aeg vara, mida te ei saa endale lubada raiskamist. Kõigest sellest peaks piisama, et saata teid oma veebisaidi või kasutajaliidese jaoks rohkem tegema. Kuid püüda olla järjepidev ja vigadeta 50 erineva komponendi disainis on suur ülesanne.

Trummimuusika "Design System" on siin, et muuta teie elu lihtsaks.

Mis on disainisüsteem?

Disainisüsteem on selgelt dokumenteeritud taaskasutatavate komponentide ulatuslik arhiiv, mida tootemeeskond saab kasutada digitaalsete kogemuste loomiseks. Teisisõnu, pidage disainisüsteeme ettevõtte jaoks disainiga seoses ühtseks tõeallikaks.

Disainisüsteem on rohkem kui stiilijuhendid või musterraamatukogud, see on pidevalt arenev. Seda erinevate üksustega, sealhulgas UX-disainiga seotud suuniste ökosüsteemi saab kasutada mis tahes projekti ehitusklotside raamistikuna, et kõik komponendid oleksid järjepidevad ja sobiksid brändiga.

Kuigi disainisüsteem on kasulik nii alustavatele, kasvavatele ettevõtetele kui ka ettevõtetele, muutub see toote arenedes oluliseks, mittekaubeldavaks varaks. See võib positiivselt mõjutada ka ärieesmärke, töökorraldust, meeskonnatööd, kasutajakogemust ja üldist brändikogemust.

Millised on disainisüsteemi eelised?

Mõned süsteemi disaini rakendamise eelised on järgmised

1. Suurendab tõhusust, vähendades samal ajal aega - Iga projekteerimissüsteemi peamine eelis on võimalus kiiresti luua ja taasluua projekteerimis- ja arendustöid. Meeskonnad saavad kasutada eelnevalt valmistatud elemente, et vähendada vajadust pidevalt ratast uuesti leiutada ja vähendada ebajärjekindluse riski.
2. Parandab visuaalset järjepidevust lehekülgede ja kanalite lõikes - kogu organisatsiooni hõlmava kujundussüsteemi puudumine võib viia ebaühtlase visuaalse kujunduse, killustatud kasutajakogemuse või brändist eraldatuse tekkimiseni. Ühtsed standardid aitavad ka suuremate ümberkujunduste või visuaalsete kaubamärkide mastaabis haldamisel.
3. Edendab ühtset keelt - ühine disainikeel vähendab võimalust, et disaini- või arendusaeg läheb raisku, kuna eri valdkondade meeskondade vahel ja nende sees ei suhelda õigesti.
4. Võimaldab paremini keskenduda keerulisematele probleemidele - meeskonnad saavad paremini lahendada keerulisi probleeme, näiteks teabe prioritiseerimine, teekonna juhtimine jne, kui on loodud lihtsad kasutajaliidese komponendid ja need on üheselt mõistetavad.
5. Toimib referents- ja õppevahendina kaastöötajatele - Disainisüsteem silub sisseelamisprotsessi personali muutuste korral. Samuti aitab see lihtsustada uute üksikute panustajate sisenemist UI UX-disaini või sisu loomisse.
6. aitab kaasa tugeva ja ajatu brändi loomisele - Disainisüsteemi eesmärk on kommunikeerida konkreetset identiteeti ja disaini, mis seisab toodete taga. See aitab luua mõjusaid kaubamärke ja aitab inimestel kaubamärgikogemust meelde jätta. See paneb inimesed end brändiga rohkem seotuna tundma ja seda rohkem usaldama.

Kümnest sammust koosnev juhend disainisüsteemi loomiseks

Oleme välja töötanud kümneetapilise protsessi, mis aitab teie ettevõttel luua disainisüsteemi.

1. Analüüsige põhjalikult oma olemasolevat projekteerimisprotsessi.

Esimene samm strateegia koostamisel ja mis tahes protsessi algatamisel on mõista, kus te praegu olete. Teie organisatsiooni praeguse kujundusprotsessi läbivaatamine ja analüüsimine võib aidata teil paremini mõista teie brändile kõige paremini sobivat süsteemidisaini. Esitage endale järgmised küsimused:

• Milline on teie organisatsiooni praegune lähenemine disainile?
• Milliseid olemasolevaid vahendeid teie organisatsioon kasutab?

Veenduge, et hindate tootemeeskonna disainiküpsuse taset. See aitab teil jämedalt jõuda uue süsteemi juurutamiseks vajaliku ajani teie organisatsioonis.

2. Määrake oma brändi tähestik

Brändi tähestik viiks brändi identiteedini, st brändi ja toote väärtuste ning brändikeeleni. Brändikeel koosneb kujunditest, kirjatüüpidest, värvidest, animatsioonidest, häälest ja toonist.

Disainerid kasutavad visuaalset keelt, mis on määratletud kaubamärgi tähestiku järgi. Brändi suuniste läbivaatamine ja sidusrühmadega rääkimine aitab teil mõista brändi identiteeti ja keelt.

3. Praeguse toote AI auditi läbiviimine

Praeguse toote kasutajaliidese auditi läbiviimine aitab teil lahendada peamist tootekujunduse probleemi: disaini dubleerimist. Auditi eesmärk on saavutada kaks eesmärki -

• Juhime tähelepanu olulistele vastuoludele toote sees.
• Tehke kindlaks toote kõige enam kasutatavad ja olulised elemendid.

UI audit on mitmeastmeline protsess. Oluline on tuvastada ja analüüsida peamisi kasutajaliidese omadusi ja nende kasutamist komponentides. Saate kasutada olemasolevaid vahendeid, et näha unikaalsete värvide ja kirjatüüpide arvu oma stiililehtedes. Seejärel saate iga veebisaidi kujunduse edasi jaotada üksikuteks elementideks.

4. Kehtestage oma süsteemi projekteerimisprintsiibid

Suurepärase kasutajakogemuse loomiseks on hädavajalik mõista disainiotsuste põhjuseid. Lisaks sellele muudavad selged eesmärgid disainipõhimõtete määratlemise ja meeskonnaga kooskõlastamise lihtsamaks.

Kas soovite disainisüsteemi protsessi? Alustage nendest küsimustest:

• Mida te loote
• Miks sa seda teed
• Kuidas te seda ehitate

Disainiprintsiibid peavad peegeldama teie brändi väärtusi ja visiooni.

5. Komponentide raamatukogu loomine

See, mida tuntakse ka kui mustrite raamatukogu, peaks sisaldama kõiki teie kasutajaliidese funktsionaalseid ja dekoratiivseid elemente. Hinnake komponente vastavalt projektile, kasutajate vajadustele ja ärieesmärkidele ning säilitage need, mida vajate.

6. Kehtestada eeskirjad

Projekteerimissüsteemid ei ole loodud selleks, et piirata projekteerijaid konkreetse projekteerimissuuna suhtes. Vastupidi, see peaks vaid andma disaineritele ja arendajatele põhiraamistiku, mis laiendab loomingulist suunda ja võimaldab ruumi uuendustele.

Need on kaks lähenemist disainisüsteemi reeglitele, nagu on mainitud Alla Kholmatova raamatus:

• Ranged reeglid - disainerid ja arendajad järgivad uute mustrite või komponentide kasutuselevõtmisel ranget protsessi.
• Lahtised reeglid - Need reeglid võimaldavad disaineritel ja arendajatel luua ilma rangete piirangute järgimata, kui nad usuvad, et see annab parema disaini.

Nagu paljudes muudes eluvaldkondades, on oluline leida õige tasakaal nende reeglite vahel, et toode oleks järjepidev ja samas loominguline.

7. Valige oma juhtimismudel

Dünaamilised, pidevalt arenevad projekteerimissüsteemid nõuavad lihtsat muudatuste heakskiitmise ja rakendamise protsessi. On olemas kolm juhtimismudelit:

• Üksikmudel - Üksikisik või üksikisikute rühm "valitseb" otseselt projekteerimissüsteemi protsessi.
• Tsentraliseeritud mudel - üks meeskond vastutab ja juhib süsteemi arengut.
• Liitmudel - süsteemi projekteerimise protsessi juhib mitu inimest mitmest rühmast.

Kuigi igal neist mudelitest on omad plussid ja miinused, võib eelkõige üksikmudel viia selleni, et üks vastutav isik muutub paljude ülesannete täitmise kitsaskohaks. Parim valik on kasutada erinevate mudelite kombinatsiooni, mis on kooskõlas teie vajadustega.

8. Komponentide struktuuri määratlemine

Funktsionaalsete komponentide dubleerimine on projekteerimissüsteemides märkimisväärne väljakutse. Selle tulemuseks on paindumatu süsteem ja see nõuab, et disainerid (ja arendajad) looksid iga kord uue stsenaariumi korral uusi elemente.

Edukad süsteemidisainid on väga hästi taaskasutatavad ja võimaldavad kasutajatel kasutada neid oma toodete alusena. Seega on soovitatav arendada elemente, mida saab eri sisudes uuesti kasutada.

Taaskasutatavate ja skaleeritavate komponentide kriteeriumid:

• Modulaarne - iseseisvad komponendid ja vahetatavad elemendid.
• Kombineeritav - olemasolevate komponentide ühendamine uute komponentide loomiseks
• Kohandatavad - Kohandatavad komponendid, mis töötavad paljudes kontekstides.

9. Veenduge, et kõik meeskonnad kasutavad ühtset keelt.

Disainisüsteemi eesmärk on muu hulgas hõlbustada sujuvat meeskonnatööd. Seega on süsteemi integreerimine meeskondade töövoogudesse väga oluline. See suurendab tootlikkust, pakkudes samal ajal meeskonnaliikmetele väärtust.

Parema arusaama saamine sellest, kuidas erinevad inimesed kasutavad projekteerimissüsteemi algses integratsiooniprotsessis, aitab teil süsteemi vastavalt muuta.

10. Edastage muudatusi regulaarselt

Disainisüsteemi protsess areneb koos organisatsiooniga ja ei saa olla staatiline. Seetõttu on pärast süsteemi juurutamist organisatsioonis oluline teavitada kõigist muudatustest ja hoida organisatsiooni kursis.

Lühike ja hästi hooldatud muudatuste logi aitab kasutajatel mõista erinevaid uuendusi ja nende mõju nende tööle.

Kolm eeskujulikku näidet, mis aitavad teil alustada

Atlassian disainisüsteem

(https://atlassian.design/)

Austraalia kuulsa ettevõtetarkvara ettevõtte Atlassian Design System eesmärk on pakkuda sujuvat koostööd agiilsete, hajutatud meeskondade vahel kogu maailmas.

Trello ja Jira, kaks Atlassiani laialdaselt kasutatavat koostöövahendit, kajastavad täielikult ettevõtte disainifilosoofiat. See filosoofia seisneb digitaalse kogemuse kasutamises, et suurendada meeskondade ja üksikute meeskonnaliikmete tootlikkust ja üldist potentsiaali.

Seda arvestades pakub Atlassian Design System agiilseid meetodeid ja tõhusat jälgimist projekti igas etapis, alates toote planeerimisest kuni tarnimiseni. See annab lõppkokkuvõttes kasulikke tulemusi toodete loomisel ja tarnimisel. Nende disainisüsteem sisaldab peamiselt järgmist:

1. Disaini suunised
2. Brändi standardid
3. Toode
4. Illustratsioon
5. Prototüüpimine
6. Turundus
7. Isiksus

IBMi projekteerimissüsteem

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

IBM on suurepärane näide suurest IT-ettevõttest, mis tegutseb ülemaailmselt ja järgib oma disainisüsteemi.

Nende võimalused hõlmavad kõike alates ärinõustamisest ja rahastamisest kuni tarkvara loomise, IT-hostingu/halduse ja lahendusteni, mis ühendavad tarkvara ja riistvara.

IBMi aluspõhimõte on pidevalt edendada progressi, olgu selleks siis inimühiskond või kaubamärk, kasutades selleks teadust, mõistust ja intellekti.

IBMi sõnul ei ole hea disain mitte ainult vajadus, vaid ka kohustus kasutajate ees. Siin on mõned nende Carbon Design Systemi silmapaistvad funktsioonid, mis pakuvad Adobe'i, Axure'i ja Sketchiga töötavatele arendajatele ja disaineritele hulgaliselt vahendeid ja ressursse:

1. Andmete visualiseerimine
2. Mustrid
3. Komponendid
4. Suunised
5. Tutorials

Uberi disainisüsteem

(https://baseweb.design/)

Me kõik oleme vähemalt korra Uberi sõitnud. Ameerika tehnoloogiaettevõte tugineb liikumisele, sealhulgas toidu kättetoimetamisele, sõidujagamisele, vastastikuse sõidujagamisele ja mikroliikuvusele, kasutades rollereid ja elektrilisi jalgrattaid.

Uber vajab tõhusat süsteemidisaini, et seda tüüpi teenus toimiks laitmatult kõigis alambrändides, sisemärkides, toodetes ja projektides.

Uberi disainisüsteemi peamised omadused on järgmised:

1. Brändi arhitektuur
2. Koostis
3. Hääle toon
4. Liikumine
5. Illustratsioon
6. Fotograafia
7. Ikonograafia
8. Värv
9. Logo
10. Tüpograafia

Näpunäited, mida peaks teadma enne oma esimese disainisüsteemi loomist

1. Varajane ja selge suhtlemine on teie uus parim sõber

Võib olla keeruline kaasata oma sisemisi tarbijaid kohe. Tegelikult võib nende tagasiside takistada protsessi, kui see on ebaselge, kui see antakse liiga vara alfa- või beetaversioonitsüklis või kui see ei ole kasulik.

Öelge oma klientidele, disainisüsteemi kasutajatele, mida te vajate, et tagada konstruktiivse tagasiside saamine. Kui olete varajases eelväljastamise tsüklis, olge aus ja selgitage, millist täpset sisendit te soovite. See näitab, et otsite toote kõige olulisemaid puudusi, mitte aga kõrgekvaliteedilist kriitikat.

Olge tähelepanelik, et ei mõtleksite liiga palju, närvitsedes oma meelt, kuid ärge kartke ka liiga palju suhelda.

2. Teie sammud ei ole ainus asi, mida peate jälgima.

Prioriteetide seadmisel on sageli oluline puuduv osa projekteerimissüsteemide kasutamise jälgimine. On hädavajalik mõista, kus süsteemi kasutatakse, kes seda kasutab, kui tihti ja kui sageli ning kui sageli uuendusi tehakse.

Igapäevane statistiline kogumine selle kohta, millised meeskonnad kasutasid täpselt milliseid raamatukogu versioone, võimaldab õiglaselt mõista kasutuselevõtu, uuendamise ja alandamise määra.

Kui tuvastate meeskonnad, kes harva uuendavad, saate teada, millised probleemid takistavad uuendamist, ja seejärel saate need kõrvaldada.

3. Tagasisidemehhanismid on sama alahinnatud kui Rhaeghal GOTist.

Selleks, et teie süsteem ei oleks kasutajate jaoks mitte ainult väärtuslik, vaid ka midagi sellist, milles nad tunnevad end osana ja millesse nad on aktiivselt panustanud, on oluline, et inimestel oleks lihtsad, kuid lihtsad võimalused tagasiside andmiseks (Slack, e-post jne) ja süsteemi arendamiseks.

Andke alati juhiseid selle kohta, kuidas ja kus tagasisidet anda võimalikult paljudes valdkondades, ja ärge kunagi eeldage midagi, eriti seda, et kasutaja leiab selle kohas, mis teie arvates on kõige ilmsem.

Disainisüsteem on põhjatäht, mida teie organisatsioon vajab

Edukas, hästi välja töötatud disainisüsteem muutub ettevõtte selgroo osaks, mille tulemuseks on järjepidevad ja võimendatud kogemused. Lisaks saavad disainerid ja arendajad võimaluse paremini kommunikeerida toote eesmärki, selle asemel, et takerduda põhiliste ehitusplokkide kokkupanemisse.

Iga üldteadlane võib olla teie partner disainilahenduse elluviimisel, kuid ainult disainispetsialist tuvastab praegused probleemid, väljakutsed ja püüdlused, et kujundada disainisüsteem spetsiaalselt teie jaoks. Nüüd ei ole aeg oodata. Selle ulatusliku juhendi abil, kuidas luua disainisüsteem, olete oma tootmisprotsessi täielikust ümberkujundamisest vaid ühe algatuse kaugusel.

Viited

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