Sidjämförelse

Ikoner

Ikoner i 1177 Vårdguidens :s grafiska profil är framtagna för att vara tydliga, enkla och känneteckna 1177 Vårdguidens :s varumärkesprofil. Tjänster under 1177 Vårdguidens :s varumärke använder primärt varumärkesspecifika och egenritade ikoner.

Ikonerna är tvåfärgade med två olika nyanser i samma färgskala (bas och mörk). Ikonerna är ej fyllda (outlinade) och har en linje på 1,5 px i 40x40 px storlek. 

Ikonerna kan användas i röd, blå eller grå färgskala:

• Röd: Används främst för navigationselement i ramverket, dvs i sajthuvud (navigation) eller i sajtfoten (stödlänkar).

• Blå: Används för ikoner vid länkar eller till funktioner med call to action som knappar etc.

• Grå: Används till ikoner som är informativa och inte har någon call to action. Dvs som inte tillhör navigationselement, är länkade eller knutna till en funktion. (Undantag: förstoringsikon på bilder)
  

Exempel: Ikonen användare finns här i röd, blå och grå variant. Röd används för inloggningsfunktion som är placerad i ramverket/sidhuvud. Blå används om exempelvis en knapp för inlogging är placerad på sidan i innehållet. Grå används t.ex om inloggningsfunktionen är disablad eller om det handlar om information om inloggning och inte är klickbart.

1177.se använder sig uteslutande av varumärkesspecifika och egenritade ikoner.

Grid och specifikation

• 40 x 40 px arbetsyta
• 1.5 px linjetjocklek
• 2 px hörnradie
• Linjens ändar ska vara rundade
• Avskurna linjer behöver inte ha rundat avslut
• Använd två nyanser av samma färg på ikonen (bas och mörk)
• Detaljer inne ikonen har den ljusare nyansen

Undantag - övriga ikoner

Varumärkesspecifika ikoner ska alltid användas i första hand, men i vissa specifika fall kan ikoner från Googles Material Design användas. Det gäller exempelvis om ett större antal ikoner snabbt behöver tas fram och det inte finns möjlighet eller budget för att ta fram nya varumärkesspecifika ikoner. I dessa fall hänvisar vi till Google material designs ikonbibliotek. Använd koner med ramlinje (ej fyllda).

Google Material design ikonbibliotek

Länkade ikoner = blå #396291

Ej länkade ikoner = grå #636466

Exempel

Några exempel på hur vi använder ikoner med hjälp av Fontello eller som SVG filer inbäddade i CSS koden.

Favikoner

1177 Vårdguidens har olika favikoner för tjänster för invånare respektive profession. Favikoner för 1177 Vårdguiden invånare är vit logotyp på röd bakgrund, medan favikoner för 1177 Vårdguiden profession är röd logotyp på vit bakgrund.

Do’s and Don’ts

• Använd primärt varumärkesspecifika och egenritade ikoner.

• Röda ikoner = för ramverket i sajthuvud (navigation) eller i sajtfoten (stödlänkar).

• Blå ikoner = funktion eller länk

• Grå ikoner = informationselement, ej länkade eller cta

Tillgänglighet

Även för ikoner, som utgör en form av grafiskt element på sidan, gäller samma kriterier som för bilder generellt under WCAG 2.1 Nivå AA. Se riktlinjer under Tillgänglighet.

• Alternativ text (ALT-text) när ikonen saknar kompletterande text.

• Tillräcklig storlek för en klickbar yta (om ikonen är klickbar)

• Tillräcklig kontrast mellan ikon och bakomliggande element

Material

Ikoner - primära/varumärkesspecifika

Här finns en samling av 1177 Vårdguidens :s varumärkesspecifika ikoner (svg). Finns även i Figma:

Här finns favikoner som används för 1177 Vårdguiden :s Invånartjänster (png, svg):

Här finns favikoner som används för 1177 Vårdguidens :s tjänster för Profession (png, svg):

Övriga ikoner

Google Material design ikonbibliotek

Research på komponenten

-

Relaterade resurser/komponenter

• Sketchbiblioteket

• Varumärkesmanual 1177 Vårdguiden - Grafiska element

Status