Startpunkten för VGRs stilguide

Stilguide 1.0 förhandsversion

Har under hösten gjort ett gästspel inom webbdesign. Normalt sett håller jag mig till sök, webbanalys och informationsarkitektur. Men just i fallet med att skapa en levande stilguide för VGR sammanstrålar mina intressen med vårt uppgraderingsprojekt för Episerver CMS. Vår stilguide är framtagen i tajt samarbete med våra webbkonsulter, vi har jämsides med uppgraderingsprojektet utvecklat stilguiden i någon form av symbios mellan önskvärd praxis och pragmatism.

Vad är en stilguide?

En stilguide tar vid där en organisations befintliga grafiska manual och identitetsprogram tar slut. Många organisationer har ännu inte vävt in allt digitalt i sin grafiska manual. Flera rubriker känns dock igen från en grafisk manual, du finner ofta i en stilguide riktlinjer om typografi, spärravstånd runt logotyp och exempel på designkomponenter.

Stilguiden är organisationens dokumenterade bästa praxis, det som finns i den ska leva upp till den standardiserade lägstanivå man satt upp. Detta för att dels kraven, men också annat innehåll som utseende, ska bli känt och återanvänt.

Det vi har valt att stoppa in i VGRs stilguide är en hel del mer än minimum. Följande tillägg/bilagor har vi i vårt utkast till stilguide:

  1. Bibliotek med designmönster. Du kanske snubblat över begreppet pattern library tidigare? Detta är alltså platsen där man kan fönstershoppa bland de delar ens webbplats kan bestå av, som nyhetsspalter, sidhuvud, sökfunktioner, navigation, länkstigar, etc. Alla dessa ska vara testade enligt de krav man valt för tillgänglighet, färg & form, identitet m.m.
  2. Prestandabudget, eller performance budget. Här placeras mätbara krav på webbplatsernas kvalitet, nivå av tillgänglighet och annan dokumenterad ambition.
  3. Utvecklardokumentation och pakethantering. För att underlätta framtida återanvändning är stilguiden bakom kulisserna ett versionshanterat startpaket våra utvecklare kan ladda hem för att få en flygande start på sitt nästa webbprojekt. Vi kommer under nästa år köra en internutbildning i hur man gör detta.
  4. Ikonbibliotek. Precis som att man standardiserar sin design är det för en större organisation klokt att försöka vara konsekvent med all visuell kommunikation, att samsas kring en gemensam uppsättning ikoner är ett sådant initiativ vi tagit genom stilguiden. I förhandsversionen har vi utgått från Googles material design som ett grundpaket med ikoner.

Poängen är att standardisera sin webbdesign, som kommunikation i digitala kanaler och teknikaliteter som påverkar hur man upplevs av sina användare. Det vi lät bli att ta med är språkliga riktlinjer, eller sådant som kan ingå i en redaktionell handbok.

Denna dokumentation har olika mottagare. I vårt fall har vi påbörjat uppdelningen i grupperna beställare av webbplatser, de som designar våra webbplatser och de som utvecklar. De grupperna kan vänta sig särskilda sidor med instruktioner.

Stilguide för en beställare eller projektledare

Som beställare är det övermäktigt att ha koll på alla föränderliga krav man bör ställa på en modern webbplats. Det är en massa förkortningar, ömmande skäl för den ena och den andra gruppen. Sen ska det se rätt ut, lagstiftningar att följa, IT-avdelningen ska inte balla ur för att det var fel teknik, etc.

”Av var och en efter förmåga, åt var och en efter behov” tycker jag kan återanvändas i detta sammanhang. För en beställare eller projektledare är det viktigt att alla intressenter får sina behov tillfredsställda. Men exakt hur respektive detalj ska skötas misstänker jag de flesta lägger lite vikt vid, så länge som helheten blir bra.

En stilguide är ett kompletterande beställningsunderlag. Vilken nivå av tillgänglighet ska vi ha? Jaha, det står redan i prestandabudgeten en massa om den typen av krav och hur det ska fungera vid dålig mottagning för mobilanvändarna.

Vill man minimera risken det innebär att ta designbeslut genom allmän omröstning så följer man de designmönster som finns i stilguiden, eller beställer de som saknas. Design är mindre tycke och smak än många tror, förutom att enhetlighet är en dygd för igenkänning. Många designbeslut ska man inte ta lättvindigt, eller överlåta på oss amatörer vars främsta merit är att vi använder en ordbehandlare. Typografi, alltså textens utformning, är ett sådant område där det definitivt finns rätt beslut och fel beslut. Det finns typografiska regler, för att text ska bli lättläst, alltså användbar. Att det är snyggt är sekundärt om det nu inte är konst man håller på med. För att slippa dessa diskussioner eller inte råka ut för att man får någon högljudd programmerares idé om snygg text på köpet är det klokt att dokumentera exakt beteende för hur texten ska se, hur den ska bete sig responsivt, detta direkt i stilguiden.

Det man som beställare ska göra är att poängtera att eventuella avsteg från stilguiden skall dokumenteras och stämmas av. Det finns givetvis fler frågor att prata om än de man tar upp i sin stilguide, men stilguiden ger förhoppningsvis en hel del svar på frågor man redan vet svaret på.

Stilguide för en utvecklare

Är själv webbutvecklare, så jag kan tala lite för den gruppen. Det är väldigt trevligt att veta med vilken måttstock beställaren kommer att mäta ens insats. För vissa utvecklare ställer vi säkert några nya krav, men genom att vara öppna med kraven kommer vi åtminstone minska den osäkerheten.

Till en början kan dessa specifika krav säkert ge lite merkostnader, men efter ett tag blir det ju vardag att leva upp till något man överträffade vid sin senaste leverans.

Ett annat perspektiv för utvecklaren blir att ta fram funktioner i enlighet med de krav och begränssningar som satts upp. Allt är inte relaterat till design, det kan lika gärna handla om hur man inte överbelastar webbservern. Exakt hur teknisk man väljer att vara är förstås upp till en själv. Så som vi gjort är att jag representerat IT-avdelningens arkitekturledningsgrupp och samarbetat med en kollega från kommunikationsavdelningen, så ja, vår stilguide är ganska teknisk i vissa delar.

Kraven som sätts i prestandabudgeten kan vara begränsande, men jag ser det hellre som att de tvingar en att tänka till och inte agera slösaktigt. Frågeställningar som dykt upp tack vare detta arbete var om det var värt 20 % av en sidas totalvikt för att ha ett ovanligt teckensnitt i rubriken. En annan om när vi accepterar tredjepartscookies för något vi inte riktigt tycker gynnar vår användare. Vissa frågor ställs på sin spets.

Designprocessen när man har en stilguide

Nya designmönster och behov tas fram i stilguiden som en testbar prototyp, istället för att man direkt tar steget till systemutveckling. Designern har i idealfallet förberett och tänkt till på egen kammare innan hen utsätts för beställarens referensgrupp. På detta sätt testar vi att minska mängden designbeslut i kommittéform.

Genom stilguidens designmönster får man hjälp att vara lite konsekvent, att följa den konvention man redan etablerat hos sina befintliga användare.

Vi får se hur det går, vi har redan börjat leva som vi lär. I mitten på december började vi konceptutveckla hur man hittar rätt eller söker bland det utbud av vårdcentraler som finns, eller den tandläkarmottagning man är ute efter. Med utgångspunkt i de delar av designen som var färdigt har vi tagit fram utkast på nya kompletterande designmönster, se bilder här intill. Dels behöver vi inte uppfinna en massa design på nytt, men det blir också lättare att efter kvalitetsgranskning stoppa in resultatet i stilguiden. Då kan andra fortsätta med det vi tagit fram och kanske bygga något liknande, med igenkänning för de av våra användare som besöker oss ofta.

En kollega beskrev det bra innan vi ens satt igång, ungefärligen så här:

”Så du menar att vi inte kommer framstå som en, ibland dålig, imitatör av oss själva om vi standardiserar webbdesign på detta vis?”

Ja, det är precis vad jag menar 🙂

Mer om stilguiden och dess delar

Kommentera

Fyll i dina uppgifter nedan eller klicka på en ikon för att logga in:

WordPress.com Logo

Du kommenterar med ditt WordPress.com-konto. Logga ut / Ändra )

Twitter-bild

Du kommenterar med ditt Twitter-konto. Logga ut / Ändra )

Facebook-foto

Du kommenterar med ditt Facebook-konto. Logga ut / Ändra )

Google+ photo

Du kommenterar med ditt Google+-konto. Logga ut / Ändra )

Ansluter till %s