Sidjämförelse

...

...

Ikoner

Tjänster under 1177 Vårdguidens varumärke använder primärt varumärkesspecifika och egenritade ikoner. Färg beror på vilken typ av användningsområde ikonen har:

• 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 som knappar etc.

• Grå: Används till ikoner som hör till informationselement 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 Inloggning/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.

...

Övriga ikoner

Vissa övriga verktyg eller tjänster under varumärket 1177 kan behöva ytterligare ikoner för vissa funktioner, t.ex. om det behövs en större mängd och det inte finns möjlighet att rita egna.
Här hänvisar vi till att använda Google Material designs ikonbibliotek. Ikonerna ska vara med ramlinje (ej fyllda).
Dessa ikoner används bara i de fall det inte är möjligt att använda varumärkesbrandade/egenritade ikoner.

Blå: Länkade ikoner.
Grå: Ej länkade ikoner.

Exempel på tjänst som använder Google material designs ikoner är Vårdgivaringångarna.

...

Exempel

Ikoner som används för digitala tjänster under varumärket Inera är primärt bruna eller turkosa.

• Ikoner i sajthuvud, för Senast uppdaterad samt Alert är bruna. Dessa är hämtade från https://designmodo.com/linecons-free/

• Ikoner till funktioner och länkar är turkosa. Dessa är samma som används för 1177 Vårdguiden och egenritade.
  
  

...

Exempel (ska uppdateras)

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

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

• ikoner hämtade från https://designmodo.com/linecons-free/ eller egenritade ikoner.

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

Här finns en samling av 1177 Vårdguidens varumärkesspecifika ikoner de ikoner som används på Inera.se i svg och png. (Finns även i Sketchbiblioteket):

Övriga ikoner

...

Research på komponenten

-

Relaterade resurser/komponenter

• SketchbiblioteketVarumärkesmanual 1177 Vårdguiden - Grafiska element

Status

...