Styleguide 101 - Hvorfor trenger du en styleguide?

Salesforce styleguide

I en serie på tre deler setter vi fokus på styleguide. Hvorfor trenger du det, hvordan er en styleguide bygget opp og hvordan kan du lage din egen styleguide.

Det er mye som har endret seg innen webdesign de siste årene, og ingenting tyder på at det kommer til å stå på stedet hvil de kommende årene heller. Med responsiv design er det ikke lenger så mye snakk om at nettsider skal se 100% likt ut i nye og eldre versjoner av Internet Explorer, men nå jobber vi mot en god opplevelse og brukervennlighet på et ukjent antall enheter med forskjellige egenskaper og begrensninger.

Photoshop holder ikke mål lenger

Da vi før lagde 4–8 designskisser i Photoshop som representerer de ulike sidemalene, er det i dag blitt mer komplisert for å få et design til å passe alle de ulike skjermstørrelsene.

Ulike variasjoner av mobiler og nettbrett
Det finnes et hav av ulike enheter med ulik størrelse, og det kommer stadig ut nye på markedet.
Vi har ikke kuttet ut Photoshop helt, men vi bruker det mindre slik vi kommer raskt i gang med å teste designet i nettleseren.

Spar tid på å skrive gjenbrukbar kode

Med så mange variasjoner av et design lønner det seg å bryte designet ned i elementer og komponenter. Helt fra enkle elementer som overskrifter og knapper til samlinger av elementer som settes sammen til komponenter. Til slutt settes store og små komponenter sammen, og vips - vi har laget en sidemal.

For å kunne holde oversikt over elementer og komponenter har vi begynt å lage styleguide, eller living styleguide som det også blir omtalt som. Det er en enkelt nettside som lister opp de ulike komponentene med eksempelinnhold, kodeeksempel og vanligvis en kommentar om hvordan komponenten skal brukes.

Skjermbilde av Starbucks styleguide
Starbucks var en av de første store merkevarene som lagde styleguide for nettstedet sitt.

En styleguide er en utmerket dokumentasjon, og det gjør det lettere for et team å jobbe sammen, og ikke minst for å få oversikt over hva som finnes av elementer slik de kan gjenbrukes.

Test og lær tidlig hva som kan forbedres

Noen andre fordeler med en styleguide framfor å gjøre alt i et grafisk program som Photoshop og Sketch er:

  • Designet kommer raskere inn i nettleseren, noe som gir et riktigere bilde av hvordan designet blir til slutt.
  • Man kan lage de ulike komponentene mobile first slik at de fungerer på alt fra små mobil- til store desktopskjermer.
  • Når designet er i nettleseren kan interaksjoner som :hover, animasjoner og skjemaer testes for brukervennlighet.
  • Man kan raskere teste om komponentene og nettsiden virker på tvers av ulike nettlesere og enheter, og dermed gjøre endringer raskere en hva vi var i stand til før. Det er både lønnsomt og tidsbesparende å fikse mangler tidlig kontra sent i prosjektet.

Oppsummering

Det kan kanskje virke som en liten omvei å lage en styleguide for en nettside. Men det vi taper på å komme senere i gang med implementering i et CMS, vinner på å teste tidlig og ofte for å unngå overraskelser mot slutten av prosjektet. Det vil også være tidsbesparende i vedlikehold av kode, og lettere å bringe nye folk inn i prosjektet.

I neste del av serien Styleguide 101 ser vi på noen eksempler på styleguide og hva de inneholder av elementer og komponenter.

Frank Gjertsen

Frank Gjertsen

Les flere artikler fra Frank Gjertsen.

Jobber i Frontkom. Frontendutvikler og designer. Spesielt ansvar for universell utforming.