Publicerad 8 mars 2021

Grafisk form för webb

Huvudprincipen är att webbplatsen ska efterlikna webbplatsen www.skr.se i så hög utsträckning som möjligt, dock utan att riskera att förväxlas med denna.

Här hittar du beskrivningar och exempel för SKR:s grafiska form för webb.

Grafiska element

  • Användarbild / avatar

    Bilder på användare och avatarer är alltid runda. Dessa används för att "personalisera" sidornas avsändare, kontaktpersoner eller liknande. Runda porträttbilder kan också användas i sammanhang där avsändarens person är en viktig ingrediens, till exempel blogginlägg.
  • Artikellista

    Artikellistan kan innehålla länkar till nyheter, kurser, rapporter och så vidare.
  • Brödsmula

    Brödsmula ska finnas på alla sidor för att underlätta för besökaren att veta var i strukturen hen befinner sig, samt göra det enkelt att navigera en eller flera nivåer tillbaka.
  • Datum

    Datum ska alltid anges på ett konsekvent sätt. Om datum presenteras olika kan det lätt bli förvirrande för besökaren.
  • Diagram

    Alla diagram ska använda Open Sans som teckensnitt. Färgvalet är fritt, men måste uppfylla kraven i WCAG 2.1 AA.
  • Etikett / överskrift

    Etiketter/överskrifter kan användas för att förtydliga vilken sorts information som finns på en viss del av sidan. Till exempel kan etiketten/överskriften "Aktuellt" användas för en lista med nyhetsartiklar.
  • Formulär

    Storleken på formulärfält ska anpassas till den information som användaren behöver fylla i. Använd så få fält som möjligt och minimera antalet fält som är obligatoriska.
  • Färger, webbplats

    Färgsättningen på SKR:s webbplatser är fri, så länge färgerna uppfyller kraven i WCAG 2.1 AA. Särskilt beaktande behöver tas vad gäller kontrastverkan och färger som lätt kan förväxlas med varandra.
  • Huvudmeny

    Om webbplatsen använder en huvudmeny ska denna reflektera webbplatsens grundläggande struktur och sortering. Genom behovsanalyser, effektkartläggning och användningstester kommer man fram till hur webbplatsens innehåll bäst ska sorteras.
  • Informationsruta

    Informationsrutan används för att flika in fakta eller relaterad information i innehållet.
  • Knappar

    Webbplatsen kan använda tre olika sorters knappar: primär knapp, sekundär knapp och "hero-knapp". SKR använder sig av så kallad "flat design" på knappar.
  • Länkar

    Länkar läggs inte inne i brödtexten utan ska presenteras som eget stycke i anslutning till brödtexten. Länkar är alltid understrukna och har en färg som följer WCAG 2.1 AA.
  • Puff

    Puffar används för att lyfta fram ett särskilt innehåll lite extra. Puffen består av en bild, rubrik och kort förklarande text. Puffen länkas sedan till relevant sida på webbplatsen.
  • Sidfot

    Sidfoten på en SKR-webbplats ska alltid innehålla information om avsändaren, kontaktinformation och i förekommande fall länkar till eftersökta delar av webbplatsen eller sidor som inte kan nås via huvudmenyn.
  • Sidhuvud

    Sidhuvudet ska innehålla webbplatsens logotyp eller namn, samt SKR:s logotyp om SKR är avsändare. Sidhuvudet innehåller även huvudmenyn om webbplatsen har en sådan.
  • Sökruta

    Webbplatsen bör ha en sökfunktion eftersom det för de flesta besökare är det främsta navigeringsstödet, förutom menyerna.
  • Tabell

    Varannan rad i en tabell ska vara färgad för att öka läsbarheten. Varje tabell ska ha tabellbeskrivning och tabeller får enbart användas för presentation av data.
  • Typografi, grundläggande

    Grundläggande typografi på SKR:s webbplatser är Open Sans för ingress, brödtext, navigering och beskrivningstexter, samt Georgia för rubriker.
  • Undermeny

    Undermenyn innehåller länkar till webbplatsens sidor på nivå 2 och neråt. På www.skr.se döljs andra nivå 2-länkar än den där man befinner sig när man klickat fram länkarna på nivå 3 och nedåt. Detta är dock inte obligatoriskt beteende för SKR-webbplatser.
  • Utfällbart innehåll

    Utfällbart innehåll är en funktion där innehåll döljs tills besökaren klickar på en rubrik.
  • Valbara filter

    Valbara filter används exempelvis i sökfunktioner.
  • Ämnestaggar

    Taggar kan användas för att användarna ska kunna navigera mellan olika kategorier av innehåll eller för att förstärka innehållets ämnestillhörighet.

Kontakt

Kontakta SKR

Har du en fråga med anledning av det pågående virusutbrottet?

Titta först på våra frågor och svar som finns här på webbplatsen.

Covid-19 och det nya coronaviruset