• UI & UX

Vaiheittainen opas suunnittelujärjestelmän luomiseen

  • Felix Rose-Collins
  • 6 min read
Vaiheittainen opas suunnittelujärjestelmän luomiseen

Intro

Tänä kaikkialta ja kaikkialla saavutettavuuden aikakautena kaikkialle pääsystä on tullut normi. Tiedetään kuitenkin myös, että johdonmukaisuus on uskottavuutta. Käyttäjät ovat nyt tietoisempia. Nopea ja sujuva käyttökokemus on perusodotus käyttöliittymästä riippumatta.

Lisäksi aika on voimavara, jota ei ole varaa tuhlata. Kaikkien näiden seikkojen pitäisi riittää siihen, että haluat tehdä enemmän verkkosivustollesi tai käyttöliittymällesi. On kuitenkin vaikea tehtävä yrittää olla johdonmukainen 50 eri komponentin kanssa ilman virheitä.

Rumpujen rummutusta varten "Design System" on täällä tekemässä elämästäsi helppoa.

Mikä on suunnittelujärjestelmä?

Suunnittelujärjestelmä on laaja arkisto selkeästi dokumentoituja uudelleenkäytettäviä komponentteja, joita tuotetiimi voi hyödyntää digitaalisten kokemusten luomisessa. Toisin sanoen, pidä suunnittelujärjestelmiä yrityksen yhtenä totuuden lähteenä suunnittelun osalta.

Suunnittelujärjestelmä on enemmän kuin tyylioppaat tai mallikirjastot, se kehittyy jatkuvasti. Tätä eri kokonaisuuksiin, myös UX-suunnitteluun, liittyvien ohjeiden ekosysteemiä voidaan käyttää minkä tahansa projektin rakennuspalikoiden kehyksenä, jotta voidaan varmistaa, että kaikki osat ovat johdonmukaisia ja vastaavat brändiä.

Suunnittelujärjestelmästä on hyötyä niin aloittaville yrityksille, kasvaville yrityksille kuin yrityksillekin, mutta se on olennainen ja neuvoteltavissa oleva voimavara tuotteen kehittyessä. Se voi myös vaikuttaa myönteisesti liiketoiminnan tavoitteisiin, työnkulkuun, tiimityöskentelyyn, käyttäjäkokemukseen ja yleiseen brändikokemukseen.

alt_text

Mitkä ovat suunnittelujärjestelmän edut?

Järjestelmäsuunnittelun toteuttamisessa on seuraavia etuja

  1. Lisää tehokkuutta ja lyhentää aikaa - Minkä tahansa suunnittelujärjestelmän ensisijainen etu on kyky luoda ja luoda uudelleen suunnittelu- ja kehitystyötä nopeasti. Tiimit voivat käyttää valmiita elementtejä vähentääkseen tarvetta keksiä pyörää jatkuvasti uudelleen ja vähentääkseen epäjohdonmukaisuuden riskiä.
  2. Parantaa visuaalista johdonmukaisuutta eri sivuilla ja kanavissa - Koko organisaation laajuisen suunnittelujärjestelmän puuttuminen voi johtaa epäjohdonmukaiseen visuaaliseen ilmeeseen, hajanaiseen käyttäjäkokemukseen tai brändistä irtautumiseen. Yhtenäiset standardit auttavat myös hallitsemaan laajoja uudelleensuunnitteluja tai visuaalisia uudelleenbrändäyksiä mittakaavassa.
  3. Edistää yhtenäistä kieltä - Yhteinen suunnittelukieli vähentää mahdollisuutta hukkaan menevään suunnittelu- tai kehitysaikaan, joka johtuu väärinkäsityksistä monialaisissa tiimeissä ja niiden välillä.
  4. Mahdollistaa paremman keskittymisen monimutkaisempiin ongelmiin - Tiimit pystyvät paremmin korjaamaan monimutkaisia ongelmia, kuten tietojen priorisointia, matkojen hallintaa jne., kun yksinkertaiset käyttöliittymäkomponentit on luotu ja yksiselitteisiä.
  5. Toimii referenssi- ja koulutusvälineenä osallistujille - Suunnittelujärjestelmä sujuvoittaa sisäänottoprosessia henkilöstön vaihtuessa. Se auttaa myös helpottamaan uusien yksittäisten tekijöiden siirtymistä UI UX-suunnitteluun tai sisällön luomiseen.
  6. Edistää vahvan ja ajattoman brändin luomista - Muotoilujärjestelmän tarkoituksena on viestiä tietynlaisesta identiteetistä ja muotoilusta sen matkustamien tuotteiden takana. Se auttaa luomaan vaikuttavia brändejä ja auttaa ihmisiä muistamaan brändikokemuksen. Tämä saa ihmiset tuntemaan enemmän yhteyttä brändiin ja luottamaan siihen enemmän.

Kymmenenvaiheinen opas suunnittelujärjestelmän rakentamiseen

Olemme laatineet kymmenvaiheisen prosessin, joka auttaa yritystäsi luomaan suunnittelujärjestelmän.

1. Analysoi perusteellisesti nykyinen suunnitteluprosessisi.

Ensimmäinen askel minkä tahansa prosessin suunnittelussa ja käynnistämisessä on sen ymmärtäminen, missä tilanteessa olet tällä hetkellä. Organisaatiosi nykyisen suunnitteluprosessin tarkastelu ja analysointi voi auttaa sinua ymmärtämään paremmin brändillesi parhaiten soveltuvan järjestelmäsuunnittelun. Kysy itseltäsi seuraavat kysymykset:

  • Mikä on organisaatiosi nykyinen suunnittelutapa?
  • Mitä nykyisiä työkaluja organisaatiosi käyttää?

Varmista, että arvioit tuotetiimin suunnittelun kypsyystason. Tämä auttaa sinua arvioimaan karkeasti uuden järjestelmän käyttöönottoon organisaatiossasi tarvittavan ajan.

2. Määritä brändisi aakkoset

Determine your Brand's Alphabet

Tapaa Ranktracker

All-in-One-alusta tehokkaaseen hakukoneoptimointiin

Jokaisen menestyvän yrityksen takana on vahva SEO-kampanja. Mutta kun tarjolla on lukemattomia optimointityökaluja ja -tekniikoita, voi olla vaikea tietää, mistä aloittaa. No, älä pelkää enää, sillä minulla on juuri oikea apu. Esittelen Ranktracker all-in-one -alustan tehokasta SEO:ta varten.

Olemme vihdoin avanneet Ranktrackerin rekisteröinnin täysin ilmaiseksi!

Luo ilmainen tili

Tai Kirjaudu sisään omilla tunnuksillasi

Brändin aakkoset johtaisivat brändi-identiteettiin eli brändi- ja tuotearvoihin sekä brändikieleen. Brändikieleen kuuluvat muodot, fontit, värit, animaatiot, ääni ja sävy.

Suunnittelijat käyttävät brändin aakkosten määrittelemää visuaalista kieltä. Brändiohjeiden tarkastelu ja sidosryhmien kanssa keskusteleminen voivat auttaa sinua ymmärtämään brändi-identiteettiä ja -kieltä.

3. Nykyisen tuotteen tekoälyä koskevan tarkastuksen suorittaminen

Nykyisen tuotteen käyttöliittymäauditointi auttaa sinua ratkaisemaan tärkeän tuotesuunnitteluhaasteen: suunnittelun päällekkäisyyden. Tarkastuksella pyritään saavuttamaan kaksi tavoitetta -

  • Kiinnitä huomiota niihin tuotteen osa-alueisiin, joissa on merkittäviä epäjohdonmukaisuuksia.
  • Tunnista tuotteen käytetyimmät ja olennaisimmat osat.

Unionin elintärkeiden infrastruktuureiden tarkastus on monivaiheinen prosessi. Keskeistä on tunnistaa ja analysoida tärkeimmät käyttöliittymäominaisuudet ja niiden käyttö komponenteissa. Voit käyttää saatavilla olevia työkaluja nähdäksesi tyylitiedostojen ainutlaatuisten värien ja kirjasintyyppien määrän. Tämän jälkeen voit edelleen pilkkoa jokaisen verkkosivuston suunnittelun yksittäisiin elementteihin.

4. Järjestelmän suunnitteluperiaatteiden määrittäminen

Erinomaisen käyttäjäkokemuksen luomiseksi on välttämätöntä ymmärtää suunnittelupäätösten taustalla olevat syyt. Lisäksi selkeät tavoitteet helpottavat suunnitteluperiaatteiden määrittelyä ja koordinointia tiimien kanssa.

Haluatko suunnittelujärjestelmäprosessin? Aloita näistä kysymyksistä:

  • Mitä sinä luot
  • Miksi teet siitä
  • Miten aiot rakentaa sen

Suunnitteluperiaatteiden on heijastettava brändisi arvoja ja visiota.

5. Rakenna komponenttikirjasto

Tämän myös kuviointikirjastoksi kutsutun kuvion tulisi sisältää kaikki käyttöliittymän toiminnalliset ja koristeelliset elementit. Arvioi komponentit projektin, käyttäjien tarpeiden ja liiketoiminnallisten tavoitteiden mukaan ja säilytä ne, joita tarvitset.

Build a Component Library

6. Sääntöjen laatiminen

Suunnittelujärjestelmiä ei ole rakennettu rajoittamaan suunnittelijoita tiettyyn suunnittelusuuntaan. Päinvastoin, sen on tarkoitus vain tarjota suunnittelijoille ja kehittäjille peruskehys, joka laajentaa luovaa suuntaa ja antaa tilaa innovoinnille.

Ne ovat kaksi lähestymistapaa Design System -sääntöihin, kuten Alla Kholmatovan kirjassa mainitaan:

  • Tiukat säännöt - Suunnittelijat ja kehittäjät noudattavat tiukkaa prosessia ottaessaan käyttöön uusia malleja tai komponentteja.
  • Löyhät säännöt - Nämä säännöt antavat suunnittelijoille ja kehittäjille mahdollisuuden luoda ilman tiukkoja rajoitteita, jos he uskovat, että se johtaa parempaan suunnitteluun.

Kuten monilla muillakin elämän osa-alueilla, on tärkeää löytää oikea tasapaino näiden sääntöjen välillä, jotta tuote on johdonmukainen ja samalla luova.

7. Valitse hallintomalli

Dynaamiset, jatkuvasti kehittyvät suunnittelujärjestelmät edellyttävät suoraviivaista prosessia muutosten hyväksymiseksi ja toteuttamiseksi. Hallintamalleja on kolme:

  • Yksinäinen malli - Yksilö tai ryhmä yksilöitä "hallitsee" suoraan suunnittelujärjestelmän prosessia.
  • Keskitetty malli - Yksi tiimi vastaa ja ohjaa järjestelmän kehitystä.
  • Federoitu malli - Järjestelmän suunnitteluprosessia johtavat useat henkilöt useista eri ryhmistä.

Vaikka kullakin näistä malleista on hyvät ja huonot puolensa, erityisesti yksinäinen malli voi johtaa siihen, että yhdestä vastuussa olevasta henkilöstä tulee pullonkaula monien tehtävien suorittamiselle. Paras vaihtoehto on käyttää eri mallien yhdistelmää, joka vastaa tarpeitasi.

8. Komponenttirakenteen määrittäminen

Toiminnallisten komponenttien päällekkäisyys on merkittävä haaste suunnittelujärjestelmissä. Tämä johtaa joustamattomaan järjestelmään ja edellyttää suunnittelijoilta (ja kehittäjiltä) uusien elementtien luomista aina uuden skenaarion syntyessä.

Onnistuneet järjestelmäsuunnitelmat ovat hyvin uudelleenkäytettäviä, ja käyttäjät voivat käyttää niitä tuotteidensa perustana. Näin ollen suositellaan sellaisten elementtien kehittämistä, joita voidaan käyttää uudelleen eri sisällöissä.

Tapaa Ranktracker

All-in-One-alusta tehokkaaseen hakukoneoptimointiin

Jokaisen menestyvän yrityksen takana on vahva SEO-kampanja. Mutta kun tarjolla on lukemattomia optimointityökaluja ja -tekniikoita, voi olla vaikea tietää, mistä aloittaa. No, älä pelkää enää, sillä minulla on juuri oikea apu. Esittelen Ranktracker all-in-one -alustan tehokasta SEO:ta varten.

Olemme vihdoin avanneet Ranktrackerin rekisteröinnin täysin ilmaiseksi!

Luo ilmainen tili

Tai Kirjaudu sisään omilla tunnuksillasi

Uudelleenkäytettävien ja skaalautuvien komponenttien kriteerit:

  • Modulaarinen - Itsenäiset komponentit ja vaihdettavat osat.
  • Yhdistettävissä - Yhdistä olemassa olevat komponentit uusien luomiseksi.
  • Mukautettavat - Mukautettavat komponentit, jotka toimivat monissa eri yhteyksissä.

9. Varmista, että kaikki tiimit käyttävät yhtenäistä kieltä.

Suunnittelujärjestelmän tarkoituksena on muun muassa helpottaa saumatonta tiimityötä. Näin ollen järjestelmän integroiminen tiimien työnkulkuun on elintärkeää. Se lisää tuottavuutta ja tuottaa samalla arvoa tiimin jäsenille.

Paremman ymmärryksen saaminen siitä, miten eri ihmiset käyttävät suunnittelujärjestelmää alkuperäisen integrointiprosessin aikana, voi auttaa sinua muokkaamaan järjestelmää sen mukaisesti.

10. Välitä muutokset säännöllisesti

Suunnittelujärjestelmäprosessi kehittyy organisaation mukana, eikä se voi olla staattinen. Siksi on tärkeää, että kun järjestelmä on otettu käyttöön organisaatiossa, kaikista muutoksista tiedotetaan ja organisaatio pidetään ajan tasalla.

Tiivis ja hyvin ylläpidetty muutosluettelo voi auttaa käyttäjiä ymmärtämään eri päivityksiä ja niiden vaikutusta heidän työhönsä.

Kolme esimerkillistä esimerkkiä alkuun pääsemiseksi

Atlassian suunnittelujärjestelmä

Atlassian Design System (https://atlassian.design/)

Atlassian Design System on kuuluisa australialainen yritysohjelmistoyritys, jonka tavoitteena on tarjota saumatonta yhteistyötä ketterille, hajallaan toimiville tiimeille maailmanlaajuisesti.

Trello ja Jira, kaksi Atlassianin laajalti käytettyä yhteistyövälinettä, kuvastavat täysin yrityksen suunnittelufilosofiaa. Tässä filosofiassa on kyse digitaalisen kokemuksen hyödyntämisestä tiimien ja yksittäisten tiimin jäsenten tuottavuuden ja kokonaispotentiaalin lisäämiseksi.

Atlassian Design System tarjoaa kuitenkin ketteriä tekniikoita ja tehokasta seurantaa projektin kaikissa vaiheissa, tuotesuunnittelusta toimitukseen. Tämä tuottaa viime kädessä hyödyllisiä tuloksia tuotteiden luomisessa ja toimittamisessa. Heidän suunnittelujärjestelmäänsä kuuluu pääasiassa:

  1. Suunnitteluohjeet
  2. Tuotemerkin standardit
  3. Tuote
  4. Kuvitus
  5. Prototyyppien rakentaminen
  6. Markkinointi
  7. Persoonallisuus

IBM Design System

IBM Design System (https://carbondesignsystem.com/migrating/guide/design)

IBM on malliesimerkki suuresta IT-yrityksestä, joka toimii maailmanlaajuisesti ja noudattaa omaa suunnittelujärjestelmäänsä.

Heidän toimintavalmiuksiinsa kuuluu kaikki liiketoimintaneuvonnasta ja rahoituksesta ohjelmistojen luomiseen, tietotekniikan isännöintiin/hallintaan ja ratkaisuihin, jotka yhdistävät ohjelmistot laitteistoihin.

IBM:n perusperiaatteena on edistää jatkuvasti edistystä, olipa kyse sitten ihmisyhteisöstä tai brändistä, käyttämällä tiedettä, järkeä ja älyä.

IBM:n mukaan hyvä suunnittelu ei ole vain välttämättömyys vaan myös sitoutuminen käyttäjiin. Tässä on muutamia heidän Carbon Design System -järjestelmänsä erottuvia ominaisuuksia, jotka tarjoavat Adoben, Axuren ja Sketchin kanssa työskenteleville kehittäjille ja suunnittelijoille runsaasti työkaluja ja resursseja:

  1. Tietojen visualisointi
  2. Kuviot
  3. Komponentit
  4. Suuntaviivat
  5. Oppaat

Uber Design System

Uber Design System (https://baseweb.design/)

Olemme kaikki ottaneet Uberin ainakin kerran. Amerikkalainen teknologiayritys luottaa liikkumiseen, kuten ruoan toimittamiseen, kyytipalveluihin, vertaiskyytien jakamiseen ja mikroliikkuvuuteen skoottereilla ja sähköpyörillä.

Uber tarvitsee tehokkaan järjestelmäsuunnittelun, jotta tämäntyyppinen palvelu toimisi moitteettomasti kaikkien alabrändien, sisäisten brändien, tuotteiden ja projektien välillä.

Uber Design Systemin tärkeimmät ominaisuudet ovat:

  1. Brändin arkkitehtuuri
  2. Koostumus
  3. Äänensävy
  4. Liike
  5. Kuvitus
  6. Valokuvaus
  7. Ikonografia
  8. Väri
  9. Logo
  10. Typografia

Vihjeitä, jotka on hyvä tietää ennen ensimmäisen suunnittelujärjestelmän luomista

1. Varhainen ja selkeä viestintä on uusi paras ystäväsi

Sisäisten kuluttajien ottaminen mukaan heti voi olla hankalaa. Itse asiassa heidän palautteensa voi haitata prosessia, jos se on epäselvää, jos se annetaan liian aikaisessa vaiheessa alfa- tai beta-julkaisusykliä tai jos se ei ole hyödyllistä.

Kerro asiakkaillesi, suunnittelujärjestelmän käyttäjille, mitä tarvitset, jotta saat rakentavaa palautetta. Jos olet varhaisessa esiversiointivaiheessa, kerro rehellisesti ja selkeästi, millaista palautetta tarkalleen ottaen haluat. Tämä osoittaa, että etsit tuotteen merkittävimpiä puutteita etkä korkean uskottavuuden kritiikkiä.

Varo ajattelemasta liikaa ja kuihtumasta pois, mutta älä epäröi kommunikoida liikaa.

2. Askeleesi eivät ole ainoa asia, jota sinun on seurattava.

Tärkeä puuttuva osa priorisointia on usein suunnittelujärjestelmien käytön seuranta. On välttämätöntä ymmärtää, missä järjestelmää käytetään, kuka sitä käyttää, kuinka usein ja kuinka usein ja kuinka usein päivityksiä tehdään.

Kun päivittäin kerätään tilastotietoja siitä, mitkä tiimit käyttävät kirjaston eri versioita, voidaan saada käsitys käyttöönoton, päivittämisen ja päivittämisen nopeudesta.

Kun tunnistat tiimit, jotka päivittävät harvoin, voit selvittää päivityksen estävät ongelmat ja korjata ne.

3. Palautemekanismit ovat yhtä aliarvostettuja kuin Rhaeghal GOT:sta.

Jotta järjestelmäsi olisi käyttäjilleen arvokas, mutta myös sellainen, johon käyttäjät tuntevat kuuluvansa ja johon he ovat aktiivisesti osallistuneet, on tärkeää, että käyttäjillä on yksinkertaiset mutta suoraviivaiset tavat antaa palautetta (Slack, sähköposti jne.) ja osallistua järjestelmän kehittämiseen.

Anna aina ohjeita siitä, miten ja missä palautetta voi antaa mahdollisimman monella alueella, äläkä koskaan oleta mitään, etenkään sitä, että käyttäjä löytää palautteen paikasta, jonka luulet olevan ilmeisin.

Suunnittelujärjestelmä on organisaatiosi tarvitsema pohjantähti

A Design System is the North Star Your Organization Needs

Onnistuneesta, hyvin suunnitellusta suunnittelujärjestelmästä tulee osa yrityksen selkärankaa, mikä johtaa johdonmukaisiin ja vahvempiin kokemuksiin. Lisäksi suunnittelijat ja kehittäjät saavat tilaisuuden viestiä paremmin tuotteen tarkoituksesta sen sijaan, että he joutuisivat kokoamaan yhteen perusrakennuspalikoita.

Kuka tahansa yleisasiantuntija voi olla kumppanisi suunnittelun toteuttamisessa, mutta vain suunnitteluasiantuntija tunnistaa nykyiset kysymykset, haasteet ja toiveet, jotta hän voi luoda suunnittelujärjestelmän erityisesti sinua varten. Nyt ei ole aika odottaa. Tämän kattavan oppaan avulla suunnittelujärjestelmän luomisesta olet vain aloitteen päässä tuotantoprosessisi täydellisestä muutoksesta.

Viitteet

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/

Tapaa Ranktracker

All-in-One-alusta tehokkaaseen hakukoneoptimointiin

Jokaisen menestyvän yrityksen takana on vahva SEO-kampanja. Mutta kun tarjolla on lukemattomia optimointityökaluja ja -tekniikoita, voi olla vaikea tietää, mistä aloittaa. No, älä pelkää enää, sillä minulla on juuri oikea apu. Esittelen Ranktracker all-in-one -alustan tehokasta SEO:ta varten.

Olemme vihdoin avanneet Ranktrackerin rekisteröinnin täysin ilmaiseksi!

Luo ilmainen tili

Tai Kirjaudu sisään omilla tunnuksillasi

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

Felix Rose-Collins

Felix Rose-Collins

Ranktracker's CEO/CMO & Co-founder

Felix Rose-Collins is the Co-founder and CEO/CMO of Ranktracker. With over 15 years of SEO experience, he has single-handedly scaled the Ranktracker site to over 500,000 monthly visits, with 390,000 of these stemming from organic searches each month.

Aloita Ranktrackerin käyttö... ilmaiseksi!

Selvitä, mikä estää verkkosivustoasi sijoittumasta.

Luo ilmainen tili

Tai Kirjaudu sisään omilla tunnuksillasi

Different views of Ranktracker app