Elisabeth Broch Trondsen
Senior Designer
En levende og dynamisk styleguide som er realisert i kode
Et designsystem er en samling av gjenbrukbare komponenter. Det er et bibliotek og rammeverk for virksomhetens digitale strategi og identitet. Komponentene kan ses på som byggesteiner for å lage en helhetlig nettside. Det kan bidra til en god brukeropplevelse, men gjør også både kode og design mer effektivt.
Når vi setter opp et designsystem for din bedrift, får vi et visuelt bibliotek, der hvert element har gjennomtenkte spesifikasjoner. Samtidig opprettholder vi konsistensen på tvers av berøringspunktene. Som avstand mellom elementer, ikoner, typografi, states på klikkbare elementer. Hele systemet kodes opp, og kan fylles på etter hvert som det dukker opp nye behov.
Kostnadsbesparende
Når designsystemet er kodet opp, kan utviklerne gjenbruke elementer, og slipper derfor å kode alt fra bunnen av hver gang – noe som gjør det kostnadsbesparende og mer effektivt. Ikke minst vil det sikre en gjennomtenkt og profesjonell brukeropplevelse på alle digitale flater. Resultatet blir en enhetlig profil av virksomheten og merkevaren – på tvers av alle systemer internt og eksternt, både nå og i fremtiden.
Hva er forskjell på designmanual og designsystem?
En design-/profilmanual beskriver virksomhetens visuelle identitet. Den inneholder typisk logo, fargekoder, bildebruk med mer, og er ganske statisk. Et designsystem fungerer mer som et design- og kodebibliotek – og er levende. Det vil kontinuerlig fylles på, og har hele tiden fokus på å ivareta identiteten, brukeropplevelse og universell utforming. Så når din virksomhet skal sette i gang med et nettsideprosjekt, kan et designsystem gi ekstremt mange fordeler fordi det effektiviserer arbeidet og har én kilde til sannhet.
Reduserer kaos
Et designsystem kan redusere og forhindre kaos. Selv de minste endringene kan føre til kaos i både design og kode, samt stjele ufortjent tid. Man vil unngå inkonsekvent bruk av elementer da det fører til en dårligere brukeropplevelse og overdreven bruk av kode. Et designsystem organiserer nøkkel-designelementer. Og ved endring av et element, trenger man kun å skrive koden ett sted for å endre alle steder der dette elementet allerede er brukt.
Hvordan lage et designsystem
Man starter gjerne med å sette en stil for brukergrensesnittet ved å få kjernekomponenter og de minste byggeklossene på plass først. Eksempler på dette er farger, typografi, spacing og knapper. Etter hvert lager man mer sammensatte komponenter som skjemaelementer, enkle moduler, ikoner og effekter. Det er viktig at alle komponentene får et unikt navn og en beskrivelse av bruken. Når alt er kodet opp, vil man få en egen side som viser elementene og retningslinjer, samt selve koden.
Men det er ikke gjort på 1–2–3
Det er viktig å huske at dette ikke er et ferdig system på kort tid. Og på grunn av stadige endringer i teknologi, nye behov, kontinuerlig vedlikehold og endring, er det heller aldri virkelig ferdig.
For å designe et stabilt og effektivt designsystem krever det et godt samarbeid av utvikler og designer, og i noen tilfeller en SEO-spesialist. I Semway jobber vi på tvers av fagavdelingene, slik at vi får en bedre flyt gjennom prosjektet, får delt kunnskap og gitt feedback. Vi samler innspill og innsikt – både internt og eksternt. For å sette et designsystem, krever det litt tid, men ved å prioritere hva som er viktig får man en veldig god start.
Det er viktig å tilpasse størrelsen til behovet, og prioritere en planleggingsfase før man starter. Da har man kommet langt på vei for å kunne lykkes med designsystemet.
12 gode grunner til å utvikle et designsystem
- Det går raskere å kode/implementere fordi det er et konsekvent og gjenbrukbart system
- Man får god oversikt over alle elementer
- Komponentene vil spille på lag og gi en konsistent visuell opplevelse
- Alt er skreddersydd for sin funksjon
- Øker produktiviteten når hele teamet bruker samme tilgjengelige komponenter
- Enkelt å skape en gjennomført kundeopplevelse på tvers av forskjellige produkter
- Teamet kan fokusere mer på andre verdifulle løsninger av problemer
- Designsystemet blir satt opp med kravene innenfor universell utforming på hvert element
- Reduserer kaos i designet, som vil føre til en bedre brukeropplevelse
- Systemet har en felles kilde til dokumentasjon rundt hvorfor og hvordan
- Raskt å gjøre endringer
- Enklere å skape en gjennomført kundeopplevelse på tvers av forskjellige produkter og tjenester