DESIGN MANUAL NOVEMBER 2017
FORORD På de følgende sider finder du FibreWaters design manual. En håndbog til at designe løsninger til de grafiske flader. Formålet med denne design manual er at samle virksomheden under én visuel stil og i én retning. Retninge går gennem forenkling mod et stilsikkert, minimalistisk og skandinavisk udtryk. Design manualen vil blive opdateret - forbedringer tilføjet og afsnit udvidet - efterhånden, som vi alle bliver klogere.
INDHOLD For at gøre det nemmere for dig at navigere rund i manualen, kan du komme direkte hen til emnerne i indholdsfortegnelsen ved at klikke på dem. Du kan komme retur til indholdsfortegnelsen ved at klikke på nede i venstre hjørne. INTRODUKTION TIL HOVED- ELEMENTERNE Logo Typografi Billedstil Farver BRUG AF GRUNDELEMENTER LOGO Respektafstand Placering Logo på billeder Logo på farvet baggrund Logotyper Artsy logo TYPOGRAFI Primær font Sekundær font Overskrifter Tekst Tekst på farvet baggrund FARVER Logoets farver Primære og sekundære farver BILLEDSTIL Eksempler Billedebrief IKONER Grafiske ikon elementer Grafisk CTA Tekstjustering i grafik CTA Alternativt CTA LAYOUT Layout LOGO Logoet er kendetegnet for udadtil. Det er det mærke, alle andre elementer samarbejder om at lade med betydning og værdi.
TYPOGRAFI ABCDefghi BILLEDSTIL kan også udtrykke sig i billeder, hvilket også er en stor kerneværdi. Fx billeder af rigtige mennesker i reelle situationer. De er altid naturlige, neutrale, kolde, og personlige at se på. jk1234,.&%
BRUG AF GRUNDELEMENTERNE
RESPEKTAFSTAND Der er defineret en respektafstand til loget. Den sikre, at det er altid fremstår tydeligt og i passende afstand til andre gradiske elementer. LOGO BRUG AF GRUNDELEMENTERNE STØRRELSER Logoets størrelse bestemmes af formaters størrelse. Logoets respektafstadn er rektangulær.
PLACERING Logoet placeret altid centralt, eller i tilfælde af billeder, i nederst i venstre eller højre hjørne. Respektafstanden bestemmer logoets afstand til kanten.
LOGO PÅ BILLEDER Når logoet optæder på billeder skal man altid sørge for at respektafstanden til logoet ikke indeholder elementer der forstyrre dets genkendelighed. LOGO PÅ FARVET BAGGRUND logoet skal primært optræde på hvide eller lyse baggrunde. Men i enkelte tilfælde er det muligt at lade logoet optræde på farvet baggrund. Lys baggrund Mørk baggrund
LOGOTYPE Logoet skal altid anvendes i sin originale form. Kan dette ikke lade sig gøre, kan følgende logotyper anvendes.
ARTSY LOGO s artsy logo må ikke anvendes som hovedregel. Logoet må kun anvendes i tilfælde af at det grafiske udtryk skal være mere kreativt. TYPOGRAFI BRUG AF GRUNDELEMENTERNE
PRIMÆR FONT ACUMIN PRO CONDENS er S primære font. Den skal bruges til alle former for overskirfter, citater mv i alle medier. Acumin Pro Condens Wide Acumin Pro Condens Regular Acumin Pro Condens Semibold Acumin Pro Condens Bold Acumin Pro Condens Black Gotham Light Regular Gotham Medium Regular Gotham Light Italic Gotham Medium Italic
SEKUNDÆR FONT Den sekundære font anvendes kun, når det af tekniske årsager er umuligt at anvende de primære fonte. Her tænkes hovedsageligt på digitale skabeloner og dynamisk tekst på hjemmeside. OVERSKRIFT Overskrifter og citater til brug i SoMe content og i grafiske publikationer, skal være skrevet med CAPSLOCK, samt være justeret så teksten står i lige linjer. Helvetica Neue Light Helvetica Neue Regular Helvetica Neue Bold OVERSKRIFTER SAMT CITATER SKAL STÅ SÅDAN HER OVERSKRIFTER SAMT CITATER SKAL STÅ SÅDAN HER Helvetica Neue Light Italic
TEKST Brødteksten skal være let læselig. Derfor bør linjernes længde minimun være 30 enheder (inklusive mellemrum), helst være på 50-55 enheder (inklusive mellemrum) og må aldrig overstige 70 enheder (inklusive mellemrum) i snit. Her ser eksemåler på anbefalede brødtesktstørrelser i spalter med bredden 63 mm. TEKST PÅ FARVET BAGGRUND Tekst på farvet baggrund er enten hvid eller sort. Alle skriftafsnit kan anvendes på farvede baggrunde, men man skal altid sikre sig at teksten tydeligt kan læses. 8 pt / Auto leading Spalte bredde 63 mm giver ca. 36 enheder pr. linje Brødtekst: Gotham Regular En enkelt flaske FibreWater dækker omkring tyve procent af dagsbehovet for tarmstyrkende kostfibre og medvirker herigennem til et sundere fordøjelsessystem. Effekten forstærkes gennem anvendelsen af superfiberen inulin, som har særligt veldokumenterede egenskaber. Det gør, at FibreWater ikke kun er spændende for de forbrugere, som har svært ved at få tilstrækkeligt med kostfibre i løbet af dagen. 10 pt / Auto leading Spalte bredde 63 mm giver ca. 36 enheder pr. linje Brødtekst: Gotham Regular En enkelt flaske FibreWater dækker omkring tyve procent af dagsbehovet for tarmstyrkende kostfibre og medvirker herigennem til et sundere fordøjelsessystem. Effekten forstærkes gennem anvendelsen af superfiberen inulin, som har særligt veldokumenterede egenskaber. Det gør, at FibreWater ikke kun er spændende for de forbrugere, som har svært ved at få tilstrækkeligt med kostfibre i løbet af dagen. FibreWater ligner helt almindeligt vand og smager også forfriskende dejligt. Men inde bag facaden gemmer den på superfiberen inulin, som beviseligt booster din tarmflora til øget styrke. FibreWater ligner helt almindeligt vand og smager også forfriskende dejligt. Men inde bag facaden gemmer den på superfiberen inulin, som beviseligt booster din tarmflora til øget styrke. FibreWater ligner helt almindeligt vand og smager også forfriskende dejligt. Men inde bag facaden gemmer den på superfiberen inulin, som beviseligt booster din tarmflora til øget styrke.
LOGOETS FARVER s logo er blåt og grønt med blåt navnetræk. logoets blå og grønne farver, går igen i flere grafiske henseende, og vil derfor indgå som en del af s primære eller sekundære farvepallet. FARVER BRUG AF GRUNDELEMENTERNE
PRIMÆR FARVEPALLET SEKUNDÆR FARVEPALLET Den primære farvepallet består af 3 farver, der kan gradueres imellem 100%, 75%, 50% og 25%. Gradueringerne er forbehold overlay på billeder. Skal tekst, streger, ikoner eller andet grafik farves, anvendes TDC s sekundære farver i 100%, samt de primære farver. GRÅ 1 #8a9293 (RGB) 138-146-147 (CMYK) 48-33-35-13 GRÅ 2 #556063 (RGB) 85-96-99 (CMYK) 64-46-45-34 75% 75% 50% 50% 25% 25% BLÅ 1 #1c2555 (RGB) 28-37-85 (CMYK) 100-92-37-31 GRÅ #e6e9ee (RGB) 30-233-238 (CMYK) 12-7-5-0 BLÅ 2 #d9e8ef (RGB) 217-232-239 (CMYK) 18-4-6-0 GRØN 1 #78be20 (RGB) 120-190-32 (CMYK) 59-0-100-0 TYRKIS #56a896 (RGB) 86-168-150 (CMYK) 68-11-48-1 GRØN 2 #aec565 (RGB) 174-197-101 (CMYK) 40-5-76-0 75% 50% 25% 75% 75% 50% 50% 25% 25% 75% 50% 25% 75% 50% 25% 75% 50% 25%
BILLEDSTIL kan også udtrykke sig i billeder. Billeder af rigtige mennesker, i rigtige situationer. anvender stockphotos, men bestræber sig på IKKE at anvende stockphotos fremadrettet. BILLEDSTIL BRUG AF GRUNDELEMENTERNE
BILLEDSTIL Alle s billeder kan hentes fra S Dropbox under Billedmateriale. BILLEDBRIEF For at gøre billederne så tidsløse som muligt og sikre deres anvendelighed på kryds og tværs af s grafiske flader, skal der tages højde for følgende punkter: Billederne skal som udgangspunkt være enkle. Med enkle medes, at billeder ofte skal benyttes sammen med tekst, grafiske elementer og logo, hvilket kræer områder, der kan bære at blive dækket. Shutterstock billeder er som udgangspunkt et NO GO. Billederne skal signalere livsstil, hverdag, skal fremstå naturlige og skal være situationer der er genkendelige og relaterbare.
IKONER BRUG AF GRUNDELEMENTERNE GRAFISKE IKON ELEMENTER Cirklerne kan varieres i størrelse og farve. Dog med cirklerne med enten de japanske prikker eller punkteret ikke havde en indholdsfarve. Cirklerne skal bruges som grafiske elementer til publikationer, og tekstformater. De grafiske elementer må til hver en tid overlappe hinanden. Japanske prikker 5 pkt. Punkteret 4 pkt. Fuld cirkel Blå
GRAFISK CTA Cirklen kan varieres i størrelse, farve og indhold. Cirklen skal passe ind i den brugte sammenhæng og skal som CTA fremstå tydeligt og fængende. TEKSTJUSTERING I GRAFISK CTA Teksten skal altid være centreret og kan enten være justeret efter linjer eller ej, alt afhængig af tesktmængden. Teksten må kun være højrejusteret såfremt at der er gjort brug af en 3/4 af cirklen. Fuld cirkel FIBERRIG 100% NATURLIG VAND KØB HER Kort fængende og beskrivende teskt. Få ord! Call To Action FIBERRIG 100% NATURLIG VAND KØB HER FIBERRIG 100% NATURLIG VAND FIBERRIG 100% NATURLIG VAND KØB HER Cirkel med centreret tekst Cirkel med centreret tekst, justeret efter linjer Cirkel med venstrejusteret tekst
FIBERRIG 100% NATURLIG VAND KØB HER 3/4 cirkel med centreret tekst 1/2 cirkel vertikal - venstrestillet ALTERNATIV CTA I tilfælde af at en fuld cirkel ikke passer ind i den grafiske eller visuelle sammenhængen kan følgende CTA grafik anvendes. Dette alternativ kan ikke som den almene fuld cirkel fungere som 3/4 eller 1/2 og må kun optræde som CTA i fuld cirkel. Cirklen kan afspejles med forskellige cirkleringer. FIBERRIG 100% NATURLIG VAND KØB HER FIBERRIG 100% NATURLIG VAND KØB HER 1/2 cirkel horisontal 3/4 cirkel med højrejusteret tekst - venstrestillet
LAYOUT