Inhoudsopgave. Huisstijlhandboek Droomstad Versie 1.0 2

Transcriptie

1 Huisstijldocument

2 Inhoudsopgave 1. Logo Beeld Naam Toevoeging stadsnaam Plaatsing Achtergrond 7 2. Kleur Logo Website 9 3. Typografie Knoppen Waardering Tabs Grid 14 Huisstijlhandboek Droomstad Versie 1.0 2

3 1. LOGO 1.1 Beeld Er is sprake van een beeldmerk en een woordbeeld. Deze twee elementen vormen samen het logo. Zowel online als offline wordt gebruik gemaakt van het gehele logo. Het beeldmerk mag alleen op zichzelf gebruikt worden wanneer het op een afbeelding wordt geplaatst. Beeldmerk Woordbeeld Huisstijlhandboek Droomstad Versie 1.0 3

4 1.2 Naam Het woordmerk mag niet gebruikt worden in combinatie met een lidwoord. Specificaties Het woord droomstad dient te alle tijde in onderkast (kleine letters) geschreven te worden. De naam van de stad begint altijd met een kapitaal gevolgd door kleine letters, met uitzondering van stadsnamen als s-gravenhage. De accentkleur van de stadsnaam is altijd gelijk aan het beeldmerk van het logo. Droomstad den bosch Huisstijlhandboek Droomstad Versie 1.0 4

5 1.3 Toevoeging stadsnaam Het logo bevat een stadsnaam, deze naam wordt altijd onder het woord droomstad geplaatst. De naam van de betreffende stad dient aan de rechterzijde van het woord droomstad geplaatst te worden. Ee Gasselterboerveenschemond Huisstijlhandboek Droomstad Versie 1.0 5

6 1.4 Plaatsing In dit voorbeeld wordt gebruik gemaakt van de afmeting 200 mm breed en 75 mm hoog. De totale hoogte van het logo bepaald de hoeveelheid restruimte aan alle zijden. De totale hoogte staat gelijk aan de afstand tussen het hoogst gemeten punt en het laagst gemeten punt van het logo of het beeldmerk. ¼ van de hoogte De restruimte aan de linker-, boven- en onderzijde van het logo moet minstens ¼ van de totale hoogte zijn. ¼ van de hoogte De restruimte aan de rechterzijde van het logo moet minstens ½ van de totale hoogte zijn. minimaal ½ van de hoogte Wanneer enkel het beeldmerk wordt gebruikt geldt het volgende: De restruimte aan alle zijden van het beeldmerk moet minstens ¼ van de totale hoogte zijn. ¼ van de hoogte Zowel online als offline is het sterk aanbevolen om het logo in de linkerboven- of linkeronderhoek te plaatsen. ¼ van de hoogte ¼ van de hoogte ¼ van de hoogte ¼ van de hoogte Huisstijlhandboek Droomstad Versie 1.0 6

7 1.5 Achtergrond Het logo kent een witte achtergrond. Daarnaast mogen de logo onderdelen in het wit vertoond worden op een rode achtergrond. Het beeldmerk kent een witte kleur indien deze op een achtergrondafbeelding wordt geplaatst. Huisstijlhandboek Droomstad Versie 1.0 7

8 2. Kleur 2.1 Logo Het logo straalt door de gebruikte kleuren stoerheid en lef uit. Beeldmerk & stadsnaam Woordbeeld C/M/Y/K R/G/B WEB 1/98/89/0 235/37/48 #eb /60/59/45 66/66/66 # Huisstijlhandboek Droomstad Versie 1.0 8

9 2.2 Website Rood Accenten Donkergrijs Navigatie Paginatitels Alineatitels Grijs Alineatekst Wit Achtergrond Tekst op rode vlakken Rood Donkergrijs Grijs Wit C/M/Y/K 1/98/89/0 67/60/59/45 62/54/53/27 0/0/0/0 R/G/B 235/37/48 66/66/66 91/91/91 255/255/255 WEB #eb2530 # #5b5b5b #ffffff Huisstijlhandboek Droomstad Versie 1.0 9

10 3. Typografie De basistypografie kent drie niveau s 1. Paginatitel 2. Alineatitel 3. Alineatekst 1. Paginatitel Open Sans Bold, 30px, # Alineatitel Open Sans Bold, 18px, # Alineatekst Roboto Regular, 15px, # Huisstijlhandboek Droomstad Versie

11 4. Knoppen Knoppen die onderdeel zijn van een proces worden rechts uitgelijnd. Knoppen die geen onderdeel zijn van een proces worden links uitgelijnd. Primair Open Sans Regular, 18 px, #FFFFFF. Deze knop is gereserveerd voor de belangrijkste actie in de pagina. Secundair Normaal: Open Sans Regular, 18 px, # Mouseover: Open Sans Regular, 18 px #FF0000 Deze knop wordt toegepast op processen en wordt naast de primaire knop als accent gebruikt. Tertiair Normaal: Open Sans Regular, 14 px, # Mouseover: Open Sans Regular, 14 px, #FF7320. De tertiaire knop wordt gebruikt voor links en acties die belangrijker zijn dan de kwartaire knop. Kwartair Normaal: Open Sans Regular, onderstreept, 14 px, # Mouseover: Open Sans Regular, onderstreept, 14 px, #FF7320. Tekstlink Normaal: Open Sans Regular, onderstreept, 14 px, # Mouseover: Open Sans Regular, onderstreept, 14 px, #FF7320. Huisstijlhandboek Droomstad Versie

12 5. Waardering Waarderingen worden geplaatst op de achtergrond of in een kader. Een standaard icoon: Normaal: #5B5B5B Actief: #FF0000 Met een achtergrond kleur: Normaal: rand in #FFFFFF en vulling #FF0000. Actief: #FFFFFF Huisstijlhandboek Droomstad Versie

13 6. Tabs Actief [1] Roboto regulair, 14 px, #FF000 Interactief [2] Roboto regulair, 14 px, # Mouseover [3] Roboto regulair, 14 px, #FF000 De marges aan de linker- en rechterzijde van de tekst binnen een tab dienen 15px te zijn px 15 px 3 Huisstijlhandboek Droomstad Versie

14 7. Grid Homepage Specificaties Het grid is gebaseerd op 12 kolommen van 65 px breed. Minimale breedte van de website: 1100 px. Indien een nieuwe website ontwikkeld zal worden, dient een 3 koloms grid te worden aangehouden. Content, overzicht en Subpagina s Content, overzicht en Subpagina s Huisstijlhandboek Droomstad Versie