Svenska Spels styleguide

Svenska Spels styleguide hjälper oss att utveckla snabbare och få en mer enhetlig design över flera olika plattformar.

På vår tidigare sajt hade vi inget bra sätt att dela design och klientkod mellan olika sidor och tjänster. Vilket ledde till att för varje ny tjänst som utvecklades så togs det fram ny design och utvecklarna fick bygga allt från grunden varje gång och la mycket tid på att tolka och översätta design till kod. En annan nackdel var också att sajten fick en väldigt inkonsekvent design och kunde skilja sig mycket från sida till sida.

Nya plattformen

När vi skulle ta fram vår nya tekniska plattform ville vi att det skulle vara enkelt att återanvända funktionalitet och design tvärs över hela sajten. För att det skall vara görbart är det viktigt att det finns en tydlig dokumentation om vilka funktioner som finns tillgängliga, hur de ser ut och fungerar.

Vår lösning blev att ta fram en styleguide där vi kan samla alla återanvändbara komponenter samt dokumentation om hur, när och var de skall användas.
Där hittar man t.ex. knappar, logotyper, ikoner, färger, modaler, menyer och många andra komponenter som vi använder över hela sajten.
Alla komponenter och även färger, ikoner mm har fått egna namn så alla roller i teamen pratar om samma saker för att minimera missförstånd. Istället för att hela tiden kolla i Photoshop vilken färg det skall vara kan vi enkelt berätta att det skall vara färgen stryktipset-500 eller grey-400 så blir det automatiskt rätt färg.

Det är lätt att dokumentation snabbt blir inaktuell om den inte hålls uppdaterad. Därför har vi valt att dokumentation är en del av varje komponent så kod och dokumentation är samlat på samma ställe. Sedan sammanställer vi alla komponenters dokumentation som tillsammans bildar vår styleguide. Eftersom dokumentationen är en del av plattformen så kan komponenterna köras live i styleguiden precis som på sajten. På så sätt går det alltid att se exakt hur en komponent ser ut och fungerar från styleguiden vilket vi har upplevt som en stor fördel när vi utvecklar nya och gör justeringar i komponenter.

I styleguiden går det också att ladda ner alla logotyper, typsnitt, ikoner och övriga spritemaps så dom enkelt kan användas på andra plattformar såsom iOS och Android.

Just nu är vår styleguide endast tillgänglig internt men målet är att öppna upp den publikt så våra partners som utvecklar sidor åt oss också kan ta del av alla våra komponenter och designriktlinjer.

/Emil Öhman
Systemutvecklare

Om Tech

Tech-bloggen har vi satt upp för att visa vad vi gör på teknik-sidan inom Svenska Spel. Du kommer att kunna läsa inlägg skrivna av oss som brinner för utveckling, arkitektur och DevOps.  

Mer om bloggen och oss som skriver

Senaste inläggen