Žingsnis po žingsnio dizaino sistemos kūrimo vadovas

Įvadas

Šiame visur ir visur prieinamų įrenginių amžiuje visuotinumas tapo norma. Tačiau taip pat gerai žinoma, kad nuoseklumas yra patikimumas. Vartotojai dabar yra sąmoningesni. Greita ir sklandi patirtis yra pagrindinis lūkestis, nepriklausomai nuo sąsajos.

Be to, laikas yra turtas, kurio negalite švaistyti. Viso to turėtų pakakti, kad norėtumėte padaryti daugiau su savo svetaine ar sąsaja. Tačiau bandyti nuosekliai ir be klaidų suderinti 50 skirtingų dizaino komponentų yra didelis iššūkis.

"Design System" yra čia,kad palengvintų jūsų gyvenimą.

Kas yra projektavimo sistema?

Projektavimo sistema - tai platus aiškiai dokumentuotų pakartotinai naudojamų komponentų archyvas, kuriuo produkto komanda gali naudotis kurdama skaitmeninę patirtį. Kitaip tariant, dizaino sistemas laikykite vieninteliu įmonės tiesos šaltiniu, susijusiu su dizainu.

Dizaino sistema yra labiau nei stilių vadovai ar pavyzdžių bibliotekos - ji nuolat tobulėja. Ši su įvairiais aspektais, įskaitant UX dizainą, susijusių gairių ekosistema gali būti naudojama kaip bet kokio projekto sudedamųjų dalių sistema, kad visi komponentai būtų nuoseklūs ir atitiktų prekės ženklą.

Dizaino sistema yra naudinga tiek pradedančiosioms įmonėms, tiek augančioms įmonėms, tiek įmonėms, tačiau kuriant produktą dizaino sistema tampa esminiu ir neginčijamu turtu. Ji taip pat gali daryti teigiamą įtaką verslo tikslams, darbo eigai, komandiniam darbui, naudotojų patirčiai ir bendrai prekės ženklo patirčiai.

Kokie yra projektavimo sistemos privalumai?

Kai kurie sistemos projekto įgyvendinimo privalumai yra šie.

1. Didina efektyvumą ir trumpina laiką - pagrindinis bet kurios projektavimo sistemos privalumas - galimybė greitai kurti ir atkurti projektavimo ir kūrimo darbus. Komandos gali naudoti iš anksto paruoštus elementus, kad nereikėtų nuolat išradinėti dviračio ir sumažėtų nenuoseklumo rizika.
2. Geresnis vizualinis nuoseklumas visuose puslapiuose ir kanaluose - nesant visos organizacijos dizaino sistemos, vizualiniai vaizdai gali būti nenuoseklūs, naudotojų patirtis gali būti fragmentiška, o prekės ženklas gali būti atskirtas. Nuoseklus standartų rinkinys taip pat padeda valdyti didelius pertvarkymus ar vizualinius prekės ženklų pakeitimus.
3. Skatina vieningą kalbą - bendra projektavimo kalba sumažina galimybę švaistyti projektavimo ar kūrimo laiką dėl nesusikalbėjimo tarp įvairių sričių komandų ir tarp jų.
4. Komandos gali geriau spręstisudėtingesnes problemas, pavyzdžiui, informacijos prioritetų nustatymą, kelionių valdymą ir t. t., kai sukuriami paprasti ir nedviprasmiški vartotojo sąsajos komponentai.
5. Naudojama kaip informacinė ir mokomoji priemonė bendradarbiams - Projektavimo sistema palengvina įsidarbinimo procesą, jei pasikeičia darbuotojai. Ji taip pat padeda naujiems individualiems bendradarbiams lengviau įsitraukti į vartotojo sąsajos, UX dizaino ar turinio kūrimo procesą.
6. Prisideda prie stipraus ir nesenstančio prekės ženklo kūrimo - Dizaino sistemos tikslas - perteikti tam tikrą tapatybę ir dizainą, kuriuo grindžiami produktai, kuriais ji keliauja. Ji padeda kurti paveikius prekės ženklus ir padeda žmonėms įsiminti prekės ženklo patirtį. Dėl to žmonės jaučiasi labiau susiję su prekės ženklu ir labiau juo pasitiki.

Dešimties žingsnių dizaino sistemos kūrimo vadovas

Parengėme dešimties žingsnių procesą, kuris padės jūsų įmonei sukurti dizaino sistemą.

1. Kruopščiai išanalizuokite esamą projektavimo procesą.

Pirmasis žingsnis kuriant strategiją ir pradedant bet kokį procesą - suprasti, kokioje padėtyje šiuo metu esate. Peržiūrėję ir išanalizavę dabartinį savo organizacijos projektavimo procesą, galite geriau suprasti, koks sistemos dizainas geriausiai tinka jūsų prekės ženklui. Užduokite sau šiuos klausimus:

• Koks yra dabartinis jūsų organizacijos dizaino metodas?
• Kokias esamas priemones naudoja jūsų organizacija?

Įsitikinkite, kad įvertinote produkto komandos projektavimo brandos lygį. Tai padės jums apytiksliai įvertinti laiką, reikalingą naujai sistemai įdiegti jūsų organizacijoje.

2. Nustatykite savo prekės ženklo abėcėlę

Prekės ženklo abėcėlė lemia prekės ženklo identitetą, t. y. prekės ženklo ir produkto vertybes bei prekės ženklo kalbą. Prekės ženklo kalbą sudaro formos, šriftai, spalvos, animacija, balsas ir tonas.

Dizaineriai naudos vizualinę kalbą, apibrėžtą prekės ženklo abėcėle. Prekės ženklo gairių peržiūra ir pokalbiai su suinteresuotosiomis šalimis gali padėti suprasti prekės ženklo identitetą ir kalbą.

3. Atlikti dabartinio produkto AI auditą

Atlikę dabartinio produkto vartotojo sąsajos auditą, galėsite išspręsti pagrindinį produkto dizaino iššūkį - dizaino dubliavimą. Audito metu siekiama dviejų tikslų.

• Atkreipkite dėmesį į tas gaminio sritis, kuriose yra didelių neatitikimų.
• Atskirkite dažniausiai naudojamus ir svarbiausius gaminio elementus.

Naudotojo sąsajos auditas yra kelių etapų procesas. Labai svarbu nustatyti ir išanalizuoti pagrindines vartotojo sąsajos savybes ir jų panaudojimą komponentuose. Galite pasinaudoti turimomis priemonėmis, kad pamatytumėte unikalių spalvų ir šriftų skaičių savo stilių lentelėse. Tuomet kiekvieną svetainės dizainą galite toliau skaidyti į atskirus elementus.

4. Nustatykite savo sistemos projektavimo principus

Norint sukurti puikią naudotojo patirtį, būtina suprasti dizaino sprendimų priežastis. Be to, turint aiškius tikslus, lengviau apibrėžti dizaino principus ir koordinuoti veiksmus su komandomis.

Norite turėti projektavimo sistemos procesą? Pradėkite nuo šių klausimų:

• Ką kuriate
• Kodėl jūs tai darote
• Kaip jį sukursite

Dizaino principai turi atspindėti jūsų prekės ženklo vertybes ir viziją.

5. Komponentų bibliotekos kūrimas

Taip pat vadinama modelių biblioteka, kurioje turėtų būti visi jūsų vartotojo sąsajos funkciniai ir dekoratyviniai elementai. Įvertinkite komponentus pagal projektą, naudotojų poreikius ir verslo tikslus ir išsaugokite tuos, kurių jums reikia.

6. Nustatyti taisykles

Projektavimo sistemos nėra sukurtos tam, kad apribotų dizainerių galimybes laikytis konkrečios projektavimo krypties. Atvirkščiai, jos turi tik suteikti dizaineriams ir kūrėjams pagrindinę sistemą, kuri išplečia kūrybinę kryptį ir suteikia erdvės naujovėms.

Tai du požiūriai į projektavimo sistemos taisykles, kaip minima Alos Cholmatovos knygoje:

• Griežtos taisyklės - dizaineriai ir kūrėjai, diegdami naujus modelius ar komponentus, laikosi griežto proceso.
• Šios taisyklės leidžia dizaineriams ir kūrėjams kurtinesilaikant griežtų apribojimų, jei, jų manymu, taip sukuriamas geresnis dizainas.

Kaip ir daugelyje kitų gyvenimo sričių, labai svarbu rasti tinkamą šių taisyklių pusiausvyrą, kad produktas būtų nuoseklus ir kartu kūrybingas.

7. Pasirinkite valdymo modelį

Dinamiškoms, nuolat tobulėjančioms projektavimo sistemoms reikalingas paprastas pakeitimų tvirtinimo ir įgyvendinimo procesas. Yra trys valdymo modeliai:

• Vienišas modelis - asmuo arba asmenų grupė tiesiogiai "valdo" projektavimo sistemos procesą.
• Centralizuotas modelis - už sistemą atsakinga viena komanda, kuri vadovauja sistemos raidai.
• Federacinis modelis - sistemos projektavimo procesui vadovauja keli žmonės iš kelių grupių.

Nors kiekvienas iš šių modelių turi savų privalumų ir trūkumų, vienišas modelis ypač gali lemti, kad vienas atsakingas asmuo gali tapti daugelio užduočių vykdymo kliūtimi. Geriausia yra naudoti įvairių modelių derinį, atitinkantį jūsų poreikius.

8. Komponentų struktūros apibrėžimas

Funkcinių komponentų dubliavimas yra didelis iššūkis projektavimo sistemose. Dėl to sistema tampa nelanksti, o projektuotojai (ir kūrėjai) turi kurti naujus elementus kiekvieną kartą, kai tik atsiranda naujas scenarijus.

Sėkmingi sistemų projektai yra labai tinkami naudoti pakartotinai, todėl naudotojai gali juos naudoti kaip savo produktų pagrindą. Todėl rekomenduojama kurti elementus, kuriuos galima pakartotinai naudoti skirtingo turinio projektuose.

Daugkartinio naudojimo ir keičiamo mastelio komponentų kriterijai:

• Modulinis - nepriklausomi komponentai ir keičiami elementai.
• Sudėtinis - sujungkite esamus komponentus, kad sukurtumėte naujus.
• Pritaikomi - pritaikomi komponentai, kurie veikia įvairiomis aplinkybėmis.

9. Užtikrinkite, kad visos komandos naudotų vieningą kalbą

Projektavimo sistemos paskirtis - palengvinti sklandų komandinį darbą. Todėl labai svarbu integruoti sistemą į komandų darbo procesą. Tai didina produktyvumą ir kartu teikia vertę komandos nariams.

Geriau suprasdami, kaip įvairūs žmonės naudojasi projektavimo sistema pradinio integravimo proceso metu, galėsite ją atitinkamai modifikuoti.

10. Reguliariai perduokite pokyčius

Projektavimo sistemos procesas vystosi kartu su organizacija ir negali būti statiškas. Todėl, įdiegus sistemą organizacijoje, būtina pranešti apie visus pakeitimus ir nuolat informuoti organizaciją.

Glaustas ir gerai prižiūrimas pakeitimų sąrašas gali padėti naudotojams suprasti įvairius atnaujinimus ir jų poveikį darbui.

Trys sektini pavyzdžiai pradžiai

"Atlassian" projektavimo sistema

(https://atlassian.design/)

"Atlassian Design System", garsi Australijos įmonių programinės įrangos bendrovė, siekia užtikrinti sklandų judrių, visame pasaulyje išsibarsčiusių komandų bendradarbiavimą.

"Trello" ir "Jira" - dvi plačiai naudojamos "Atlassian" bendradarbiavimo priemonės - visiškai atspindi bendrovės dizaino filosofiją. Šios filosofijos esmė - skaitmeninės patirties panaudojimas siekiant padidinti komandų ir atskirų komandos narių produktyvumą ir bendrą potencialą.

"Atlassian" projektavimo sistema siūlo judrius metodus ir veiksmingą kiekvieno projekto etapo - nuo produkto planavimo iki pristatymo - stebėjimą. Tai galiausiai duoda naudingų produktų kūrimo ir pristatymo rezultatų. Jų projektavimo sistemą daugiausia sudaro:

1. Projektavimo gairės
2. Prekės ženklo standartai
3. Produktas
4. Iliustracija
5. Prototipų kūrimas
6. Rinkodara
7. Asmenybė

IBM projektavimo sistema

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

IBM yra puikus pavyzdys didelės IT įmonės, veikiančios visame pasaulyje ir taikančios savo dizaino sistemą.

Jų galimybės apima viską - nuo verslo konsultacijų ir finansavimo iki programinės įrangos kūrimo, IT prieglobos ir (arba) valdymo bei sprendimų, kuriais programinė įranga sujungiama su technine įranga.

Pagrindinis IBM principas - nuolat skatinti pažangą, nesvarbu, ar tai būtų žmonių visuomenė, ar prekės ženklas, pasitelkiant mokslą, protą ir intelektą.

Pasak IBM, geras dizainas yra ne tik būtinybė, bet ir įsipareigojimas naudotojams. Štai keletas išskirtinių jų "Carbon Design System" funkcijų, kurios kūrėjams ir dizaineriams, dirbantiems su "Adobe", "Axure" ir "Sketch", suteikia daugybę įrankių ir išteklių:

1. Duomenų vizualizavimas
2. Modeliai
3. Komponentai
4. Gairės
5. Pamokos

"Uber" dizaino sistema

(https://baseweb.design/)

Visi bent kartą esame važiavę "Uber" automobiliu. Ši JAV technologijų bendrovė remiasi judėjimu, įskaitant maisto pristatymą, pavėžėjimą, dalijimąsi kelionėmis tarp savitarpio partnerių ir mikromobilumą naudojant paspirtukus ir elektrinius dviračius.

Kad tokio tipo paslauga veiktų nepriekaištingai, "Uber" reikia efektyvios sistemos, kuri būtų pritaikyta visiems subbendrams, vidiniams prekės ženklams, produktams ir projektams.

Pagrindinės "Uber Design System" savybės yra šios:

1. Prekės ženklo architektūra
2. Sudėtis
3. Balso tonas
4. Judėjimas
5. Iliustracija
6. Fotografija
7. Ikonografija
8. Spalva
9. Logotipas
10. Tipografija

Patarimai, kuriuos reikia žinoti prieš kuriant pirmąją dizaino sistemą

1. Ankstyvas ir aiškus bendravimas yra jūsų naujasis geriausias draugas

Gali būti sudėtinga iš karto įtraukti vidaus vartotojus. Tiesą sakant, jų atsiliepimai gali trukdyti procesui, jei jie yra dviprasmiški, pateikti per anksti alfa ar beta versijos ciklo metu arba nėra naudingi.

Pasakykite klientams, projektavimo sistemos naudotojams, ko jums reikia, kad gautumėte konstruktyvius atsiliepimus. Jei esate ankstyvajame išankstinio išleidimo cikle, būkite sąžiningi ir aiškiai nurodykite, kokios tiksliai informacijos norite. Tai rodo, kad ieškote svarbiausių gaminio trūkumų, o ne didelės apimties kritikos.

Saugokitės pernelyg didelio mąstymo, nušluostykite savo protą, bet nedvejodami per daug bendraukite.

2. Jūsų žingsniai nėra vienintelis dalykas, kurį reikia sekti

Svarbiausia trūkstama prioritetų nustatymo dalis dažnai yra projektavimo sistemų naudojimo stebėjimas. Būtina suprasti, kur, kas, kaip dažnai ir kaip dažnai naudojasi sistema ir kaip dažnai ją atnaujina.

Kasdien rinkdami statistinius duomenis apie tai, kurios komandos naudojo konkrečias bibliotekos versijas, galėsite teisingai suprasti, kaip sparčiai diegiamos, atnaujinamos ir mažinamos bibliotekos.

Kai nustatysite komandas, kurios retai atnaujina, galėsite išsiaiškinti problemas, trukdančias atnaujinti, ir vėliau jas pašalinti.

3. Grįžtamojo ryšio mechanizmai yra nepakankamai įvertinti kaip Rhaeghal iš GOT

Norint užtikrinti, kad jūsų sistema būtų ne tik vertinga naudotojams, bet ir kad jie jaustųsi jos dalimi ir aktyviai prisidėtų prie jos kūrimo, labai svarbu turėti paprastus, bet nesudėtingus būdus, kaip žmonės gali teikti atsiliepimus (Slack, el. paštu ir pan.) ir prisidėti prie sistemos kūrimo.

Visada pateikite instrukcijas, kaip ir kur pateikti atsiliepimus kuo daugiau sričių, ir niekada nieko nenumatykite, ypač to, kad naudotojas ras juos toje vietoje, kuri, jūsų manymu, yra akivaizdžiausia.

Projektavimo sistema - tai šiaurės žvaigždė, kurios reikia jūsų organizacijai

Sėkmingai sukurta dizaino sistema tampa įmonės pagrindo dalimi, o tai lemia nuoseklią ir sustiprintą patirtį. Be to, dizaineriai ir kūrėjai turi galimybę geriau perteikti produkto paskirtį, o ne sustingti, kai reikia surinkti pagrindinius blokus.

Bet kuris specialistas gali būti jūsų partneriu kuriant dizainą, tačiau tik dizaino specialistas nustato esamas problemas, iššūkius ir siekius, kad sukurtų specialiai jums skirtą dizaino sistemą. Dabar ne laikas laukti. Naudodamiesi šiuo išsamiu vadovu, kaip sukurti dizaino sistemą, esate tik per žingsnį nuo visiško gamybos proceso pertvarkymo.

Nuorodos

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