Designguide for Webudvikling i Aros Forsikring

Med denne designguide sikrer vi kontinuitet og sammenhæng på tværs af alle Aros Forsikrings visuelle elementer. Et sikkert og genkendeligt udtryk skal være med til at øge kendskabsgraden og understøtte positionen som det sikre valg ifølge danskerne.

Introduktion

En designguide for Aros Forsikring sikrer en ensartet visuel identitet på tværs af alle digitale medier. Den styrker brandgenkendelsen og optimerer arbejdsprocesser ved at fastsætte klare designstandarder.

Formålet med en designguide for Aros Forsikring er at sikre en konsistent og genkendelig visuel identitet på tværs af alle virksomhedens digitale medier. En designguide fungerer som en detaljeret manual, der beskriver de specifikke regler og standarder, som skal følges i designprocessen, herunder brugen af farver, typografi, layout, ikoner, billeder og andre visuelle elementer, der repræsenterer Aros Forsikrings brand online.

Ved at følge denne designguide kan designere og udviklere sikre, at alle digitale produkter, såsom websider, applikationer og andre online platforme, præsenterer Aros Forsikrings værdier og budskaber på en sammenhængende og professionel måde. Dette er afgørende for at skabe et stærkt og genkendeligt brand, der kan tiltrække og fastholde kunder i en digital verden.

Designguiden for Aros Forsikring er også et vigtigt værktøj til at effektivisere arbejdsprocesser i digitale projekter. Den hjælper med at reducere risikoen for fejl og misforståelser, når forskellige personer eller teams arbejder på virksomhedens online tilstedeværelse. Guiden sikrer, at alle digitale elementer er i tråd med Aros Forsikrings visuelle identitet, samtidig med at den giver plads til kreativitet inden for de etablerede rammer.

Typografi

Typografisektionen i designguiden definerer de skrifttyper og skriftstørrelser, der skal anvendes for at sikre læsevenlighed og konsistens på tværs af Aros Forsikrings digitale platforme. Den fastlægger klare retningslinjer for brug af primære og sekundære skrifttyper, der afspejler brandets professionalisme og pålidelighed.

Layout

Skrifttype

Primær Skrifttype: Roboto (Sans-serif)
Anvendelse: Bruges til brødtekst, knapper og inputfelter. Roboto er moderne, ren og letlæselig.

Sekundær Skrifttype: PT Serif (Serif)
Anvendelse: Bruges til overskrifter, citater og større tekstdele. PT Serif tilføjer et strejf af elegance og særpræg.

Skriftvægte

Normal: 400 (Brødtekst, sekundær information)
Fed: 700 (Overskrifter, vigtig tekst)

Skriftstørrelser

Overskrifter
  • H1: 48px
  • H2: 36px
  • H3: 30px
  • H4: 20px

Underrubrik: 24px (Bruges udelukkende under et H1-element)

Brødtekst: 20px

Linjehøjde

Brødtekst: 1.8
Overskrifter: 1

Eksempler

H1: Overskrift

H2: Overskrift

H3: Overskrift

H4: Overskrift

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad incidunt eveniet ipsa repudiandae reiciendis sit reprehenderit quibusdam deleniti doloremque voluptas! Magnam inventore repellendus atque obcaecati facere ducimus excepturi consectetur alias?


  • Listemne 1
  • Listemne 2
  • Listemne 3
  1. Listemne 1
  2. Listemne 2
  3. Listemne 3
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum odit corrupti sapiente iusto eveniet, ducimus aspernatur natus quo iure dicta, dolores ad, asperiores quasi assumenda odio rem at nisi officia!

Eksempler på lilla baggrund

H1: Overskrift

H2: Overskrift

H3: Overskrift

H4: Overskrift

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad incidunt eveniet ipsa repudiandae reiciendis sit reprehenderit quibusdam deleniti doloremque voluptas! Magnam inventore repellendus atque obcaecati facere ducimus excepturi consectetur alias?


  • Listemne 1
  • Listemne 2
  • Listemne 3
  1. Listemne 1
  2. Listemne 2
  3. Listemne 3
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum odit corrupti sapiente iusto eveniet, ducimus aspernatur natus quo iure dicta, dolores ad, asperiores quasi assumenda odio rem at nisi officia!

Farver

Farvesektionen i designguiden definerer de primære og sekundære farver, der udgør Aros Forsikrings visuelle identitet. Denne sektion sikrer en konsistent brug af farver på tværs af alle digitale platforme, hvilket styrker brandgenkendelsen og skaber en harmonisk brugeroplevelse.

Historie og DNA er en vigtig del af Aros Forsikring-brandet. Derfor tager brandfarverne udgangspunkt i den oprindelige Aros-lilla, som desuden er unik i markedet.

Den primære lilla farve fungerer som Aros Forsikring-brandets ‘Solid’-anker og vil således indgå i samtlige materialer.

Som sekundær farve har den gule farve fra det oprindelige logo fået en central rolle for at give kant og modspil til det lilla fundament. Den gule farve anvendes hovedsageligt til at markere særlige budskaber eller fremhæve fokus på eksempelvis CTA-elementer samt til at skabe dynamik i samspil med den lilla farve.

Primær

#3F3666

Denne dybe lilla farve skal bruges til vigtige brandingelementer, herunder overskrifter, knapper og nøglesektioner på websitet. Farven udstråler tillid, stabilitet og professionalisme.

Sekundær

#EAB937

Denne varme gule farve fungerer som en accentfarve. Den bør anvendes til call-to-action knapper, links, fremhævninger og interaktive elementer. Farven skaber kontrast og tiltrækker opmærksomhed på vigtige handlinger eller information.

Primære variationer

50

#f1f2fc

100

#e5e7fa

200

#d1d3f4

300

#b4b5ed

400

#9b96e3

500

#887cd8

600

#7862c9

700

#6752b0

800

#54448f

900

#3f3666

950

#2a2343

Sekundære variationer

50

#FBF3DD

100

#FAEDCB

200

#F6E0A6

300

#F2D381

400

#EEC65C

500

#EAB937

600

#D39F16

700

#A07911

800

#6D520B

900

#3A2C06

Grå variationer

50

#FAFAFA

100

#F5F5F5

200

#EEEEEE

300

#E0E0E0

400

#BDBDBD

500

#9E9E9E

600

#757575

700

#616161

800

#424242

900

#212121

Grønne variationer

50

#f0fdf4

100

#dcfce7

200

#bbf7d0

300

#86efac

400

#4ade80

500

#22c55e

600

#16a34a

700

#15803d

800

#166534

900

#14532d

950

#052e16

Røde variationer

50

#fef2f2

100

#fee2e2

200

#fecaca

300

#fca5a5

400

#f87171

500

#ef4444

600

#dc2626

700

#b91c1c

800

#991b1b

900

#7f1d1d

950

#450a0a

Ikoner

Ikonsektionen i designguiden beskriver brugen af ikoner for at sikre en sammenhængende og genkendelig visuel stil på tværs af Aros Forsikrings digitale platforme. Ikoner spiller en vigtig rolle i at understøtte navigations- og informationsarkitekturen ved at gøre grænsefladen mere intuitiv og brugervenlig.

Ikonbibliotek

Aros Forsikring benytter Font Awesome som det primære ikonbibliotek. Dette giver adgang til et bredt udvalg af klassiske og moderne ikoner, der kan bruges på tværs af forskellige applikationer og websteder.

Ikontyper

Classic Ikoner:

  • Tykkelse: Regular
  • Anvendelse: Bruges til generelle ikoner, såsom navigationsikoner, handlingsknapper og andre UI-elementer. Regular-tykkelsen giver et klart og afbalanceret udtryk, der passer til Aros Forsikrings professionelle brandidentitet.

Brand Ikoner:

  • Tykkelse: Ingen
  • Anvendelse: Bruges kun når det er nødvendigt, for eksempel når der henvises til specifikke sociale medier, teknologier eller tjenester. Brand ikoner sikrer, at eksterne logoer og symboler bliver korrekt repræsenteret.

Størrelse og Farve

  • Størrelse: Ikoner bør skaleres proportionalt og være tilpasset den kontekst, de bruges i. Standardstørrelser kan variere afhængigt af designkravene, men bør typisk være mellem 16px og 32px for UI-elementer.
  • Farve: Ikoner skal følge den definerede farvepalet i designguiden. Primære ikoner kan være i Aros Forsikrings primære farve, mens sekundære ikoner kan bruge neutrale farver. Brand ikoner skal bruge deres officielle farver, medmindre andet er nødvendigt for designets sammenhæng.

Anvendelse

  • Konsistens: Sørg for, at ikoner bruges konsekvent på tværs af alle sider og applikationer. Dette hjælper brugerne med at navigere og forstå funktionerne uden forvirring.
  • Tilgængelighed: Alle ikoner bør ledsages af passende alt-tekster eller aria-labels for at sikre tilgængelighed for brugere med nedsat syn.

Denne sektion sikrer, at brugen af ikoner i Aros Forsikrings digitale design er ensartet, professionel og i tråd med virksomhedens visuelle identitet.

Ikoner til produkter

Det er afgørende at benytte de specifikke ikoner for hver forsikringsprodukt konsekvent på tværs af Aros Forsikrings digitale platforme. Konsistent brug af disse ikoner hjælper med at styrke genkendelsen af produkterne og skaber en intuitiv brugeroplevelse, hvor kunderne hurtigt kan identificere og navigere til de ønskede forsikringsløsninger.

  • car-side

    Bil + Veteranbil

  • file-certificate

    Garantiforsikring

  • house

    Hus

  • dog

    Hund

  • moped

    Knallert + Veteranknallert

  • house-day

    Sommerhus

  • farm

    Nedlagt landbrug

  • tractor

    Traktor

  • caravan

    Campingvogn

  • lamp-desk

    Indbo

  • trailer

    Påhængsvogn

  • truck-tow

    Veteran autohjælp

  • motorcycle

    Motorcykel + Veteranmotorcykel

  • briefcase-medical

    Ulykke

  • plane-departure

    Rejse

  • hospitals

    AP Forsikring

  • tooth

    Dansk Tandforsikring

  • credit-card-blank

    Nummerpladeforsikring

  • bicycle

    Cykel og cykelskadeforsikring

  • wine-glass-crack

    Pludselig skade

  • screwdriver-wrench

    Om- og tilbygningsforsikring

Knapper

Knapsektionen i en design guide definerer udseende, placering og interaktivitet for knapper, herunder farver, former og tekststil. Dette sikrer, at knapper er intuitive og konsistente på tværs af platforme og understøtter en sammenhængende brugeroplevelse.

Knap med loader

Disabled knap

Knap med firkantede hjørner

Billeder

Billedsektionen i en design guide skal sikre en ensartet visuel stil, der understøtter brandets identitet. Det omfatter retningslinjer for billedvalg, beskæring, farvejustering og placering, så billeder harmonerer med øvrige designelementer.

Billedsektionen i design guiden skal fokusere på brug af billeder med runde hjørner for at skabe et blødt og imødekommende udtryk. Det anbefales at bruge egne billeder fremfor stockbilleder for at sikre autenticitet og originalitet. Billederne skal tydeligt vise nærvær og relation til Aarhus og Østjylland, hvilket understøtter en lokal og genkendelig visuel identitet.

Sikkerhedsline

Billedsektionen i en design guide skal sikre en ensartet visuel stil, der understøtter brandets identitet. Det omfatter retningslinjer for billedvalg, beskæring, farvejustering og placering, så billeder harmonerer med øvrige designelementer.

Aros Forsikrings supergrafik består af en ren linje inspireret af en sikkerhedsline. Sikkerhedslinen kan anvendes horisontalt eller vertikalt efter behov. Som supergrafik har sikkerhedslinen flere formål.

Det primære formål er at forbinde vores forskellige budskaber og elementer med vores tagline ‘Vær sikker på mere’. På den måde skaber vi altid en sikker linje til Aros Forsikrings rygdækning og værditilbud.

Sekundært kan der sættes strøm til supergrafiken, som hermed bliver en del af vores ikondesign. Supergrafiken vil også kunne animeres i gif’er og andre digitale elementer.

Formularer

Formularsektionen i en design guide fastlægger layout, typografi og inputfelters udseende, så formularer er brugervenlige og visuelt harmoniske. Fokus er på klare felter, tilgængelighed og tydelig validering for en effektiv og konsistent brugeroplevelse.

Kommer senere