Webbsidor och appar
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.
- För dig som är anställd i Göteborgs Stad: Läs mer på sidan Webb, sociala medier och intranät i digitala navet.
- 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.
Logotyp i sidhuvud och sidfot
- Använd den liggande logotypen mot vitt i sidhuvud och vitt, grått eller svart i sidfot. Placera den till vänster och linjera med innehållet på sidan. I appar kan den även ligga centrerat.
- Lägg generöst med friyta runt om logotypen.
- Placera information om vem som är ansvarig för sidan tillsammans med kontaktuppgifter under logotypen i sidfoten.
För information kring användning av logotyp, nedladdning av logotyp för skärmar eller favicon hittar du på sidan Logotyp.
Minsta storlek för logotyp i sidhuvud och sidfot är 145 px i bredd (72 ppi) i desktop-läge och 115 px (72 ppi) i mobilt läge. Bilderna visar måtten i bredd på goteborg.se. Sidfoten kan ligga mot vit, grå eller svart bakgrund.
Typografi
- Använd Open Sans i både rubriker och löptext och följ instruktionerna på sidan Typsnitt. Du använder dig av samma 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 och skriv tydliga länktexter.
- All text ska vara versalgemen. Det ökar läsbarheten för så många användare som möjligt.
Exempel på storlekar och skärningar av typsnittet Open Sans. För mer detaljerad information om typografiska nivåer se avsnittet Typografi i styleguiden för goteborg.se.
Färg
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 svart och vitt mot stadens komplementfärger som bakgrundsfärg.
- 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, positiva och negativa knappar samt färgade länkar i text. Hitta färgkoder på sidan Färg.
Exempel på knapp mot mörk respektive ljus bakgrund. Tänk på att tillgänglighetskrav för kontrast (3:1) gäller för knappar mot bakgrundsfärgerna.
Ikoner på webben
Läs mer om du använder dig av webbikoner på webbplatser 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 webbsidor ovan. Läs mer om app-ikoner på sidan Ikoner.
Svensk tillgänglighetslag (DOS-lagen)
Lag (2018:1937) om tillgänglighet till digital offentlig service innehåller krav på tillgänglighet för all digital service som en offentlig aktör erbjuder.I korthet innebär lagen att Göteborgs Stad ska ha webbplatser, appar och intranät där innehållet är anpassat för att följa lagen om tillgänglighet till digital service. Några exempel är att film och poddar ska vara undertextade och syntolkade, pdf:er ska vara tillgänglighetsanpassade, bilder ska ha alt-text och det måste vara hög kontrast mellan text och bakgrundsfärger.
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.
Här kan du läsa de officiella riktlinjerna för hur man bör arbeta med webbplatser i offentlig sektor:
Web Content Accessibility Guidelines (WCAG) 2.1
Webbriktlinjer – DIGG (Myndigheten för digital förvaltning)
Styleguide goteborg.se
En styleguide är en uppsättning riktlinjer och regler som definierar det visuella uttrycket och interaktionen med användare för en digital produkt eller tjänst. Den innehåller vanligtvis information om färger, typografi, ikoner, layout, knappstilar, interaktiva element och annat grafiskt material. Syftet med en styleguide är att säkerställa tydlighet och enhetlighet i designen och användarupplevelsen.
En styleguide kan användas av både designers och utvecklare.
Vad kan du använda styleguiden till?
- Designers: En styleguide hjälper dig att skapa enhetlig design. Den fungerar som en referens för att säkerställa att formen och de interaktiva delarna stämmer överens med det övergripande visuella konceptet eller grafiska profilen för produkten.
- Utvecklare: En styleguide ger dig tydliga riktlinjer och specifikationer för hur designen ska implementeras i kod. Den underlättar utvecklingsprocessen genom att ge en enhetlig struktur och hjälper till att undvika missförstånd mellan designers och utvecklare.
Det går bra att använda styleguiden för goteborg.se när du tar fram externa webbplatser. Den är framtagen för att fungera i fler sammanhang.
Klicka här för att komma till styleguide för goteborg.se
Inspiration och mer information
För dig som är anställd i Göteborgs Stad:
- Hitta mer information om tillgängligt innehåll i digitala kanaler på stadens intranät Digitala navet.
- Se exempel på leveranser som är gjorda enligt grafisk profil i Digitala navet.
Har du frågor eller behöver rådgivning?
Mejla enheten visuell kommunikation