Styleguide

Koda med stil – så jobbar vi med styleguides

Minns du de första HTML-sidorna? Grå bakgrund, animerade gif-bilder och text skriven med Times New Roman.

På den tiden var det relativt okomplicerat att hantera design – idag använder vi andra metoder för att utveckla gränssnitt där styleguides är en del.

En styleguide är ett levande dokument med riktlinjer för bland annat färger, typografi, mönster, tabeller och andra element – som tillsammans utgör en design.

Styleguides har många fördelar

Det handlar inte om ett dokument i traditionell mening, utan snarare en enkel webbsida med färdiga implementationer av alla delar som den färdiga webbplatsen sedan använder. Där definieras allt från det rutnät som styr layouten för varje enskild sida – till sådant som typsnitt, rubrikstorlekar, färger och andra grafiska element. Guiden berättar också hur de olika elementen ska hanteras i olika skärmstorlekar.

För våra designers betyder det att alla delar av webbplatsen går att granska och justera så fort guiden är färdig. För våra utvecklare blir guiden en plats där alla tillgängliga delar finns färdiga att implementera på webbplatsen. Ytterligare en fördel är att kunderna också får tillgång till guiden vilket gör att de redan tidigt kan följa hur webbplatsen byggs upp.

Begreppet styleguide blandas ibland ihop med det som kallas för grafisk profil, men det är två helt olika saker. Skillnaden är att den grafiska profilen används under designfasen, medan styleguiden är en konkret implementering av den färdiga designen.

Så tar vi fram en styleguide

Antingen utgår vi från en redan befintlig webbplats, eller också från design och sidstruktur för en helt ny webbplats. Målet i båda fallen är att identifiera samtliga enskilda element och kombinationer av element och därefter namnge och kategorisera dem.

Vi börjar med färger och typsnitt, för att sedan gå vidare till enklare grafiska element som till exempel knappar, ikoner och inmatningsfält. När vi är klara med det är det dags att placera in elementen i de olika sammanhang och kombinationer som de ska finnas i.

styleguidesC9-2

Utifrån de identifierade elementen och sidans rutnät tar en gränssnittsutvecklare hand om att implementera allting och ser till att varje enskild del går lätt att lyfta ut och sätta in i sitt rätta sammanhang. Slutligen implementerar utvecklarna eventuella interaktioner och animationer som sker i gränssnittet.

Styleguides är en investering för framtiden

Du kanske tänker att det är mycket arbete med att gå igenom en sådan här process inför ett projekt. Varför inte bara fokusera direkt på att bygga webbsidorna? Det finns många anledningar till att ta fram styleguides och utöver de som vi redan varit inne på, tycker vi att de här är extra viktiga:

  • Det blir lättare för front-end-utvecklaren att implementera nya sidor och funktioner eftersom alla tillgängliga delar finns definierade i guiden.
  • Vi kan snabbt testa nya varianter av disposition och layout.
  • Nya utvecklare kommer snabbt in i projekt – något som sparar både tid och pengar.
  • Guiden och webbplatsen kan dela samma stilmallar, vilket betyder att ändringar i guiden också slår igenom på webbplatsen.
  • Att skapa och upprätthålla en styleguide är dessutom en framtidsinvestering, då förändringar och nyutveckling blir betydligt lättare att genomföra.

/Ronnie Hillgren, systemutvecklare och Jesper Andersen, art director

Läs mer på Creating Style Guides