Frida Winter

Digitalt

När Göteborgs Stad tar fram nya digitala kanaler skapas dessa i samråd med webbstrategiska enheten, som ansvarar för stadens digitala kanalstrategi och externa digitala kanaler. När vi producerar digitalt innehåll till externa och interna kanaler följer vi de anvisningar som finns i Göteborgs Stads grafiska manual och mallar. Anvisningarna är anpassade för produktioner inom digitalt och tryck. Digitalt innehåll kan innefatta puffar, banners, illustrationer, filmer, animationer eller inlägg i sociala medier. I det här avsnittet finns anvisningar för vad som gäller för digitala gränssnitt.

Lagen om webbtillgänglighet

Lagen om webbtillgänglighet omfattar myndigheter, landsting, kommuner och andra aktörer som klassas som offentligrättsliga organ. Det innebär att upphandlande myndigheter och privata aktörer som utför tjänster med offentliga medel i de flesta fall ska uppfylla kraven om webbtillgänglighet. Lagen omfattar aktörers webbplatser, appar och så långt det är möjligt även innehåll som sprids via tredje part. Till exempel via sociala medier. Lagen trädde i kraft 23 september 2018.

Göteborgs Stads grafiska manual och mallar följer den internationella standarden WCAG 2.1 (Web Content Accessibility Guidelines) för tillgänglighet i digitala gränssnitt och för digitalt innehåll. WCAG innehåller ett stort antal rekommendationer för att göra webbinnehåll tillgängligt även för personer med olika typer av funktionsvariationer. Det blir dessutom mer användbart för alla användare. Därför är det viktigt att du följer de anvisningar som finns för färg, typografi och andra funktioner i manualen.

Här kan du läsa de officiella riktlinjerna för hur man bör arbeta med webbplatser i offentlig sektor: www.w3.org/Translations/WCAG20-sv/

www.webbriktlinjer.se

www.funka.com/lagar-och-regler

Digitala gränssnitt

Sidhuvud i webbgränssnitt

Bakgrundsfärgen på sidhuvudet ska vara vitt. I sidhuvud använder vi den liggande logotypen. Den placeras till vänster och ska linjera med innehållet på sidan.

Minsta storlek för logotyp i sidhuvud i desktop-läge är 168x56 px. Minsta marginaler runt logotyp i desktop-läge är är 36 px.

Minsta storlek för logotyp i sidhuvud i mobilt läge är 111x37 px. Minsta marginaler runt logotypen i mobilt läge är 12 pt.

Sidfot i webbgränssnitt

Bakgrundsfärgen på sidfoten ska vara grå (färgkod #ebebeb). I sidfot använder vi den liggande logotypen. Den placeras till vänster och ska linjera med innehållet. Under logotypen placerar vi information om vem som är ansvarig för sidan och kontaktuppgifter. Minsta storlek för logotyp i sidfot i desktop-läge är 47 px hög. Minsta marginaler runt logotypen i sidfoten är 47 pixlar.

Minsta storlek för logotyp i sidfot i mobilt läge är 37 px hög. Minsta marginal till vänster om logotypen i sidfoten i mobilt läge är 12 px. De övriga minsta marginalerna runt logotypen i sidfoten i mobilt läge är 37 px.

Vid samarbeten mellan olika parter, läs mer i avsnittet Logotyp och avsändare.

Ladda ner rätt logotyp för digital användning under avsnittet Logotyp och avsändare.

Typografi i digitala gränssnitt

Teckensnittet Open Sans används i både rubriker och löpande text i digitala gränssnitt. För att läsbarheten ska bli god separerar vi text och bild. Kursiv text och fetstil i löpande text ska användas på samma vis som i tryck, det vill säga endast för att markera ord eller betoningar. Vi använder oss inte av versaler i rubriker, länkar eller löpande text då de försämrar läsbarheten. Versaler kan användas vid förkortning som ”EU”, OK” och dylikt. Vi använder endast understruken text i länkar. Menyer, texter i menyer, löpande text och rubriker ska vara vänsterjusterade.

Funktionsfärger

För att särskilja innehåll i ett gränssnitt från meddelanden eller knappar använder vi funktionsfärger. Varje funktionsfärg har en särskild betydelse och ska inte förväxlas med användningen av Göteborgs Stads komplementfärger.

Palett funktionsfärger

Bakgrund

HEX# ebebeb

Typografi

HEX# 333333

Länkar
Primär knapp

HEX# 005799

Primär knapp, hover
Länkar, hover

HEX# 004172

Bakgrund neutralt meddelande

HEX# cce3f1

Besökta länkar

HEX# 674a99

Positiv knapp
Positivt meddelande

HEX# 00664a

Positiv knapp,
mouse over

HEX# 004e38

Bakgrund för positivt meddelande

HEX# d0efd5

Negativ knapp
Felmeddelande
Krismeddelande

HEX# ad1d24

Negativ knapp,
mouse over

HEX# 83161c

Bakgrund för negativt meddelande

HEX# ffece6

Varningsmeddelande

HEX# ffd23c

Bakgrund för varningsmeddelande

HEX# fff6c4

Funktionsfärger på meddelande


1. Neutralt meddelande. 2. Varningsmeddelande. 3. Positivs meddelande. 4. Negativ meddelande (kan också användas vid krismeddelande)

Funktionsfärger på knappar

1. Primär knapp. 2. Knapp, positiv bekräftelse. 3. Knapp, negativ uppmaning

Komplementfärger digitala gränssnitt

Göteborgs Stads komplementfärger är framtagna för att skapa hög läs­barhet och kontrast mot text i alla kanaler. De ska också skapa hög igenkänning, oavsett om de används på skärm, i tryck, i dagspress eller på profilprodukter. Läs mer om Göteborgs Stads komplementfärger i avsnittet Färg. Komplement­färgerna används inte till fasta ramverk eller funktioner.

Tänk på kontrast vid val av bakgrundsfärg

I figuren ovan framgår om valet av färg på texten ska vara svart eller vit beroende på vilken färg bakgrundsfärgen har.

Tänk på kontrasten vid val av knappar

1. Knapp läs mer, vid ljus bakgrund. 2. Knapp läs mer, vid mörk bakgrund. Hörnen på knappar ska vara raka. Texten på knappar ska vara i fetstil och i versalgement. Undantag specificeras i stycket Typografi i digitala gränssnitt.

Ikoner i digitala gränssnitt

Ikoner är bilder som ska stämma överens med vad de representerar och hjälpa oss att orientera i digitala gränssnitt. Ett exempel på detta är ikonen för utskrift, som är en skrivare. Ikoner ska visa på en enskild funktion eller återkommande funktion. De ska vara lätta att avläsa i kontrast då de ofta kompletterar text. Göteborgs Stad har en standarduppsättning av ikoner som går att använda genomgående i alla digitala gränssnitt som representerar staden. Om du behöver fler ikoner, kontakta enheten visuell kommunikation.

Appar

App-gränssnitt ska följa anvisningarna för digitala gränssnitt i manualen. När vi tar fram ikoner för appar ska ikonen representera och vara relevant för tjänsten som verksamheten erbjuder.

Använd Göteborg Stads pedago­giska manér för illustration vid framtagning av ikoner. När appen öppnas ska Göteborgs Stads logotyp vara med som avsändare på startsidan. Om verksamheten är särprofilerad, följ anvisningar för appar i bilagan Särprofilerade verksamheter i Göteborgs Stad.

Ikoner i det pedagogiska manéret.

Ikon i mobilt gränssnitt