Levende styleguide - glimrende eksempler

Styleguide eksempler

Før du bygger din egen styleguide - se hvordan andre designere har gjort det! Vi har samlet noen styleguider du kan bruke som inspirasjon.

I forrige artikkel så vi på hvilke fordeler en styleguide har framfor tradisjonell “Photoshop” arbeidsflyt når et nettsted skal designes.

En styleguide dokumenterer basiselementer og komponenter som gjenbrukes på et nettsted. Din egen styleguide må selvfølgelig bygges opp av elementer som brukes på din egen side, men det er nyttig å se hvordan andre har bygget styleguiden sin.

Innholdet i en styleguide

Innholdet i en styleguide er ikke alltid helt likt, men det er vanligvis en del elementer som går igjen. En styleguide deles ofte opp i disse kategoriene:

Basiselementer

  • Typografi - overskrifter, paragrafer, lister, lenker
  • Farger
  • Tabeller

​Layout

  • Vanlige områder som header, footer, hovedinnhold og sidebar
  • Grid system

Komponenter

Elementer som er en kombinasjon av enkle basiselementer.

  • Knappegrupper og kombinasjon av knapper
  • Tilpasset skjema (for eksempel påmelding til nyhetsbrev)
  • Hovedmeny
 
Skjermbilde av code for america styleguide
Code for america har flere varianter av knapper, alt fra forskjellige størrelser til ulike farger.

styleguides.io

På styleguides.io finner du en lang rekke av styleguides. Her kan du også legge til din egen når du er ferdig.

Code for America

Code for America har samlet det meste av elementer på en lang side, noe som er fint på små og mellomstore styleguider. I styleguiden er det enkle elementer som tekstfelt, og større komponenter hvor enkle elementer er satt sammen. Et eksempel på det er påmeldingsskjema.

Lonely Planet

Lonely Planets styleguide er noe større enn Code for America, men den er fortsatt oversiktlig med hovedkategoriene Design Elements, UI Components, JS Components, Widgets og CSS Utilities. Under hver av disse er det delt opp i underkategorier.

Lonely Planet inkluderer alt fra fargepaletter, små elementer som knapper, komponenter som prislapp og større widgets som bilutleie widget.

Salesforce

Salesforce har med Lightning Design System laget en veldig grundig styleguide.  Av de tre vi ser på her er det den mest omfattende. I tillegg til å inneholde mange av de samme elementene som Code for America og Lonely Planet har de også inkludert animasjon og bevegelse. De beskriver bruken av animasjon og viser de ulike typene animasjon som kan skal brukes.

Lag din egen styleguide

Det enkle er ofte det beste, og for å komme i gang er det smart å begynne med grunnleggende elementer og komponenter som går igjen i designet ditt. Deretter er det avgjørende at styleguiden oppdateres og holdes vedlike i samsvar med resten av siden, sånn at nyttig informasjon blir tilgjengelig for innholdsprodusenter, designere og utviklere som skal jobbe på prosjektet.

Neste og siste del av serien blir mer praktisk. Jeg vil vise et eksempel på hvordan du kan komme i gang med å lage din egen levende styleguide.

Frank Gjertsen

Frank Gjertsen

Les flere artikler fra Frank Gjertsen.

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