Gå til hovedinnhold
Entur logo – designsystemets starside
IDENTITET

Ikoner

Gir visuell kontekst og forbedrer brukervennligheten

Ikoner blir brukt for å maksimere forståelsen og redusere kognitiv belastning når du trenger å rette oppmerksomhet mot en bestemt handling, kommando eller seksjon. Se en liste over alle ikoner og last dem ned i ikonoversikten vår.

Ikonstil

Entur sine ikoner kombinerer et profesjonelt og lekent uttrykk. Ikonene våre er stilrene med avrundede hjørner som gjør dem lette å lese. Ikonene skal være enkle å kjenne igjen og huske, slik at folk raskt forstår hva de betyr og husker dem til senere.

Et oversiktsbilde som viser et større utvalg at tilgjenglige Entur-ikoner

Ikonfarge

Entur sine ikoner benytter kun én farge om gangen. Standardfargen for Entur-ikonene er Entur Blå / Lavender-90 #181C56 på lys bakgrunn og hvit #ffffff på mørk bakgrunn. Unntaket er transportikoner som benytter spesifikke transportfarger.

En sammenligning av to ikoner der det venstre er en billett plassert på en lys bakgrunn med Entur Blå som strekfarge og det høyre er en bille pøassert på en Entur Blå bakgrunn med hvit strekfarge

Universell utforming

Når du bruker ikoner i arbeidet ditt, spesielt i digitale produkter, er det viktig å sørge for at ikonene har tilstrekkelig kontrast mot bakgrunnen. Dette sikrer god lesbarhet og at designet oppfyller kravene for universell utforming. Du kan sjekke kontrasten ved å bruke vår kontrastsjekker.

Prinsipper

Gridsystem

Entur-ikonene er bygd ved hjelp av et gridsystem som gir retningslinjer for forskjellige former, inkludert rektangler, sirkler og trekanter. Gridsystemet omfatter også padding for å sikre god balanse og lesbarhet for ikonene.

En visuell fremstilling av gridsystemet som brukes for ikoner. Det består av ulike rettningslinjer og srikler som veileder hvor ikonet skal ligge innenfor.

Størrelser

Entur-ikonene tegnes i et gridsystem med størrelsen 32 px × 32 px, og de skaleres lineært opp eller ned til ulike størrelser. I dag bruker vi fire forskjellige størrelser for ikoner i designsystemet: 32 px, 24 px, 20 px og 16 px.

En visuell fremstilling av billettikonet i de fire ulike størrelsene plassert inne i gridsystemets rettningslinjer.

Ikonoppbygging

En tabelloversikt som viser ulike nøkkeltall for tykkelser på streker i ikonene under ulike størrelser.
Rediger denne siden på Bitbucket