Medarbetarbloggen: Den grafiska verktygslådan

Den grafiska verktygslådan

Då det blivit allt vanligare för oss på Codemill att arbeta med företags visuella uttryck på webben har vi tagit fram något som vi kallar den grafiska verktygslådan. Vi brukar se verktygslådan som en brygga mellan den grafiska profilen och webbsidans design. Innehållet är riktlinjer för bland annat färger, typografi, ikoner, knappar, bilder och andra grafiska element som tillsammans utgör designen. Namnet grafisk verktygslåda kommer av att den innehåller de verktyg, i form av element, en utvecklare behöver för att omvandla designskisser till kod. Den grafiska verktygslådan är ett levande dokument som kan ändras och byggas ut under ett projekts gång.

Varför en grafisk verktygslåda?

Målet med vår grafiska verktygslåda är att ge en tydlig riktning och säkerställa att designen av en webbsida är konsekvent. Verktygslådan kan även fungera som ett kommunikationsunderlag för alla i ett team när man diskuterar hur designen ska ändras och utvecklas.

Vi har under senaste åren tagit fram grafiska verktygslådor i flera webbprojekt. De största fördelarna som vi har sett med att sammanfatta riktlinjer i en grafisk verktygslåda är följande:

• Frontend-utvecklarna vet vad de ska koda, alla element finns fördefinierade och kan snabbt skapas upp i återanvändbar html och css.
• Vi kan snabbt testa nya idéer för layout och design.
• Vi underlättar för nya teammedlemmar (både designers och utvecklare) att sätta sig in i det visuella uttrycket.
• Vi får en enhetlighet för hela webbsidans design, även när det tillkommer nya sidor.
• Kunden kan lättare utveckla och prova nya idéer på egen hand efter att projektet har avslutats.

Hur vi tar fram en verktygslåda för webben

När vi ska ta fram en ny design för en webbplats åt en kund börjar vi först med att skapa en grafisk profil där vi fokusera på det grundläggande färg och formspråket. Därefter bryter vi ut designelement och presenterar dem i en grafisk verktygslåda. Det betyder alltså att vi börjar med att definiera färger, former och typsnitt, för att sedan gå vidare till grafiska element så som knappar, listor, ikoner och inputfält. Slutligen presenteras olika varianter och kombinationer av de grafiska elementen.

Arbetsgången för att ta fram en grafisk verktygslåda och formatet på verktygslådan skiljer sig lite beroende på projekt. Verkttygslådan är antingen presenterad som ett dokument eller byggd med html och css. Fördelen med att ha verktygslådan i befintlig html och css är att alla element redan finns implementerade och bara är att plocka för utvecklarna. Oavsett format på verktygslådan är vårat mål att ha en verktygslåda som är tillgänglig för alla inblandade och som är lätt att justera och vidareutveckla under ett projekts gång, eller efter avslutat projekt när designen ska omarbetas.

I ett pågående projekt står vi inför en anpassning av webbens visuella uttryck till en ny målgrupp. Anpassningen blir betydligt lättare att genomföra nu när vi har en väl genomarbetad grafisk verktygslåda att bygga vidare på.

/ IdaMaria Harnesk, Interaktionsdesigner och Erik Långström, Lead designer