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
- Listemne 1
- Listemne 2
- 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
- Listemne 1
- Listemne 2
- 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
DEFAULT
#3F3666
Sekundære variationer
50
#FBF3DD
100
#FAEDCB
200
#F6E0A6
300
#F2D381
400
#EEC65C
500
#EAB937
600
#D39F16
700
#A07911
800
#6D520B
900
#3A2C06
DEFAULT
#EAB937
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.