{"id":92,"date":"2015-12-21T18:10:23","date_gmt":"2015-12-21T17:10:23","guid":{"rendered":"https:\/\/vgrutv.wordpress.com\/?p=92"},"modified":"2018-01-18T16:23:11","modified_gmt":"2018-01-18T15:23:11","slug":"stilguide-1-0-forhandsversion","status":"publish","type":"post","link":"https:\/\/vgrblogg.se\/utveckling\/2015\/12\/21\/stilguide-1-0-forhandsversion\/","title":{"rendered":"Stilguide 1.0 f\u00f6rhandsversion"},"content":{"rendered":"

Har under h\u00f6sten gjort ett g\u00e4stspel inom webbdesign. Normalt sett h\u00e5ller jag mig till s\u00f6k, webbanalys och informationsarkitektur. Men just i fallet med att skapa en levande stilguide f\u00f6r VGR sammanstr\u00e5lar mina intressen med v\u00e5rt uppgraderingsprojekt f\u00f6r Episerver CMS. V\u00e5r stilguide \u00e4r framtagen i tajt samarbete med v\u00e5ra webbkonsulter, vi har j\u00e4msides med uppgraderingsprojektet utvecklat stilguiden i n\u00e5gon form av symbios mellan \u00f6nskv\u00e4rd praxis och pragmatism.<\/p>\n

Vad \u00e4r en stilguide?<\/h2>\n

En stilguide tar vid d\u00e4r en organisations befintliga grafiska manual och identitetsprogram tar slut. M\u00e5nga organisationer har \u00e4nnu inte v\u00e4vt in allt digitalt i sin grafiska manual. Flera rubriker k\u00e4nns dock igen fr\u00e5n en grafisk manual, du finner ofta i en stilguide riktlinjer om typografi, sp\u00e4rravst\u00e5nd runt logotyp och exempel p\u00e5 designkomponenter.<\/p>\n

Stilguiden \u00e4r organisationens dokumenterade b\u00e4sta praxis, det som finns i den ska leva upp till den standardiserade l\u00e4gstaniv\u00e5 man satt upp. Detta f\u00f6r att dels kraven, men ocks\u00e5 annat inneh\u00e5ll som utseende, ska bli k\u00e4nt och \u00e5teranv\u00e4nt.<\/p>\n

Det vi har valt att stoppa in i VGRs stilguide \u00e4r en hel del mer \u00e4n minimum. F\u00f6ljande till\u00e4gg\/bilagor har vi i v\u00e5rt utkast till stilguide:<\/p>\n

    \n
  1. Bibliotek med designm\u00f6nster<\/strong>. Du kanske snubblat \u00f6ver begreppet pattern library tidigare? Detta \u00e4r allts\u00e5 platsen d\u00e4r man kan f\u00f6nstershoppa bland de delar ens webbplats kan best\u00e5 av, som nyhetsspalter, sidhuvud, s\u00f6kfunktioner, navigation, l\u00e4nkstigar, etc. Alla dessa ska vara testade enligt de krav man valt f\u00f6r tillg\u00e4nglighet, f\u00e4rg & form, identitet m.m.<\/li>\n
  2. Prestandabudget<\/strong>, eller performance budget. H\u00e4r placeras m\u00e4tbara krav p\u00e5 webbplatsernas kvalitet, niv\u00e5 av tillg\u00e4nglighet och annan dokumenterad ambition.<\/li>\n
  3. Utvecklardokumentation och pakethantering<\/strong>. F\u00f6r att underl\u00e4tta framtida \u00e5teranv\u00e4ndning \u00e4r stilguiden bakom kulisserna ett versionshanterat startpaket v\u00e5ra utvecklare kan ladda hem f\u00f6r att f\u00e5 en flygande start p\u00e5 sitt n\u00e4sta webbprojekt. Vi kommer under n\u00e4sta \u00e5r k\u00f6ra en internutbildning i hur man g\u00f6r detta.<\/li>\n
  4. Ikonbibliotek<\/strong>. Precis som att man standardiserar sin design \u00e4r det f\u00f6r en st\u00f6rre organisation klokt att f\u00f6rs\u00f6ka vara konsekvent med all visuell kommunikation, att samsas kring en gemensam upps\u00e4ttning ikoner \u00e4r ett s\u00e5dant initiativ vi tagit genom stilguiden. I f\u00f6rhandsversionen har vi utg\u00e5tt fr\u00e5n Googles material design<\/a> som ett grundpaket med ikoner.<\/li>\n<\/ol>\n

    Po\u00e4ngen \u00e4r att standardisera sin webbdesign, som kommunikation i digitala kanaler och teknikaliteter som p\u00e5verkar hur man upplevs av sina anv\u00e4ndare. Det vi l\u00e4t bli att ta med \u00e4r spr\u00e5kliga riktlinjer, eller s\u00e5dant som kan ing\u00e5 i en redaktionell handbok.<\/p>\n

    Denna dokumentation har olika mottagare. I v\u00e5rt fall har vi p\u00e5b\u00f6rjat uppdelningen i grupperna best\u00e4llare av webbplatser, de som designar v\u00e5ra webbplatser och de som utvecklar. De grupperna kan v\u00e4nta sig s\u00e4rskilda sidor med instruktioner.<\/p>\n

    Stilguide f\u00f6r en best\u00e4llare eller projektledare<\/h3>\n

    Som best\u00e4llare \u00e4r det \u00f6verm\u00e4ktigt att ha koll p\u00e5 alla f\u00f6r\u00e4nderliga krav man b\u00f6r st\u00e4lla p\u00e5 en modern webbplats. Det \u00e4r en massa f\u00f6rkortningar, \u00f6mmande sk\u00e4l f\u00f6r den ena och den andra gruppen. Sen ska det se r\u00e4tt ut, lagstiftningar att f\u00f6lja, IT-avdelningen ska inte balla ur f\u00f6r att det var fel teknik, etc.<\/p>\n

    ”Av var och en efter f\u00f6rm\u00e5ga, \u00e5t var och en efter behov” tycker jag kan \u00e5teranv\u00e4ndas i detta sammanhang. F\u00f6r en best\u00e4llare eller projektledare \u00e4r det viktigt att alla intressenter f\u00e5r sina behov tillfredsst\u00e4llda. Men exakt hur<\/em> respektive detalj ska sk\u00f6tas misst\u00e4nker jag de flesta l\u00e4gger lite vikt vid, s\u00e5 l\u00e4nge som helheten blir bra.<\/p>\n

    En stilguide \u00e4r ett kompletterande best\u00e4llningsunderlag. Vilken niv\u00e5 av tillg\u00e4nglighet ska vi ha? Jaha, det st\u00e5r redan i prestandabudgeten en massa om den typen av krav och hur det ska fungera vid d\u00e5lig mottagning f\u00f6r mobilanv\u00e4ndarna.<\/p>\n

    Vill man minimera risken det inneb\u00e4r att ta designbeslut genom allm\u00e4n omr\u00f6stning<\/a> s\u00e5 f\u00f6ljer man de designm\u00f6nster som finns i stilguiden, eller best\u00e4ller de som saknas. Design \u00e4r mindre tycke och smak \u00e4n m\u00e5nga tror, f\u00f6rutom att enhetlighet \u00e4r en dygd f\u00f6r igenk\u00e4nning. M\u00e5nga designbeslut ska man inte ta l\u00e4ttvindigt, eller \u00f6verl\u00e5ta p\u00e5 oss amat\u00f6rer vars fr\u00e4msta merit \u00e4r att vi anv\u00e4nder en ordbehandlare. Typografi, allts\u00e5 textens utformning, \u00e4r ett s\u00e5dant omr\u00e5de d\u00e4r det definitivt finns r\u00e4tt beslut och fel beslut. Det finns typografiska regler, f\u00f6r att text ska bli l\u00e4ttl\u00e4st, allts\u00e5 anv\u00e4ndbar. Att det \u00e4r snyggt \u00e4r sekund\u00e4rt om det nu inte \u00e4r konst man h\u00e5ller p\u00e5 med. F\u00f6r att slippa dessa diskussioner eller inte r\u00e5ka ut f\u00f6r att man f\u00e5r n\u00e5gon h\u00f6gljudd programmerares id\u00e9 om snygg text p\u00e5 k\u00f6pet \u00e4r det klokt att dokumentera exakt beteende f\u00f6r hur texten ska se, hur den ska bete sig responsivt, detta direkt i stilguiden.<\/p>\n

    Det man som best\u00e4llare ska g\u00f6ra \u00e4r att po\u00e4ngtera att eventuella avsteg fr\u00e5n stilguiden skall<\/em> dokumenteras och st\u00e4mmas av. Det finns givetvis fler fr\u00e5gor att prata om \u00e4n de man tar upp i sin stilguide, men stilguiden ger f\u00f6rhoppningsvis en hel del svar p\u00e5 fr\u00e5gor man redan vet svaret p\u00e5.<\/p>\n

    Stilguide f\u00f6r en utvecklare<\/h3>\n

    \u00c4r sj\u00e4lv webbutvecklare, s\u00e5 jag kan tala lite f\u00f6r den gruppen. Det \u00e4r v\u00e4ldigt trevligt att veta med vilken m\u00e5ttstock best\u00e4llaren kommer att m\u00e4ta ens insats. F\u00f6r vissa utvecklare st\u00e4ller vi s\u00e4kert n\u00e5gra nya krav, men genom att vara \u00f6ppna med kraven kommer vi \u00e5tminstone minska den os\u00e4kerheten.<\/p>\n

    Till en b\u00f6rjan kan dessa specifika krav s\u00e4kert ge lite merkostnader, men efter ett tag blir det ju vardag att leva upp till n\u00e5got man \u00f6vertr\u00e4ffade vid sin senaste leverans.<\/p>\n

    Ett annat perspektiv f\u00f6r utvecklaren blir att ta fram funktioner i enlighet med de krav och begr\u00e4nssningar som satts upp. Allt \u00e4r inte relaterat till design, det kan lika g\u00e4rna handla om hur man inte \u00f6verbelastar webbservern. Exakt hur teknisk man v\u00e4ljer att vara \u00e4r f\u00f6rst\u00e5s upp till en sj\u00e4lv. S\u00e5 som vi gjort \u00e4r att jag representerat IT-avdelningens arkitekturledningsgrupp och samarbetat med en kollega fr\u00e5n kommunikationsavdelningen, s\u00e5 ja, v\u00e5r stilguide \u00e4r ganska teknisk i vissa delar.<\/p>\n

    Kraven som s\u00e4tts i prestandabudgeten kan vara begr\u00e4nsande, men jag ser det hellre som att de tvingar en att t\u00e4nka till och inte agera sl\u00f6saktigt. Fr\u00e5gest\u00e4llningar som dykt upp tack vare detta arbete var om det var v\u00e4rt 20 % av en sidas totalvikt f\u00f6r att ha ett ovanligt teckensnitt i rubriken. En annan om n\u00e4r vi accepterar tredjepartscookies f\u00f6r n\u00e5got vi inte riktigt tycker gynnar v\u00e5r anv\u00e4ndare. Vissa fr\u00e5gor st\u00e4lls p\u00e5 sin spets.<\/p>\n

    Designprocessen n\u00e4r man har en stilguide<\/h2>\n

    Nya designm\u00f6nster och behov tas fram i stilguiden som en testbar prototyp, ist\u00e4llet f\u00f6r att man direkt tar steget till systemutveckling. Designern har i idealfallet f\u00f6rberett och t\u00e4nkt till p\u00e5 egen kammare innan hen uts\u00e4tts f\u00f6r best\u00e4llarens referensgrupp. P\u00e5 detta s\u00e4tt testar vi att minska m\u00e4ngden designbeslut i kommitt\u00e9form.<\/p>\n

    Genom stilguidens designm\u00f6nster f\u00e5r man hj\u00e4lp att vara lite konsekvent, att f\u00f6lja den konvention man redan etablerat hos sina befintliga anv\u00e4ndare.<\/p>\n