Färg och form för Skatteverket

Jag som skriver heter Jens Wedin och jobbar med design och funktionalitet på Skatteverkets och Kronofogdens webbplatser.

I april och maj så uppdaterades designen på Skatteverket och jag tänkte berätta lite hur vi gick till väga kring detta arbete. Vi visste då att ett annat projekt skulle ta tag i struktur och funktionalitet så vi hade detta i åtanke när vi började jobba med designen.

Historia

Från början var inte detta ett designprojekt utan vi var ute efter att förbättra tillgängligheten på webbplatsen. Vi insåg ganska snabbt att om vi skulle få en bättre tillgänglighet var vi tvungen att göra stora designförändringar. Den designen som fanns innan var från mitten av 90-talet och var en fast layout med mycket nästlade tabeller och osynliga pixlar. Det var ett antal punkter som vi ville förbättra.

Nedan ser ni några historiska skärmdumpar på hur Skatteverkets webbplats sett ut genom åren. Så ni får en historik varför det ser ut som det gör idag.

Version 1.0

Version 1.0 av Skatteverket

Version 2.0

Version 2.0 av Skatteverket

Version 2.5

Version 2.5 av Skatteverket

Version 3.0

Version 3.0 av Skatteverket

Version 3.5

Version 3.5 av Skatteverket

Under många år arbetade många med att manuellt updatera webbplatsen. För något år sedan bytte vi detta manuella arbete till ett publiceringssystem, dock var det fortfarande mycket som var olika som t.ex. färg och typografi. Nedan ser ni är några skärmdumpar på alla olika variationer som fanns på webbplatsen. Jag gillar helst den med alla färgerna till höger, det var alla de färgerna om jag kunde hitta som bakgrundsfärger, färger på typsnitt etc.

Färger

Färger på Skatteverket

Typsnitt

Typografi på Skatteverket

Förbättringspotential

Vi såg ett antal punkter som vi ville fokusera på i detta projekt när vi nu skulle börja göra om, de kommer nedan.

1. Den röda tråden

Vi ville hitta en råd tråd som går igenom alla våra kanaler. Mycket material finns redan och vi kan inte börja designa om våra skyltar etc. Det gällde alltså att hitta saker i andra kanaler som skulle fungera bra på webben. Vi tittade bl.a. på hur våra skyltar och trycksaker såg ut och försökte hitta en ”röd tråd” där användare skulle kunna känna igen sig.

Skylt

Exempel på skylt på lokalt kontor. Vi använde bl.a. den blå bården med vit text som ett element i den kommande designen.

Broschyr

Exempel på broschyr. Vi använde bl.a. strecket under logotypen till våra huvudrubriker samt rutor när vi vill framhäva viss information på webben.

2. Variabelt typsnitt med fast layout

När vi började använda vårt publiceringssystem (hösten 2006) gick vi från en rambaserad (frame) webbplats till en tabellbaserad (table) webbplats. Design och layout ändrades dock inte i konverteringen men typsnitt fick bli variabelt. Det gick alltså att ändra storleken på typsnittet men layouten var fast. Detta ledde ganska snabbt till att om man ändrade storleken så bröts webbplatsen sönder.

Förstora texten

Förstora texten 2

 

Detta var något vi ville förändra. Genom att ändra layouten skulle den följa med bättre när man ändrar storleken på typsnittet.

3. Vit text på vit botten

Vi hade en del text som var vit på blå botten. Det fungerar helt ok, men när användaren började ändra storleken så flöt texten ut över den vita bakgrunden. Detta ledde till att vi fick vit text på vit botten vilket är omöjligt att läsa.

Alltså, minska på användandet av vit text så att detta inte skulle hända igen.

Vit text

4. Vår logotyp

Vårat varumärke. I den gamla designen använde vi en inverterad stående logotyp vilket inte framhäver Skatteverkets två primärfärger vilket är blå och gulockra. Detta var något vi ville ta fram bättre genom att använda vår liggande logotyp i färg.

Logotyper

5. Bättre användning av webbstandarder och stöd för andra enheter

När vi nu skulle göra om från början så ville vi även förbättra användning av webbstandarder. Alltså bättre kvalitet på html, semantisk struktur på dokument och separation av innehåll, design och funktion. När vi hade gjort detta blev det enkelt att lägga till stöd för andra enheter som mobiltelefoner och skrivare.

 

Själva arbetet

Ett av de första besluten vi tog kring layouten var att bredda webbplasten samt använda en layout som brukar kallas för flexibel layout. Vi hade haft en layout som var fast och anpassad för en upplösning på 800×600 (pixlar). Vi höjde nu detta ett snäpp till 1024×768 (pixlar). När användaren ändrar storleken på typsnittet så ändras även bredden på layouten.

Sedan började själva skissandet, vi började för hand (se nedan) och bollade efterhand med arbetsgruppen som kom med förslag och förbättringar.

Skiss

Efter en del skissande gick vi vidare med att arbeta på skärm. Vi bestämde att standardbredden skulle vara 960 pixlar (1024 pixlar minus skrollista och lite utrymme). 960 pixlar är ett bra mått då vi ofta måste kunna dela denna siffra i kolumner och rader. Sedan började vi jobba med så kallade rutnät (de blå vertikala linjer nedan). Layouten blev först uppdelad på 16 kolumner, alla med ett mellanrum på 20 pixlar. Bredden på kolumnerna kunde vi även använda för att sätta höjden på olika element (blå horisontella linjer, se nedan) som exempelvis huvudet på webbplatsen.

Rutnät

När rutnätet sedan var bestämt kunde vi enklare börja fylla kolumnerna men innehållsytor (grå rutor nedan) som huvud, navigering, innehåll och fot. Genom att använda ett rutnät så förenklar man arbetet och detta ger ett stöd i de layoutproblem som kan uppstå.

Rutnät 2

Det är dock bra ibland att bryta mot de ”regler” som vi satt upp, rutnätet ska vara ett stöd och inte en begränsning. Som exempel gjorde vi skisser på en global navigering. Till en början la vi dessa i linje med rutnätet som var uppsatt. Layouten blev alldeles för statisk och stel. Genom att bryta mot reglerna blev det mer dynamiskt och levande.

Se röd markering nedan.

Rutnät 3

 

Färger

Skatteverket har två primärfärger som återfinns i vår logotyp. Dessa ville vi använda för att webbplatsen skulle andas Skatteverket. Vi har även tagit fram ett antal sekundärafärger som vi kan använda i ikoner, bakgrundsfärger etc. Vi har sett ett behov att kunna använda andra färger men vill inte att dessa ska dominera för mycket. Dessa sekundärfärger är alla baserade på de två primärfärgerna. Tittar du idag på Skatteverkets webbplats kommer du se att det är dessa färger som används.

Primär- och sekundärfärger

Efter mer skisser och bollande med arbetsgruppen så var det dags att visa något för våra beställare. Det gick sådär. Rent layoutmässigt så var det bra, det var dock vissa saker som de ville att vi arbetade vidare med. Bland annat kändes skisserna platt och kall. Vissa delar hade dålig kontrast samt att det inte andades Skatteverket.

Refuserat förslag

Exempel på refuserat förslag.

Då var det bara tillbaka till ritbordet. Vi jobbade främst med designen på huvudet så den fick en varmare ton. Vi använde oss av mer toningar och skuggar för att få mer djup i layouten. Vi la även in ett fotografi på startsidan, något vi inte använt förut. Vi bestämde även att dessa bilder skulle bytas ut under året.

Detta var skissen som till slut godkändes (se nedan). Dock slutade vi inte där. Nu var det dags för själva byggandet. Nu skulle vi få allt att fungera på riktigt, inte bara som en bild.

Godkänt förslag

Verkstad

Arbetet med mallar var klassiskt när det gäller att bygga webbplatser. Först byggde vi allt lokalt. Html Htmlgfgflgkstrukturen först och sedan all css (det som styr färg och form). Eftersom Skatteverket har en bred målgrupp behöver vi supporta många webbläsare och operativsystem. Vi började med att bygga för webbläsare som har bra support för standarder och sedan fixade vi de problem som var uppenbara för de andra stora webbläsarna. Support för webbläsare i andra operativsystem som Mac och Linux var ganska enkelt när vi hade börjat i rätt ända. Sedan var det bara att lägga till ny css för skrivare och mobila enheter.

Efter att arbetat lokalt och hade klar html och css var det dags för att få in denna kod i vårt publiceringssystem. Vi började först med att testa på vår utvecklingsserver. Det var då vi stötte på en del problem. Eftersom publiceringssystemet själv skriver egen css för all typografi och annan viss design så blev det en hel del krockar som var tvunget att fixas. Systemet har även en del egenheter när det gäller att lägga in egen html i mallar men detta löste vi efter hand. Efter att vi fixat det mesta var det sedan bara att flytta över mallarna till produktionsmiljön. Den 16:e mars lanserades arbetet.

 

Färdig?

Nu när vi tittar på innehåll, struktur och funktionalitet för webbarna (i Projektanalys: webbplatser 2.0) så kommer det säkert att bli en del förändringar. Vi har redan sett när vi utvärderat att vissa saker behöver förbättras. Mycket som rör navigeringen, både den vänstra menyn och länkarna i toppen som tex. Sökord A-Ö.

Under hösten kommer vi titta på likande saker för Kronofogdens webbplats. Den har samma problem som Skatteverket hade med sin design så vi ska se vad vi kan förbättra.

Har du några frågor? Tycker du att något låter bra eller dåligt så lämna en kommentar så ska jag försöka förklara så gott jag kan.

/Jens

 

Referenser:

Webbstandarder

http://www.456bereastreet.com/lab/developing_with_web_standards/sv/webstandards/

Adobe Kuler

http://kuler.adobe.com

Tripplecode

http://www.triplecode.com/munsell/index.html

Optimal width for 1024px resolution?

http://www.cameronmoll.com/archives/001220.html

Grids are good

http://www.subtraction.com/pics/0703/grids_are_good.pdf

Designing with grids serie

http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_1/

Gridsystems in graphic design (bok)

http://www.amazon.com/Systems-Graphic-Design-Josef-Muller-Brockmann/dp/3721201450

Annonser

8 Responses to “Färg och form för Skatteverket”


  1. 1 Niklas augusti 9, 2007 kl. 20:30

    Intressant läsning! Kul att se hur ni jobbar med ett projekt som det här.
    Har länge avskytt skatteverkets gamla layout, kul att den äntligen uppdaterats!

  2. 2 Code Odyssey » Skatteverket förklarar hur man designade sin nya webbplats augusti 10, 2007 kl. 03:03

    […] Tycker att resultatet blev väldigt bra och det är kul att man delar med sig av arbetsprocessen på det här sättet. […]

  3. 3 Christian augusti 10, 2007 kl. 07:31

    Mycket intressant genomgång. Ska ta och köpa gridsystems boken. Keep it up!

  4. 4 Jens augusti 14, 2007 kl. 13:04

    Hej

    Tack för kommentarerna, hör gärna av er om det är något jag ska klargöra.

    Christian: Boken är helt klart läsvärd, dock är den riktad mot tryckt material men jag tycker det inte gör något. Bra referens.

  5. 5 Maria oktober 19, 2007 kl. 07:23

    Har länge tänkt på att ”Skatter” legat mitt i vänstermenyn men i alla fall jag använder just den delen mest. Nu har den fått en mycket bättre placering.

    Gillar er look-and-feel…skatteverket.se andas verkligen service och inte förmyndarorganisation.

    GRATTIS!


  1. 1 Webbsnack Så byggs Skatteverkets nya hemsida « Trackback vid augusti 9, 2007 kl. 11:59
  2. 2 DIGITALISTIC » Blog Archive » links for 2007-10-09 Trackback vid oktober 9, 2007 kl. 20:20
  3. 3 AV10 » Ruotsalainen vinkki Trackback vid oktober 18, 2007 kl. 08:39
Comments are currently closed.




%d bloggare gillar detta: