Blogg

Tips och trix för dig som funderar på att börja jobba Style guide-driven

  • 20 maj 2016
  • 0

En solig dag i mars passade vi på att intervjua våra gränssnittsarkitekter Sandra Granberg och Mikael Norling på temat Style guides och designsystem. Vad krävs egentligen för att komma igång och arbeta Style guide-driven? Hur lång tid tar en process från start till mål och passar den här typen av arbetssätt verkligen alla organisationer? Detta och lite till får du svar på i intervjun. Enjoy!

Artikelverktyg:

Hur bör ett ”dreamteam” för arbetet med ett designsystem och en Style guide se ut? Vilka resurser bör ingå?

Mikael: Kärnan i produktionsarbetet är gränssnittsarkitekten, webb-AD:n (d.v.s. en AD som har koll på webbens möjligheter och begränsningar) och UX-designern. Därutöver behövs det en produktägare och, beroende på organisation, en styrgrupp som beställer och godkänner förändringar. När det kommer till gränssnittsutveckling är det fördelaktigt om man kan ha två separata personer så att de kan validera varandras arbete. Det är också bra om man har tillgång till någon med ett systemutvecklarperspektiv.

Hur lång tid tar den här typen av arbete och vad kostar det?

Sandra: Det finns inget enkelt svar på det, det beror på. Man ska vara medveten om att det initialt antagligen kommer att ta längre tid att bygga en ny webbplats där man först skapar en grund för en Style guide - jämfört med att “bara köra på”. Över tid har vi dock sett att man tjänar in den tiden man investerat i början av projektet flera gånger om, i snabbare och mer effektiv förvaltning men i synnerhet när man vill vidareutveckla och skala upp sin lösning. 

Mikael: Beroende på om man ska omforma befintlig design till ett designsystem eller om man börjar om på ny kula kräver det olika aktiviteter och därmed tidsåtgång. Men oavsett: att ta fram ett designsystem kräver en initial insats, normalt på några månader, där man är noggrannare, och därmed långsammare, än i vanliga fall. Det fina är dock att du med all säkerhet tjänar in denna tid flera gånger om under designsystemets livstid, speciellt vid vidareutveckling eller expansion men även under projektets fortsatta gång och i förvaltningen.

Har ni några bra tips på var man kan hitta mer information om Style guides och designsystem? 

Sandra: Styleguides.io är en bra utgångspunkt. Det är en site som Brad Frost skapat med massvis av inspirerande exempel på Style guides tillsammans med artiklar, videos och podcast m.m. Kolla också Brad Frosts blogg i det han skriver om Style guides och  Atomic Design. http://bradfrost.com/blog/

Allt som Nathan Curtis skriver på ämnet "Design system” är också ett hett tips.

Hur kommer man bäst igång med arbetet? Vilka steg bör man bryta ner det i?

Mikael: Det är relativt enkelt att komma igång med en Style guide om man ska nyutveckla ett system. Det kräver dock att man tänker lite mer ”agnostiskt”, eller bredare, än normalt samt att man jobbar med att förbereda för en style guide-driven utvecklingsprocess.

Om man ska införa en style guide för befintliga system börjar man med att göra en gränssnittsinventering. Därefter tar man fram ett ”facit” för olika funktioner och scenarion, t.ex. hur formulär ska se ut och bete sig. Dessa bildar sedan designsystemet som dokumenteras i Style guiden. Man behöver också arbeta fram en strategi för hur man ska applicera designsystemet i applikationerna. Vilka applikationer är viktigast för kärnverksamheten? Vilka funktioner är mest eftersatta? Vart har vi störst problem med teknisk skuld? Med sådana frågor får man antagligen fram en bild av vilka applikationer man ska prioritera och vad i dem man ska byta ut först.

Sandra: Det är viktigt att få en helhetsbild av sin webbnärvaro och det får man genom att göra en inventering. Precis som Mikael beskriver behöver man efter inventeringen prioritera vilka applikationer som är viktigast att hålla enhetliga inom ens webbnärvaro. Antagligen är det inte en bra idé att börja med alla applikationer på samma gång, välj ut de som är viktigast ur ert perspektiv.

Olika saker i en webbnärvaro är viktigare att styra än andra, det är oftast väldigt viktigt att färger och knappar, länkar och formulär exempelvis är likadana, men grid och layout templates är inte lika viktigt.  

Vissa saker, specifika saker, ska vara applikationsspecifika och man bör inte försöka generalisera precis allt. Nästan alltid är den visuella upplevelsen viktigast.

Hur viktigt är det att ha någon som tar lead och är eldsjälen i den här typen av projekt? 

Mikael: Det är olika viktigt beroende på organisationens storlek och karaktär (centraliserad vs. decentraliserad, lokal vs. nationell vs. global m.m.). Men, som i allt förändringsarbete, är det viktigt med någon typ av eldsjäl som driver frågan tills förändringen är etablerad. Från början kanske det är en enskild person, men det är viktigt att hen tidigt frälser flera, t.ex. ett projektteam till att börja med.

Sandra: Jag tror att det är jätteviktigt, speciellt i införandet av en Style guide. Den självklara visionen är att en Style guide ska vara så etablerad att den i princip driver sig själv, men innan alla processer är satta behövs det definitivt någon som driver det. Framförallt är det viktigt att etablera Style guiden som en auktoritet i organisationen vid designbeslut, så att det aldrig tas beslut vid sidan om och att Style guiden därmed blir utdaterad. För det behövs det ett ägandeskap. Det är dock en balansgång, en ensam ledare som enväldigt vakar över en Style guide är inte heller bra då en Style guide bygger på alla bidrar till att vidareutveckla och skala Style guiden.

Är detta ett arbetssätt som passar alla organisationer?

Sandra: Ja det skulle jag säga att det gör. Vi pratar ofta om att det är större organisationer med många olika webblösningar som tjänar mest på att ha en utarbetad strategi och det är sant – ju fler webblösningar som är viktiga för varumärket, desto viktigare med en strategi för att hålla ihop allt. Samtidigt kan en mindre organisation med få webblösningar ha minst lika stora utmaningar med att hålla en enhetlighet i sitt varumärke.

Mikael: Alla organisationer som bedriver någon typ av aktiv webbutveckling, antingen externa webbplatser eller interna webbaserade applikationer skulle tjäna på att ha en Style guide, och därmed en Style guide-driven utvecklingsprocess i någon mån. Ju fler applikationer och inblandade personer, desto större nytta — samtidigt som det räcker med att ha en någorlunda stor applikation för att det ska löna sig. Sen om det passar organisationen så som den ser ut är inte säkert. En decentraliserad organisation kommer att ha större utmaningar med att implementera en style guide.

Hur ska man tänka kring scope när man planerar den här typen av projekt?

Sandra: Börja litet, ta fram en bas av vanliga designmönster. Basen ska vara designmönster som kommer att skapa stor effekt för varumärket att hållas enhetliga, men med liten insats.  Testa, iterera och skala över tid. 

Mikael: Det beror på vad som är viktigast för organisationen att lösa först. Antingen har man en spretig användarupplevelse som man vill råda bot på, eller så har man en extremt kostsam förvaltning på grund av teknisk skuld. Oavsett vad man vill lösa först så bör man, precis som Sandra säger, tänka stort men börja smått. Ta fram en liten men robust kärna av komponenter och se till att skapa en arkitektur som gör det möjligt att införa dem allt eftersom i olika applikationer. Då kan man ta tillfällen i akt och se till att saker byts ut i applikationernas naturliga förvaltningsprocesser, i stället för att man byter ut allt på en gång (något som i de flesta fall blir övermäktigt). 

Vilka risker finns det med den här typen av projekt? 

Sandra: Den största risken är att man skapar en Style guide som sedan inte används. Så fort Style guiden blir ur synk tappar den helt sitt värde eftersom att man inte längre kan lita på den. 

Det är därför det är så viktigt att etablera Style guiden i organisationen och få alla involverade med på tåget och se värdet i den. Alla behöver förstå vad just de kan dra för nytta från den. 

Det är viktigt att komma ihåg att en Style guide i sig inte har något egenvärde, det som är värdefullt är de konversationer och frågeställningar som Style guiden skapar och att det i sig involverar, engagerar och leder varumärkets designbeslut mot samma mål. Det är riskabelt att tro att en Style guide kommer att bli perfekt, med de perfekta komponenterna, med den perfekta gränssnittskoden som fungerar i exakt alla scenarion - för det kommer alltid att behöva finnas undantag och man måste hela tiden väga för– och nackdelar i de beslut man kommer att ta.

Är du nyfiken på att komma igång och jobba med Style guides och designsystem?

Tveka inte att kontakta oss via formuläret så berättar vi gärna mer om hur den här typen av lösning kan skapa nytta för just din organisation. Ett tips är också att läsa mer om hur vi arbetar med Style guides och att fördjupa dig i hur en av våra kunder, Göteborgs Stad, aktivt arbetar med en Style guide och ett designsystem. 

0 kommentarer

Skriv kommentar