• Style guide

Style guide

Skapa bättre användarupplevelser med designsystem och Style guides

I takt med att en organisations digitala närvaro växer ökar kraven på en sömlös design oavsett vilken applikation en användare besöker och oavsett vilken enhet som används för interaktionen. 

Denna utveckling ställer helt nya krav på en strategi för att skapa en sömlös design som lever upp till användarens förväntningar och stärker ert varumärke.


Istället för att designa separata webblösningar för specifika syften behöver vi designa ett system. Ett system av designmönster och kontextoberoende komponenter som kan återanvändas på ett oändligt antal platser. Ett sådant system kallas designsystem.

För att ett designsystem ska bli begripligt och användbart för alla i organisationen behöver vi visa upp designsystemet i en Style guide.

Style guiden är den plats där vi samlar all information om vårt designsystem. En digital lägereld för allt som rör den digitala närvaron. Förutom att presentera designsystemet innehåller Style guiden övergripande grafiska riktlinjer, dokumentation, terminologi, direktiv, processer och metoder som styr hur designsystemet ska förvaltas och vidareutvecklas.

Det finns flera vinster med att arbeta med en Style guide:

  • Enhetlighet: Du skapar en mer enhetlig och förutsägbar användarupplevelse under hela kundresan. En sömlös upplevelse oavsett enhet eller scenario.
  • Kostnadseffektivitet: Återanvändbara komponenter delas av flera lösningar och en uppdatering sker på ett och samma ställe. Alla tjänster som använder sig av en komponent kommer alltid att ha den senaste koden. Gränssnittsutvecklingen blir mindre omfattande då gemensamma nyttor för komponenterna arbetas fram löpande och kommer alla tjänster till godo.
  • Skalbarhet: Antalet applikationer och webbplatser kan växa i och med en mer förutsägbar och tillförlitlig förvaltning. En lösning som håller i längden.
  • Samarbete: Samarbetet förbättras dels mellan projektmedlemmar, t.ex. en UX-designer, en systemutvecklare och en verksamhetsexpert men också mellan olika leverantörer. Med hjälp av en Style guide kan alla få ett helhetsperspektiv och prata samma språk.
  • Snabbhet: Det blir enklare för nya projektmedlemmar/anställda att lära sig systemet. Det tillåter i sin tur att nya designidéer snabbare kan testas vilket avsevärt förkortar time-to-market för nya tjänster och funktioner.

Citat

Göteborgs Stad

Att behöva underhålla olika gränssnittslösningar för samma behov är slöseri med resurser som vi istället vill använda för att öka kvalitén i våra leveranser.

Mikael Sandin , Product Manager och UX-designer, Göteborgs Stad Intraservice

Sandvik

Med Sandvik web style guide får vi äntligen möjligheten att skapa enhetliga användar-upplevelser för våra interna applikationer och höja både produktiviteten hos våra medarbetare, tillgängligheten till våra applikationer och standarden för vår varumärkesidentitet internt.

Jörgen Andersson , Sandvik Group Web Manager

Referenser

Göteborgs Stad samordnar sina teknik- och webbuppdrag inom en organisation som heter Intraservice…

Fram till 2015 har Sandvik använt standardiserade tekniska ramverk med enklare anpassning av utseendet…