Digitala gränssnitt

Tänk på

• När Göteborgs Stad tar fram nya digitala kanaler ska det ske i samråd med webbstrategiska enheten, som ansvarar för stadens digitala kanalstrategi och externa digitala kanaler. Läs mer på temasidan Externa digitala kanaler och tjänster.
• Innehåll till externa och interna kanaler ska följa den grafiska profilen. Läs mer under respektive sida för logotyp, färg, typsnitt, bild och designsystem. 

Exempel på utformning av digitala gränssnitt som följer stadens grafiska profil.

Logotyp i sidhuvud och sidfot

• Använd den liggande logotypen i formatet svg mot vitt i sidhuvud och i sidfot. Placera den till vänster och linjera med innehållet på sidan.
• Lägg generöst med fri-yta runt om logotypen.
• Placera information om vem som är ansvarig för sidan tillsammans med kontaktuppgifter under logotypen i sidfoten. Bakgrundsfärgen på sidfoten ska vara grå (färgkod #ebebeb).

Minsta storlek för logotyp i sidhuvud är 168x56 px (72 ppi) i desktop-läge och 110x37 px (72 ppi) i mobilt läge. Minsta storlek för logotyp i sidfot är 140x46 px (72 ppi) i desktop-läge och mobilt läge.

Typografi i digitala gränssnitt

• Använd Open Sans i både rubriker och löptext och följ instruktionerna på sidan Typsnitt. Du använder dig av samman skärningar för rubriker och brödtext som i annan digital kommunikation. Storleken på typsnittet kan variera men bör behålla samma proportioner och känsla.
• Separera bild och text för att göra texten läsbar för alla.
• Använd bara understruken text i länkar.

Exempel på storlekar och skärningar av typsnittet Open Sans.

Färg i digitala gränssnitt

Läs mer om stadens komplementfärger och hur du väljer funktionsfärger för meddelanden, knappar och länkar för text på sidan Färg.

Interaktiva knappar

• Använd i första hand de primära knapparna i stadens funktionsfärger. När du använder annan färg ska du utgå från stadens mörka komplementfärger med vit text.
• Se till att knappen har god kontrast mot bakgrunden och att länktexten eller knappen markeras när du drar muspekaren över knappen.
• Hörnen på knappar ska vara raka.

Funktionsfärger på primära knappar och länkar i text. Hitta färgkoder på sidan Färg.

Knappar i stadens mörka komplementfärger. Till höger ser du hur knappen kan förändras när knappen markeras.

Exempel på knapp mot mörk respektive ljus bakgrund.

Ikoner i digitala gränssnitt

Läs mer om du använder dig av webbikoner i digitala gränssnitt och hur du får tillgång till stadens gemensamma ikoner för kommunikation i alla kanaler på sidan Ikoner.

Appar

App-gränssnitt ska följa instruktionerna för digitala gränssnitt ovan. Läs mer om app-ikoner på sidan Ikoner.

Exempel på en app-ikon som fungerar i tre storlekar med god kontrast. På startsidan (mittenbilden) ska även Göteborgs Stads logotyp synas.

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 funktionsvariationer. Det blir dessutom mer användbart för alla användare.

Läs mer om kraven för film och animerad film i stadens digitala kanaler på Kommunikation i staden.

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

­Inspiration och mer information

Se exempel på leveranser som är gjorda enligt grafisk profil på intranat.goteborg.se/visuellkommunikation

Har du frågor eller behöver rådgivning?
Kontakta enheten visuell kommunikation