Styleguide

Ivareta merkevaren helt ut i ytterste detalj, også i digitale flater.

Hva er en styleguide?

For meg er en styleguide et levende kodedokument som detaljerer alle de ulike elementene og modulene av en nettside eller applikasjon. Ved siden av å dokumentere front-end kode, dokumenterer den også det visuelle språket som utgjør designet.

Vanligvis har apputviklere god oversikt over hvilke elementer som bør være med og hvor de bør plasseres, men ønsker en visuell guide.

En styleguide dokumenterer regler og egenskaper som gir en konsistent brukeropplevelse og bedre brukervennlighet. Guiden bør beskrive stilene på komponenter som skal være med i appen. Styleguiden utfyller på mange måter en visuell profil, ved å baseres på regler allerede satt, som fargepalett, fonter og grafiske elementer. En nettside eller app sitt visuelle språk er vel så viktig som en logo eller et pakningsdesign!

Hvorfor ha en styleguide?

Et team av utviklere kan vokse og forandres over tid, og da er en styleguide en hjelp på flere måter. Til å begynne med vil en styleguide ta noe tid, men det skal lønne seg på sikt ved at det går raskt å bygge nye seksjoner og sider når man har styleguiden som en referanse.

En guide standardiserer CSS’en og holder den lett og rask å laste. Styleguiden gjør det lett å se om elementer eksisterer fra før, og hindrer overflødig CSS.

For større teams og prosjekter kan en styleguide dessuten forenkle kommunikasjonen ved at man har samme vokabular når man refererer til et bestemt modul eller type knapp – man kan enten referere til CSS-klasser eller egne navn spesifisert i guiden.

Hva er leveransen av en styleguide?

Jeg har god erfaring med å bygge styleguides på rammeverk som Bootstrap eller Foundation.

Andre stikkord til en leveranse fra meg (som en utvikler nok vil nikke gjenkjennende til) er SASS, Bower, Codekit og ikke minst GitHub.

Når det er sagt, så har jeg også erfaring med å levere styleguider som PDF, i de tilfellene der kunden ønsker å lage sin egen kode.