Ravn Webveveriet logo

Designsystemer

Ravn har mange års erfaring med å lage design for digitale produkter, og det er ikke uvanlig at den visuelle konsistensen forvitrer over tid. Dette har vi ønsket å gjøre noe med, og da vi fikk i oppdrag å redesigne Cappelen Damms nettsteder for videregående skole (VGNOA), så vi en mulighet til å implementere en ny praksis.

Da vi begynte med dette arbeidet, lagde vi oss følgende visjon: 1. Redesignet bør basere seg på et vedlikeholdbart designsystem som inneholder verktøy for fremtidig kvalitetssikring. 2. Designsystemet bør fungere slik at det gir mer fleksibiletet, det blir lettere å endre og ha større visuell forskjell på nettsteder i samme mal.

Komponentbibliotek

Hva er et designsystem

Ifølge Nielsen Norman Group er et designsystem et sett med standarder man kan bruke for å håndtere skalering av design og som legger til rette for et delt språk og visuell likhet på tvers av plattformer og kanaler.

Vi i Ravn deler denne overordnede forståelsen av hva et designsystem er, og vi tenker det er nyttig å utdype to sentrale konsepter med hva det betyr i praksis.

Ikoner i komponentbiblioteket i Figma
Ikoner i komponentbiblioteket i Figma

For å kunne håndtere en fremtidig skalering er det viktig å dokumentere de valgene man har gjort, slik at man blant annet lettere kan forstå om det er behov for å modifisere noe eksisterende, eller om det er bedre å lage noe nytt.

Vi mener det finnes få gode grunner til at like designelementer bruk i samme produkt skal ha vidt forskjellige utseende. Gjennom å vedlikeholde designspesifikasjon og den faktiske implementasjon er det lett å få oversikt over alle varianter av elementer som finnes - og vi kan oppnå visuell likhet.

Når trenger man et designsystem?

Det er ikke alle som har behov for et komplett designsystem. Et designsystem tar tid å lage og vedlikeholde, og et halvferdig eller utdatert design system har liten verdi. Det kan likevel være fordelaktig at man i alle designprosesser fokuserer på hvordan man skal dokumentere og ta vare på designbeslutninger for fremtiden.

Når kompleksiteten øker og behovene blir større, kan det være at et designsystem kan hjelpe til med å håndtere den videre veksten.

Hva har vi lært?

Det vi har funnet ut i første omgang er verdien disse to verktøyene gir oss som team. Utvikler har nå ett konkret sted å gå for finne ut av hvilke klasser og HTML de trenger for å få det de skal lage til å se bra ut.

Designere kan ta utgangspunkt i noe eksisterende sånn at det blir lettere å skape en enhetlig stil på alle elementer.