Vodnik po korakih za oblikovanje sistema oblikovanja

Uvod

V dobi dostopnosti povsod in vsepovsod je vseprisotnost postala pravilo. Vendar pa je znano tudi, da je doslednost verodostojnost. Uporabniki so zdaj bolj ozaveščeni. Hitra in nemotena izkušnja je osnovno pričakovanje, ne glede na vmesnik.

Poleg tega je čas dobrina, ki je ne smete zapraviti. Vse to bi moralo biti dovolj, da bi vas spodbudilo k temu, da bi s svojo spletno stranjo ali vmesnikom naredili več. Vendar pa je poskus, da bi bili pri oblikovanju brez napak dosledni pri 50 različnih sestavnih delih, velik zalogaj.

"Design System" je tu,da vam olajša življenje.

Kaj je oblikovalski sistem?

Oblikovalski sistem je obsežen arhiv jasno dokumentiranih sestavnih delov, ki jih je mogoče ponovno uporabiti in jih lahko ekipa izdelkov uporabi za ustvarjanje digitalnih izkušenj. Z drugimi besedami, oblikovalski sistemi so enotni vir resnice za podjetje na področju oblikovanja.

Oblikovalski sistem se nenehno razvija bolj kot vodniki slogov ali knjižnice vzorcev. Ta ekosistem smernic, povezanih z različnimi subjekti, vključno z oblikovanjem UX, se lahko uporablja kot okvir gradnikov za vsak projekt, da se zagotovi skladnost vseh komponent in skladnost z blagovno znamko.

Oblikovalski sistem je koristen tako za zagonska podjetja, rastoča podjetja kot tudi za podjetja, pri razvoju izdelka pa postane bistvena in nepogrešljiva prednost. Pozitivno lahko vpliva tudi na poslovne cilje, potek dela, timsko delo, uporabniško izkušnjo in splošno izkušnjo blagovne znamke.

Kakšne so prednosti oblikovalskega sistema?

Nekatere od prednosti izvajanja zasnove sistema so

1. Povečanje učinkovitosti in skrajšanje časa - Glavna prednost vsakega oblikovalskega sistema je možnost hitrega ustvarjanja in ponovnega ustvarjanja oblikovalskega in razvojnega dela. Ekipe lahko uporabljajo vnaprej pripravljene elemente, da zmanjšajo potrebo po nenehnem izumljanju kolesa in zmanjšajo tveganje nedoslednosti.
2. Izboljša vizualno skladnost med stranmi in kanali - pomanjkanje sistema oblikovanja v celotni organizaciji lahko privede do nedoslednih vizualnih podob, razdrobljene uporabniške izkušnje ali ločenosti od blagovne znamke. Skladen nabor standardov pomaga tudi pri upravljanju večjih preoblikovanj ali vizualnih sprememb blagovnih znamk v velikem obsegu.
3. Spodbuja enoten jezik - skupni jezik oblikovanja zmanjšuje možnost zapravljanja časa za oblikovanje ali razvoj zaradi nesporazumov znotraj različnih funkcionalnih skupin in med njimi.
4. Omogoča boljše osredotočanje na bolj zapletene težave - Ekipe lahko bolje rešujejo zapletene težave, kot so določanje prednosti informacij, upravljanje poti itd., če so ustvarjene preproste in nedvoumne komponente uporabniškega vmesnika.
5. služi kot referenčno in izobraževalno orodje za sodelavce - sistem oblikovanja olajša postopek uvajanja v primeru kadrovskih sprememb. Prav tako pomaga novim sodelavcem, da se lažje vključijo v oblikovanje UI UX ali ustvarjanje vsebine.
6. Prispevek k močni in brezčasni blagovni znamki - Namen oblikovalskega sistema je sporočati posebno identiteto in zasnovo izdelkov, ki jih spremlja. Pomaga ustvariti vplivne blagovne znamke in pomaga ljudem, da si zapomnijo izkušnjo z blagovno znamko. Zaradi tega se ljudje počutijo bolj povezane z blagovno znamko in ji bolj zaupajo.

Vodnik v desetih korakih za oblikovanje oblikovalskega sistema

Pripravili smo postopek v desetih korakih, ki bo vašemu podjetju pomagal ustvariti sistem oblikovanja.

1. Temeljito analizirajte obstoječi proces oblikovanja.

Prvi korak k oblikovanju strategije in začetku vsakega procesa je razumevanje, kje se trenutno nahajate. Pregled in analiza trenutnega procesa oblikovanja v vaši organizaciji vam lahko pomagata bolje razumeti oblikovanje sistema, ki je najprimernejše za vašo blagovno znamko. Zastavite si naslednja vprašanja:

• Kakšen je trenutni pristop k oblikovanju v vaši organizaciji?
• Katera obstoječa orodja uporablja vaša organizacija?

Ocenite stopnjo zrelosti oblikovanja ekipe za izdelek. To vam bo pomagalo pri grobem dostopu do časa, potrebnega za uvedbo novega sistema v vaši organizaciji.

2. Določite abecedo svoje blagovne znamke

Abeceda blagovne znamke vodi do identitete blagovne znamke, tj. vrednot blagovne znamke in izdelkov ter jezika blagovne znamke. Jezik blagovne znamke obsega oblike, pisave, barve, animacije, glas in ton.

Oblikovalci bodo uporabili vizualni jezik, ki ga določa abeceda blagovne znamke. Pri razumevanju identitete in jezika blagovne znamke vam lahko pomagajo pregled smernic blagovne znamke in pogovor z zainteresiranimi stranmi.

3. Izvedba revizije za trenutni izdelek AI

Z revizijo uporabniškega vmesnika trenutnega izdelka se boste lažje spopadli z velikim izzivom oblikovanja izdelka: podvajanjem oblikovanja. Z revizijo želite doseči dva cilja.

• Opozorite na področja v izdelku, ki so zelo neskladna.
• Prepoznajte najbolj uporabljene in bistvene elemente izdelka.

Revizija uporabniškega vmesnika je večstopenjski postopek. Ključnega pomena je prepoznavanje in analiziranje glavnih lastnosti uporabniškega vmesnika in njihove uporabe v komponentah. Uporabite lahko razpoložljiva orodja, da preverite število edinstvenih barv in pisav v svojih slogovnih listih. Vsako zasnovo spletnega mesta lahko nato dodatno razčlenite na posamezne elemente.

4. Določite načela zasnove vašega sistema

Če želite ustvariti odlično uporabniško izkušnjo, morate razumeti razloge za oblikovalske odločitve. Poleg tega je z jasnim naborom ciljev lažje opredeliti oblikovalska načela in se uskladiti z ekipami.

Želite imeti proces oblikovanja sistema? Začnite s temi vprašanji:

• Kaj ustvarjate
• Zakaj ga pripravljate
• Kako ga boste zgradili

Načela oblikovanja morajo odražati vrednote in vizijo vaše blagovne znamke.

5. Izgradnja knjižnice komponent

Ta knjižnica, znana tudi kot knjižnica vzorcev, mora vsebovati vse funkcionalne in dekorativne elemente vašega uporabniškega vmesnika. Komponente ocenite glede na projekt, potrebe uporabnikov in poslovne cilje ter ohranite tiste, ki jih potrebujete.

6. Določitev pravil

Oblikovalski sistemi niso zasnovani tako, da bi oblikovalce omejevali na določeno smer oblikovanja. Nasprotno, oblikovalcem in razvijalcem naj bi zagotovili le temeljni okvir, ki razširja ustvarjalno smer in omogoča prostor za inovacije.

Gre za dva pristopa k pravilom sistema za oblikovanje, kot je navedeno v knjigi Alle Kholmatove:

• Stroga pravila - Oblikovalci in razvijalci pri uvajanju novih vzorcev ali komponent upoštevajo strog postopek.
• Ohlapna pravila - Ta pravila omogočajo oblikovalcem in razvijalcem, da ustvarjajo brez upoštevanja strogih omejitev, če menijo, da je tako oblikovanje boljše.

Tako kot v mnogih drugih vidikih življenja je tudi tu treba najti pravo ravnovesje med temi pravili, da bo izdelek dosleden in hkrati ustvarjalen.

7. Izberite svoj model upravljanja

Dinamični, nenehno razvijajoči se sistemi načrtovanja zahtevajo enostaven postopek odobritve in izvajanja sprememb. Obstajajo trije modeli upravljanja:

• Samostojni model - Posameznik ali skupina posameznikov neposredno "upravlja" proces oblikovalskega sistema.
• Centralizirani model - ena ekipa je odgovorna in vodi razvoj sistema.
• Federativni model - postopek načrtovanja sistema vodi več ljudi iz več skupin.

Čeprav ima vsak od teh modelov svoje prednosti in slabosti, lahko zlasti model samskega dela povzroči, da posameznik, ki je za to odgovoren, postane ozko grlo pri izvajanju številnih nalog. Najbolje je uporabiti kombinacijo različnih modelov v skladu z vašimi potrebami.

8. Opredelitev strukture komponent

Podvajanje funkcionalnih komponent je velik izziv pri oblikovalskih sistemih. Posledica tega je neprilagodljiv sistem, ki od oblikovalcev (in razvijalcev) zahteva ustvarjanje novih elementov ob vsakem novem scenariju.

Uspešne zasnove sistemov so zelo uporabne in omogočajo uporabnikom, da jih uporabijo kot osnovo za svoje izdelke. Zato je priporočljivo razvijati elemente, ki jih je mogoče ponovno uporabiti v različnih vsebinah.

Merila za ponovno uporabne in skalabilne komponente:

• Modularni - neodvisni sestavni deli in zamenljivi elementi.
• Sestavljivi - Združite obstoječe komponente in ustvarite nove.
• Prilagodljive - Prilagodljive komponente, ki delujejo v različnih kontekstih.

9. Poskrbite, da bodo vse ekipe uporabljale enoten jezik

Namen oblikovalskega sistema je tudi omogočanje nemotenega skupinskega dela. Zato je vključitev sistema v delovni proces ekip bistvenega pomena. S tem se poveča produktivnost in hkrati zagotovi vrednost članom ekipe.

Z boljšim razumevanjem tega, kako različni ljudje uporabljajo sistem oblikovanja v začetnem procesu integracije, lahko sistem ustrezno spremenite.

10. Redno prenašajte spremembe

Proces oblikovalskega sistema se razvija skupaj z organizacijo in ne more biti statičen. Zato je po uvedbi sistema v organizacijo treba sporočiti vse spremembe in jo sproti obveščati.

Zgoščen in dobro vzdrževan seznam sprememb lahko uporabnikom pomaga razumeti različne nadgradnje in njihov vpliv na delo.

Trije vzorčni primeri za začetek

Oblikovalski sistem Atlassian

(https://atlassian.design/)

Atlassian Design System, znano avstralsko podjetje za programsko opremo za podjetja, želi zagotoviti nemoteno sodelovanje med agilnimi, razpršenimi ekipami po vsem svetu.

Trello in Jira, dve od Atlassianovih orodij za sodelovanje, ki se pogosto uporabljata, v celoti odražata filozofijo oblikovanja podjetja. Ta filozofija temelji na izkoriščanju digitalne izkušnje za povečanje produktivnosti in splošnega potenciala ekip in posameznih članov ekipe.

Atlassian Design System ponuja agilne tehnike in učinkovito sledenje vsaki posamezni fazi projekta, od načrtovanja izdelka do dostave. To navsezadnje prinaša koristne rezultate pri ustvarjanju in dobavi izdelkov. Njihov oblikovalski sistem vključuje predvsem:

1. Smernice za oblikovanje
2. Standardi blagovnih znamk
3. Izdelek
4. Ilustracija
5. Izdelava prototipov
6. Trženje
7. Osebnost

IBM Design System

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

IBM je odličen primer velikega IT-podjetja, ki deluje po vsem svetu in uporablja lasten sistem načrtovanja.

Njihove zmogljivosti vključujejo vse od poslovnega svetovanja in financiranja do ustvarjanja programske opreme, gostovanja/upravljanja IT in rešitev, ki povezujejo programsko in strojno opremo.

IBM-ovo temeljno načelo je, da z uporabo znanosti, razuma in intelekta nenehno spodbuja napredek, pa naj gre za človeško družbo ali blagovno znamko.

IBM meni, da dobra zasnova ni le nujnost, temveč tudi zaveza uporabnikom. Tukaj je nekaj njihovih izstopajočih funkcij sistema Carbon Design System, ki razvijalcem in oblikovalcem, ki delajo s programi Adobe, Axure in Sketch, zagotavljajo številna orodja in vire:

1. Vizualizacija podatkov
2. Vzorci
3. Komponente
4. Smernice
5. Učna gradiva

Sistem za oblikovanje Uber

(https://baseweb.design/)

Vsi smo vsaj enkrat uporabili Uber. Ameriško tehnološko podjetje temelji na gibanju, vključno z dostavo hrane, prevozi, medsebojnim deljenjem voženj ter mikromobilnostjo s skuterji in električnimi kolesi.

Uber potrebuje učinkovito zasnovo sistema, da lahko tovrstne storitve brezhibno delujejo v vseh podznamkah, notranjih blagovnih znamkah, izdelkih in projektih.

Glavne lastnosti sistema Uber Design System so:

1. Arhitektura blagovne znamke
2. Sestava
3. Ton glasu
4. Gibanje
5. Ilustracija
6. Fotografija
7. Ikonografija
8. Barva
9. Logotip
10. Tipografija

Smernice, ki jih morate poznati, preden ustvarite svoj prvi oblikovalski sistem

1. Zgodnja in jasna komunikacija je vaš novi najboljši prijatelj

Vključevanje notranjih potrošnikov je lahko zapleteno. Pravzaprav lahko njihove povratne informacije ovirajo proces, če so dvoumne, če so posredovane prezgodaj v ciklu alfa ali beta izdaje ali če niso koristne.

Svojim strankam, uporabnikom oblikovalskega sistema, povejte, kaj potrebujete, da boste dobili konstruktivne povratne informacije. Če ste v zgodnjem ciklu pred izdajo, bodite iskreni in jasno povejte, katere natančne podatke želite. To kaže, da iščete najpomembnejše pomanjkljivosti izdelka in ne kritike visoke natančnosti.

Bodite pozorni na pretirano razmišljanje in umirjanje uma, vendar se ne obotavljajte pri pretiranem komuniciranju.

2. Vaši koraki niso edina stvar, ki jo morate spremljati

Ključni manjkajoči del določanja prednostnih nalog je pogosto sledenje uporabi oblikovalskih sistemov. Nujno je treba razumeti, kje se sistem uporablja, kdo ga uporablja, kako pogosto in kako pogoste so posodobitve.

Z izvajanjem dnevnega statističnega zbiranja podatkov o tem, katere ekipe so uporabljale točno določene različice knjižnice, je mogoče pošteno razumeti stopnjo sprejemanja, nadgrajevanja in opuščanja.

Ko določite ekipe, ki redko posodabljajo, lahko ugotovite težave, ki preprečujejo nadgradnjo, in jih nato odpravite.

3. Mehanizmi povratnih informacij so podcenjeni kot Rhaeghal iz GOT

Da bi zagotovili, da vaš sistem za uporabnike ne bo le dragocen, temveč tudi nekaj, kar čutijo kot del sistema in k čemur so aktivno prispevali, je ključnega pomena, da imate preproste, a enostavne načine za dajanje povratnih informacij (Slack, e-pošta itd.) in prispevanje k razvoju sistema.

Vedno zagotovite navodila za zagotavljanje povratnih informacij na čim več področjih in nikar ne predvidevajte, da bo uporabnik našel povratne informacije na mestu, ki se vam zdi najbolj očitno.

Oblikovalski sistem je severna zvezda, ki jo potrebuje vaša organizacija

Uspešen, dobro oblikovan sistem oblikovanja postane del hrbtenice podjetja, kar omogoča dosledne in okrepljene izkušnje. Poleg tega oblikovalci in razvijalci dobijo priložnost, da bolje predstavijo namen izdelka, namesto da bi se zataknili pri sestavljanju osnovnih gradnikov.

Vsak splošni strokovnjak je lahko vaš partner pri oblikovanju, vendar le strokovnjak za oblikovanje prepozna trenutna vprašanja, izzive in želje ter oblikuje sistem oblikovanja posebej za vas. Zdaj ni čas za čakanje. S tem obsežnim vodnikom o tem, kako ustvariti oblikovalski sistem, vas od popolne preobrazbe vašega proizvodnega procesa loči le še pobuda.

Reference

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