Januar Designguide. Designguide til Nibe Bryghus. Lavet af:

Transkript

1 Januar 2015 Designguide Designguide til Nibe Bryghus Lavet af:

2 Forord Design guide Nibe Bryghus Design Guiden er rettet mod Nibe Bryghus, så de let og hurtigt kan se, hvilke designelementer, som er blevet brugt til at fremstille deres hjemmeside. Dette vil hjælpe dem til kunne se hvilken typografi, farver osv. der er blevet benyttet på deres hjemmeside, dertil kan de udpege de rette elementer de skal bruge, for muligvis at ændre på deres hjemmeside

3 Indholdfortegnelse Logo 1 Farver 2 Typografi 4 Billedebank 6 Udvidelse af hjemmesiden 7 Kontakt 10

4 Logo Nibe Brughus logo er bestående af tekst, hvor det er delt op i to dele, i den første del står der LO- KAL ØLKUSK i den anden NIBEBRYGHUS. Dertil er der et fyrtårn i midten af logoet, som udtrykker noget maritimt. Logoet består af 2 farver blå og hvid. Logoet er blevet brugt 2 steder på Nibe Bryghus hjemmeside. 1. Som et overordnede tilbagelink til forsiden, som ligger øverst på alle siderne. 2. Ligger i bunden af Footeren, som er på alle siderne. Logo brugt på forside mm bred og mm høj 273pixels bred og 184pixels høj Logo brugt i footer 31.75mm bred og mm høj 120pixels bred og 80pixels høj Eksempel på brug 1

5 Farver Her bliver alle de farver som er benyttet på hjemmesiden vist. De er delt op i hvilke som er primære og sekundære. Hexcode - # RGB code - R153 - G153 - B153 Hexcode - #aea58c RGB Code - R174 - G165 - B140 Primær farve Hexcode - #1c5aa8 RGB code - R28 - G90 - B168 Hexcode - # RGB code - R97 - G97 - B97 Hexcode - #6dcff6 RGB code - R109 - G207 - B246 Primær farve Hexcode - #ffffff RGB code - R255 - G255 - B255 Denne farve bruges Hexcode - #141d23 RGB code - R20 - G29 - B35 Hexcode - #2586FF RGB code - R37 - G134 - B255 Hexcode - # RGB Code - R0- G0 - B0 Hexcode - #1c2831 RGB code - R28 - G40 - B49 2

6 Her bliver der fortalt hvor farverne bliver brugt, dertil også hvor de skal bruges. Bliver brugt som søgefelts farve Brugt som opdelingstreg Primær farve Hover på menu Brugt til knapper Brugt til hover på links effekten omkring borderen på nyhedsbrevs felt Markere søgefeltet (aktiv) Primær farve Bliver brugt til tekst Brugt til ikoner Baggrundsfarve på dropdown menu Footer Viser aktiv menupunkt Viser aktiv karrusel slide Hover over alle knapper Brug til fremhævning af brødtekst Tekst farve på markeret læs mere knap. Baggrund på bølgen i footeren 3

7 Typografi Her bliver den anvendte typografi beskrevet og vist p {font-family: Roboto, sans-serif, font-style: normal font-size: 0,875em} h2 {font-family: Roboto, sans-serif, font-size: 1.5em} h3 {font-family: Roboto, sans-serif, font-weight: bold, font-size: 1.17em; } h4 { font-family: Roboto, font-size: 1em} ABCDEFGHIJKLMNOPQR- STUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå !@#%? Google fonts-roboto - 4

8 Her bliver der beskrevet, hvor typografien må bruges og med hvilken farve. paragraf P er brødtekst, brødtekst må benyttes til alle artikeltekster. Må bruges i farven hvid-hexcode-#ffffff, sort hexcode-# og blå-hexcode - #2586FF til fremhævning. heading 2 h2 er hovedoverskrift, Hovedoverskriften må bruges som overskriften til undersider. Må bruges i farven Hvid-hexcode-#ffffff. heading 3 h3 bruges til sekundær overskrift, denne må bruges som overskrift til artikler. Må bruges i farven Hvid-hexcode-#ffffff. heading 4 h4 bruges til fremhovning, denne må bruges til at fremhæve vigtig tekst eller data. Må bruges i farven hvid-hexcode-#ffffff og blå-hexcode - #2586FF. 5

9 Billedebank Billederne bliver brugt til at fremvise og illustrere forskellige ting på Nibe Bryghus hjemmeside. De bliver brugt til at skabe stemning og vise troværdighed. Billederne som bliver brugt er taget fra det materiale, som er blevet stillet til rådighed under projektet af Nibe Bryghus, så det er deres billeder vi har benyttet. Dertil at noget af billederne blevet redigeret til sådan de passer til formålet. Nogle af billederne er lavet af JAM MEDIA, eller der er licens på, så derfor skal JAM MEDIA Kontaktes, hvis der er ønske om at bruge dem. Baggrunden Banner billederne 6

10 Udvidelse af hjemmesiden Her kan der ses, hvilke steder der er taget højde for en mulig udvidelse af Nibe Bryghus hjemmeside. Her bliver der kan vist, hvorhenne der er taget højde for det og ikke hvordan det skal gøres. Der er fokus på at udvidelsen er en webshop Mulighed for at ligge flere menupunkter ind, dertil også undermenu punkter. Der kan ligges flere punkter ned i footeren, da den har pladsen til det. Inde under produkter kan der tilføjes en købe funktion, sådan man kan købe produktet, når brugeren er inde på det. Mulighed for at ligge en video ind i karruselen Under menu vil der være mulighed for, at indsætte en indkøbsvogn, dertil også et menupunkt der hedder Shop Ift. en webshop vil der være mulighed for at tilføje en købe funktion inden under de specifikke produkter Ift. en webshop vil der være mulighed for at tilføje en købe funktion inden under de specifikke produkter. Under menu vil der være mulighed for, at indsætte en indkøbsvogn, dertil også et menupunkt der hedder Shop 7

11 Mulighed for at ligge flere menupunkter ind, dertil også undermenu punkter. Mulighed for at ligge en video ind i karruselen 8

12 Mulighed for at ligge disse billeder ind i en karrusel Der kan ligges flere punkter ned i footeren, da den har pladsen til det. 9

13 Kontakt Navn: Anders Thyssen Kristensen Mobil: / Navn: Jesper Jensen Mobil: / Navn: Marcela Nedergaard Mobil: / Navn: Anders Jespersgaard Mobil: @ucn.dk Navn: Mads Balslev Pedersen Mobil: @ucn.dk 10

14