Illustrations

Illustrationerna kompletterar våra ikoner och är gjorda för större ytor där vi vill få in mer personlighet och varumärkesnärvaro. De hjälper användaren att snabbt förstå innehållet och ger ett mer levande uttryck i gränssnittet.

Open

1177 Invånare

Open

1177 Vårpersonal

 

 

Open

Inera

Innehållsförteckning

Komponentkällor

1177

 

Inera

 

Designspecifikation

Varianter och format

• Finns för: 1177 Invånare, 1177 Vårdpersonal och Inera

• Fungerar i både light mode och dark mode

• Levereras som SVG (primärt för gränssnitt) och PNG (t.ex. presentationer och dokument)

När använder vi illustrationer?

Illustrationer används när vi har lite mer utrymme och vill förstärka budskapet visuellt, till exempel:

• Snabbingångar / ingångskort på startsidor

• Introduktioner till tjänster och flöden

• Tomt-läge / “inget innehåll än”

• Informationssidor och kampanjytor

Ikoner används för små, funktionsnära ytor – illustrationer för sammanhang och storytelling.

Branding och stil

• Bygger på två färger: en basfärg och en accent för detaljer

• Följer respektive varumärkes färgpalett – lägg inte till egna färger

• Enkel, ren stil med tydliga former och minsta möjliga detaljer

• Samma uttryck inom en serie – blanda inte illustrationer från andra stilar

Storlek och placering

• Använd illustrationer i mellan till stora storlekar – inte som ikoner

• Undvik att göra dem så små att detaljer försvinner eller blir “brus”

• Låt illustration och rubrik jobba tillsammans; placera gärna illustration över eller bredvid rubriken

• Se till att det finns tillräckligt med luft runt illustrationerna så att de inte konkurrerar med text och knappar

Tillgänglighet

• Illustrationer ska aldrig bära kritisk information ensamma – kombinera alltid med rubrik och brödtext

• Säkerställ tillräcklig kontrast mot bakgrunden, särskilt i dark mode

• Använd inte illustrationer som ersättning för tydliga ikoner i interaktiva element
  
  

Illustrationer i SVG och PNG

Illustrationerna finns samlade per varumärke och läge (light/dark) i en zip-fil:

Open

Riktlinjer

• Välj illustration utifrån målgrupp (1177 invånare, 1177 vårdpersonal eller Inera)

• Använda originalfilerna från ZIP:en.

• Anpassa storlek efter ytan, men behåll proportioner

• Håll god kontrast mot bakgrunden (minst AA i UI).

• Använda samma stil konsekvent inom samma vy eller flöden utan effekter (inga skuggor/toningar).

Undvik detta

• Skala aldrig om så att illustrationerna blir lika små som ikoner.

• Ändra färger, linjer eller lägga till egna effekter (skuggor, gradients, filter)

• Beskära delar av illustrationen så att motivet blir otydligt

• Ändra inte proportioner eller linjetjocklek.

• Skala på en längd (“stretch”).
  
  

Feedback

Hjälp oss att förbättra den här komponenten genom att ge feedback, ställa frågor och lämna andra kommentarer på Inera UX Slacken i kanalen #komponenter_design eller #komponenter_kod alternativt kan du använda vårt formulär.