FODMAPforum. Designmanual

Transkript

1 Designmanual

2 Velkommen På de følgende sider finder du s designprogram. Med det ved hånden er du i stand til at designe løsninger til s grafiske flader. Her kan du slå op og finde ingredienserne til at skabe en konsistent brugeroplevelse på tværs af teknologier, medier og kanaler og samtidig finde inspiration til, hvordan du kan sammensætte et varieret og dynamisk udtryk. I sidste ende er formålet med designprogrammet at samle hele brandet under ét mærke, hvor alle kræfter arbejder i samme retning. Retningen går gennem forenkling mod overskuelighed og gennemskuelighed. Vi skal hele tiden rykke tættere på deres kunder. Side 2

3 Indholdsfortegnelse Velkommen... 2 Hieraki...4 Logo... 5 Logotype... 6 Figur Figur Frizone... 7 Placering... 7 Typografi... 8 Primære font... 8 Sekundære font... 8 Font til logo og logotype... 9 Tekstjustering...9 Farvepaletter...10 Primære farver Sekundære farver Billedstil Videostil Grafiske elementer Grundlæggende ikoner Side 3

4 Hieraki design bygger på enkelt princip. Logo er tiltænkt, der bygger på den inderste cirkel og de øvrige elementer i prioriteret rækkefølge, som lag udenpå. Når kommer til udtryk, sker det igennem de lag og logoet er det vigtigste element. Og derefter de øvrige lag i den udtrækning, der er baseret på s stemningsord og værdier. Side 4

5 Logo Logoet er symbolet for hele brandet, og det vigtigste element med dets betydning og værdi. Side 5

6 Logotype Figur 1 Figur 2 Side 6

7 Frizone Frizonen sikrer, at logoet får en rolig omgivelse, når den optræder sammen med andre elementer. Og afstanden må ikke brydes, og bevarer sin fokus, også når der er andre elementer tilstede. Placering Logoet skal altid placeres på et rolig sted, og være det primære der signalerer s værdier. Side 7

8 Typografi s primære typografi er Helvetica. En skrifttype der udtrykker og signalerer deres stemningsord og værdier i form af overskrifter, menupunkter. Den sekundære typografi i hierakiet er: Myriad Pro Denne typografi er tekster, der bruges til indholdsartikler og blogindlæg, kombineret med den primære typografi i overskrifter og menupunkter. Letter Gothic Std Bold-typografi bruges til hhv. logo og logotype. Primære font Helvetica Regular Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz Helvetica Italic Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Rr Ss Tt Uu Vv Ww Xx Yy Zz Sekundære font Myriad Pro Regular Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Rr Ss Tt Uu Vv Ww Xx Yy Zz Myriad Pro Bold Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Rr Ss Tt Uu Vv Ww Xx Yy Zz Side 8

9 Myriad Pro Italic Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Rr Ss Tt Uu Vv Ww Xx Yy Zz Font til logo og logotype Letter Gothic Std Bold Abcdefghijklmonpqrstuvwxyz Tekstjustering Tekst er altid justeret til venstre. Dette er et ufravigeligt princip i alle sammenhænge. Titel, Undertitel, Overskrifter, Brødtekst, Billedtekst, Afsnittekst. Alt skal være justeret til venstre. Side 9

10 Farvepaletter Primære farver Farverne hos består af 4 primære grundfarver, som hierarkiet på side 5. Grundfarverne er baseret på s værdier: Hvid: Anonymitet Grå: Professionalisme Blå: Troværdighed 100% 75% 50% 25% CMYK 0, 0, 0, 0 41, 33, 34, 24 75, 62, 0, 0 RGB 255, 255, , 111, 111 0, 24, 254 HEX #FFFFFF #6F6F6F #0018FE Side 10

11 Sekundære farver Sort Grøn: Medicin Rød: Økologi 100% 75% 50% 25% CMYK 56, 45, 48, 71 49, 7, 87, 1 0, 64, 46, 0 RGB 0, 0, 0 142, 186, , 104, 104 HEX # #8EBA5E #FF6868 Side 11

12 Billedstil kan også udtrykke sig i billeder, eksempler på portrætsbilleder af eksperter på. Det er vigtigt med ensartet baggrundsfarver, og eksperterne tydeliggør en adskillelse fra scenariebilleder. Scenariebilledstil har fokus på rigtige situationer med rigtige mennesker. Billederne ovenfor: Eksempel på portrætsbilleder af eksperter på. Billedet ovenfor: Eksempel på gruppeportrætsbillede af eksperter på. Side 12

13 Scenerarier: Billeder ovenfor: Eksempel på scenarier af rigtige mennesker, i rigtige situationer. Side 13

14 Videostil s video kan udtrykke sig i form af promotionsvideo eller med eksperter fra. Når det er eksperterne der udtrykker sig, er det vigtigt med ensartet baggrundsfarver, og eksperterne tydeliggør en adskillelse fra scenarier med rigtige mennesker Scenarievideostil har fokus på rigtige situationer med rigtige mennesker. Billederne ovenfor: Eksempel på scenarievideostil med fokus på rigtige mennesker, i rigtige situationer. Man kan bruge både logo- og logotype til s videoproduktion. Logo skal placeres i en af hjørnerne af videobilledet, mens logotype gerne må placeres midten på skærm, hvis baggrunden er ensartet eller sløret. Side 14

15 Grafiske elementer Grundlæggende ikoner De ikoner anvendes på s website og mobile sider særligt tilpasset til smartphone og tablets. Eksempel på ikoner med henvisning til sociale medier En af s vigtige promotion er oplysningsside på facebook der henviser til. Her er eksempler på ikonet Facebook i de primære grundfarver. Og eksempler i sekundære farver: Side 15