Huisstijldocument
Inhoudsopgave 1. Logo 1.1 Beeld 1.2 Naam 1.3 Toevoeging stadsnaam 1.4 Plaatsing 1.5 Achtergrond 2. Kleur 2.1 Logo 2.2 Website 3. Typografie 4. Knoppen 5. Waardering 6. Tabs 7. Grid
3 3 4 5 6 7 8 8 9 10 11 12 13 14
Huisstijlhandboek Droomstad
|
05-06-2014
|
Versie 1.0
2
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
Huisstijlhandboek Droomstad
|
05-06-2014
|
Versie 1.0
Woordbeeld
3
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
|
05-06-2014
|
Versie 1.0
4
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
|
05-06-2014
|
Versie 1.0
5
1.4 Plaatsing In dit voorbeeld wordt gebruik gemaakt van de afmeting 200 mm breed en 75 mm hoog. ¼ van de hoogte
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. De restruimte aan de linker-, boven- en onderzijde van het logo moet minstens ¼ van de totale hoogte zijn.
¼ van de hoogte minimaal ½ van de hoogte
De restruimte aan de rechterzijde van het logo moet minstens ½ van de totale hoogte zijn. Wanneer enkel het beeldmerk wordt gebruikt geldt het volgende:
¼ van de hoogte
De restruimte aan alle zijden van het beeldmerk moet minstens ¼ van de totale hoogte zijn. 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
|
05-06-2014
|
Versie 1.0
6
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
|
05-06-2014
|
Versie 1.0
7
2. Kleur 2.1 Logo Het logo straalt door de gebruikte kleuren stoerheid en lef uit.
Beeldmerk & stadsnaam
Woordbeeld
C/M/Y/K
1/98/89/0
67/60/59/45
R/G/B
235/37/48
66/66/66
#eb2530
#424242
WEB
Huisstijlhandboek Droomstad
|
05-06-2014
|
Versie 1.0
8
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
#eb2530
#424242
#5b5b5b
#ffffff
WEB
Huisstijlhandboek Droomstad
|
05-06-2014
|
Versie 1.0
9
3. Typografie De basistypografie kent drie niveau’s 1. Paginatitel 2. Alineatitel 3. Alineatekst
1. Paginatitel Open Sans Bold, 30px, #424242
2. Alineatitel
Open Sans Bold, 18px, #424242
3. Alineatekst
Roboto Regular, 15px, #424242
Huisstijlhandboek Droomstad
|
05-06-2014
|
Versie 1.0
10
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, #747474 • 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, #505450. • 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, #505450. • Mouseover: Open Sans Regular, onderstreept, 14 px, #FF7320. Tekstlink • Normaal: Open Sans Regular, onderstreept, 14 px, #505450. • Mouseover: Open Sans Regular, onderstreept, 14 px, #FF7320.
Huisstijlhandboek Droomstad
|
05-06-2014
|
Versie 1.0
11
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
|
05-06-2014
|
Versie 1.0
12
6. Tabs Actief [1] Roboto regulair, 14 px, #FF000 Interactief [2] Roboto regulair, 14 px, #424242 1
Mouseover [3] Roboto regulair, 14 px, #FF000
2 15 px
15 px
De marges aan de linker- en rechterzijde van de tekst binnen een tab dienen 15px te zijn.
3
Huisstijlhandboek Droomstad
|
05-06-2014
|
Versie 1.0
13
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
|
05-06-2014
|
Versie 1.0
14
