Digital
Den digitale guide er med til at sikre en ensartet kvalitetsstandard på tværs af forskellige sektorer og branchefællesskaber – samt ensartet design på tværs af online og trykte materialer for at opretholde brandkonsistens.
Digitale retningslinjer
Visuel udvikling
Digitale retningslinjer er afgørende for et brands identitet. De sikrer konsistens og genkendelighed på digitale platforme, hvilket styrker Dansk Industris troværdighed og brugeroplevelse. Det inkluderer generelle elementer som typografi, farver og piktogrammer, men også mere specifikt digitale elementer såsom knapper, ikoner og farvetemaer for samtlige moduler.
Farvesystem & temaer
Samtlige farver tilgængelig for digital brug – opdelt i primære, sekundære og neutrale farver.
Farvetemaer dikterer, hvilke farvekombinationer der er mulige for moduler og komponenter.
Typografisk system
Opdelt i overskrifter, brødtekst og diverse. Her kan ses hvilke snit og størrelser er mulige når man designer digitalt. Alle overskrifter bruger Di Sans Display, men brødtekst og diverse bruger DI Sans.
UI ikoner
Ikoner skabt for digitalt brug, mindre i størrelse og et aktivt tilstand. Kan benyttes seperat, men også i knapper og indgange.
Piktogrammer
Samme piktogrammer som i symbolsektionen. Ved digital brug kan de skifte stregfarve, når musen føres over.
Knapper & links
Knapper og links kan vælges i flere farvekombinationer inden for den primære palette, men indeholder også nogle i neutrale farver. Alle knapper og links har en neutral og en hover-tilstand.
Ikonbibliotek
Online åben kildekode
Tabler Icons tilbyder gratis og åben kildekode-ikoner designet til at gøre dit design mere attraktiv – og visuelt konsistent med Dansk Industris egne symboler. Download ikonerne i 1.5 stregtykkelse og i 20 px størrelse for bedste resultat.
Brugervenlighed i fokus
Rundede hjørner og lyst
Ved at introducere runde hjørner og et lyst og simpelt design omsætter vi designprincipperne til en funktionel oplevelse og bygger bro mellem fysiske og digitale platforme.
Tablet
di.dk forside
Smart Phone
'Kurser og arrangementer' samt 'Vi rådgiver dig'
Farvehierarki
Simplificeret men kontrastfyldt
Beslutningen om at fokusere på den primære farve lilla, sammen med neutrale farver og en sekundær farve, er drevet af ønsket om at skabe et simpelt og effektivt farvesystem. Det giver det en konsistent og genkendelig farveidentitet, der forbinder vores brand med lilla som den primære brandfarve. Derudover forenkler det farvepaletten, hvilket gør det lettere at designe og vedligeholde konsistens på tværs af alle vores sider og platforme.
Harmonisk visuel identitet
Der skal altid være et lilla element til stede (udover logoet), enten i den mørkelilla eller den lyse lilla nuance. Vi skal sikre, at lilla forbliver den primære farve, der gennemsyrer alt. Efter dette vil det ofte være hensigtsmæssigt at anvende neutrale farver, enten som baggrund eller i forskellige elementer. De neutrale farver medvirker til at opretholde den lette fornemmelse.
Hvis man ønsker at kombinere lilla med andre farver, bør man kun anvende én sekundær farvepalette (farvestribe) pr. side, uanset længden. Dog kan man bruge alle tre nuancer samt tints af den valgte farvestribe, ud fra hvad der er muligt i CMS’et.
Blokke med farvevalg
Vælg selv dit tema
Når du har bestemt dig for din farve kombination på den enkelte side. Har DI.dk udvalgt en serie af blokke hvor du kan ændre temaet. De følgende blokke er:
1. Aktuelle Nyheder
2. Horisontal indholdsliste
3. Banner
4.Nummereret liste
5. Links
6. CTA med liste
7. CTA
Do & Don’ts
Eksempel 1 - rigtigt brug af farver
Eksempel 2 - forkert brug af farver
Eksempel 3 - rigtigt brug af farver
Eksempel 4 - forkert brug af farver
Interaktivt design
Effekter og animation
Klar Lilla
Denne farve skaber en markant og iøjnefaldende dimension til vores brugergrænseflade, hvilket gør det nemmere for brugerne at identificere og interagere med interaktive elementer. Den klare lilla skaber en visuel kontrast og fremhæver de områder, hvor handling muligt.
Skarpe hjørner
Når du fører pilen over vores interaktive elementer, vil du bemærke, at et af hjørnerne bliver rundet. Denne detalje er ikke kun en del af vores brandidentitet, men tjener også et funktionelt formål. Den subtile men effektive animation bidrager til en mere intuitiv og engagerende brugeroplevelse, mens den også styrker vores brandgenkendelse.
