Webbplatser och e-tjänster

För att det ska vara lätta för stockholmarna att känna igen stadens verksamheter behöver även våra webbplatser ha ett liknande utseende. En viktig sak att tänka på är tillgänglighetsaspekten. Målet är att stadens webbplatser ska uppfylla W3C:s tillgänglighetsriktlinjer WCAG 2.0 nivå AA och E-delegationens riktlinjer till motsvarande nivå.

Riktlinjerna WCAG 2.0
E-delegationens riktlinjer


Här följer de grafiska riktlinjerna för stadens webbplatser.

Grid

En vertikal grid har tagits fram för olika digitala enheter så att det ska se enhetligt ut. Gridden består av 12 kolumner för desktop och iPad och 6 kolumner för mobiltelefoner.

Griddens bredd

Desktop

Gridd - 1200 px
Kolumnbredd - 78 px
Mellanrum - 20 px

Surfplatta
Stående –768 px
Liggande – 1024 px

Mobiltelefon
Stående –320 px
Liggande – 480 px

Typografi

Rubrikstorlekar

H1 MEGA –Stockholm Type Bold 72/80
H1 SUPER – Stockholm Type Bold 48
H1 – Stockholm Type Bold 36/40
H2 – Stockholm Type Bold 26/32
H3 – Stockholm Type Regular 24/32
H4 – Stockholm Type Regular 20/24
H5 – Opens Sans Semibold 16/24
H6 – Opens Sans Semibold 12

Ingress

Open Sans Light 24/32

Brödtext

Open Sans Regular 16/24

Citat

Stockholm Type Bold 20

Typsnitt via font-tjänst

Open Sans finns på Googles font-tjänst. För Stockholm Type på webben har staden en egen font-tjänst.

Baslinjeraster

Ett baslinjerasteranvänds för att avstånd mellan till exempel rubrik och text eller mellanstycken blir samma överallt. Baslinjerastret har en höjd på 8 pixlar perbasenhet.

Avstånd mellan:

  • H1 och ingress – 4 basenheter (i samma stycke)
  • ingress och brödtext – 4 basenheter (i samma stycke)
  • stycken – 5 basenheter
  • H2 och brödtext – 2 basenheter
  • H3, H4, H5 och brödtext – 1 basenhet

Färger

För att skapa samma färgintryck med god kontrast i våra digitala kanaler har vi tagit fram en färgpalett för webben med RGB och HEX-värden för respektive färg.
Färgpalett för digitala kanaler

Sidhuvud

Placering och storlek på logotypen i sidhuvudet på olika enheter.

Desktop

 Höjden på logotypen är 48 px och avståndet ovanför logotypen är 3 basenheter, alltså 24 px. Logotypen är placerad på kolumnen längst till vänster i gridden.

Ett streck som är lika högt som logotypen skiljer den från namnet i sidhuvudet. Strecket är placerat 52 px från logotypen och namnet 20 px från strecket. Namnet är centrerat i höjdled mot strecket.

Surfplatta

På surfplattor används endast skölden. Höjden på skölden är 96 px och avståndet ovanför skölden är 6 basenheter, alltså 48 px. Skölden är placerad på kolumnen längst till vänster i gridden.

Ett streck som är lika högt som skölden skiljer den från namnet i sidhuvudet. Strecket är placerat 40 px från logotypen och namnet 30 px från strecket. Namnet är centrerat i höjdled mot strecket.

 Mobil

På mobiler används endast skölden. Höjden på skölden är 64 px och avståndet ovanför skölden är 4 basenheter, alltså 32 px.

Skölden är placerad på kolumnen längst till vänster i gridden.

Ett streck som är lika högt som skölden skiljer den från namnet i sidhuvudet. Strecket är placerat 16 px från logotypen och namnet 30 px från strecket. Namnet är centrerat i höjdled mot strecket.

Färg på sidhuvudet

Sidhuvudet kan ha olika färger.

Meny och sök i sidhuvudet

I sidhuvudet placeras meny och sökfunktion. I mobiler med bara skölden och verksamhetsnamnet hamnar meny och sökfunktion under sidhuvudet.

Sidfot

Sidfoten kan antingen vara grå eller svart men alltid med S:t Erik i nedre vänstra hörnet.

Komponenter

En webbplats består ju av många olika komponenter såsom listor, knappar, tabeller , formulär med mera. I pdf-filen nedan finns de olika komponenterna samlade.

Komponenter (pdf-fil)

 

Funktionsikoner

Funktionsikonerna förtydligar de olika funktioner på webbplatsen såsom ett förstoringsglas för sökfunktionen, en tratt för filtrering eller en pratbubbla för kontakt. I pdf-filen nedan hittar du de olika funktionsikonerna.

Funktionsikoner (pdf-fil)

Ikoner för webb

I vår grafiska profil ingår ikoner som används som illustrationer. För webb finns anpassade ikoner med tunnare linjer som fungera bättre även i mindre enheter.
Läs mer om ikonerna för webb

Domännamn

Alla webblösningar som utvecklas i staden ska läggas under stockholm.se-domänen. Det innebär att webbplatsens adress blir ”adress.stockholm.se”, där adress är namnet på webbplatsen. Detta är också en förutsättning för att webblösningen ska kunna använda stadens font-tjänst för att få rätt typsnitt på webben.

För att beställa uppsättning av ett domännamn skickar du information om uppsättningen av webbplatsen till redaktion@stockholm.se.

När vi skriver ut namn till olika webbplatser eller sidor så gör vi alltid det som hänvisningar direkt efter stockholm.se-domänen. För stadens webbplats för företagare så blir det alltså:stockholm.se/foretag.

Även om webbplatsens logiska adress i det här fallet är foretag.stockholm.se så ska alltid en hänvisning på stockholm.se sättas upp för att göra det tydligt att det är Stockholms stad som är avsändare, i till exempel tryckt information.

E-tjänster

Det är viktigt att man tydligt ser att e-tjänsterna de hänger ihop med stockholm.se. Med hjälp av typsnitt, färger och layout skapar du igenkänning.
Här hittar du styleguide för e-tjänster

Namngivning

När du väljer ett namn till din e-tjänst tänk på att användaren direkt ska förstå vad den ska användas till.

  • Namnet ska avspegla vad man kan göra och vilket område det handlar om. Till exempel Hitta parkering eller Sök radonmätning.
  • Ordet Stockholm behöver inte finnas med i namnet.
  • Hitta inte på egennamn eller interna förkortningar.