HUISSTIJLHANDBOEK
V.V. WILHELMUS Naam: Marco Remmerswaal Studentnummer: 12048569 Vak: Visual Communication Lerares: Noortje van Eekeren Versie 1.00
1 / 10
Inhoudsopgave
Grid 3 Typografie
4
Kleurgebruik
5
Stijlelementen
6
Feedback
7
Scherm hiërarchie 8 Opmaak
Consistentie
9 10
2 / 10
GRID
Op de website wordt een 16 kolloms grid toegepast. Dit zorgt voor een evenwichtige vlakverdeling. Tussen elk vlak zit 30 pixels ruimte voor voldoende witruimte.
3 / 10
TYPOGRAFIE
Er worden twee lettertype gebruikt om de website van V.V. Wilhemus. Dat zijn Arial en Tahoma. Tahoma wordt gebruikt voor de primaire navigatie en Arial wordt gebruikt voor alle andere platte teksten. Er is voor Arial gekozen omdat het een strakke schreefloze font is en ook omdat het goed leesbaar is. Dit gaat goed overweg met de strakke en nette layout van het ontwerp. Tahoma is gekozen wordt omdat het goed opvalt. Vooral als het in hoofdletters is gedaan. Dit ook is een schreefloze font. Het zal dus niet tegenstrijdig zijn met Arial. De titels van de koppen in Arial (hoofdletters). Het heeft een gele kleur met een zwarte dropshadow. Op deze manier komen de kleur van V.V. Wilhelmus terug in de website.
Navigatie:
Koppen:
Font: Tahoma Kleur: Wit op zwart Voorbeeld: HOME NIEUWS CLUB CONTACT
Font: Arial, Helvetica, Sans-serif Kleur: Geel/Zwart Voorbeeld: Photoshop instellingen voor drop-shadow:
Platte tekst: Font: Arial Kleur: Grijs Voorbeeld: Fuga. Met abo. Ebit, et aut quae voloribus invelenist ommoloratet molessimus si cum andereiciunt quae estiur anitiun digenda ecabori totatquos rem unt omnihiliquis magnatur res molenih illant.
4 / 10
KLEURGEBRUIK
Er worden in totaal 4 kleuren gebruikt bij V.V. Wilhemus. De hoofdkleuren zijn zwart en geel. Deze kleuren komen niet alleen terug in het logo maar ook in alle voetbaltenues en andere media-uitingen terug. Zwart en geel zijn redelijk zware kleuren. Daarom is er gekozen wit om dit in belans te houden. De vierde kleur is een licht grijs. Deze wordt voornamelijk gebruikt voor alle platte teksten (zie website). De combinatie tussen zwart en geel wordt vaak gebruikt. Een voorbeeld hiervan zijn de menu knoppen (navigatie). Hierop worden deze op elkaar gebruikt om een duidelijk constrast te creëren en de interactie te ondersteunen (zie hoofdstuk Feedback)
R: 253 G: 204 B: 9
Geel
Grijs
(Hoofdkleur)
(Steunkleur)
C: 1 M: 19 Y: 100 K: 0
HEX: #FFCC00
R: 102 G: 102 B: 102
Zwart
C: 0 M: 0 Y: 0 K: 100
HEX: #666666
Wit
(Hoofdkleur)
R: 0 G: 0 B: 0
C: 60 M: 51 Y: 51 K: 20
(Steunkleur)
HEX: #000000
R: 255 G: 255 B: 255
C: 0 M: 0 Y: 0 K: 0
HEX: #FFFFFF
5 / 10
STIJLELEMENTEN
Tekst elementen worden altijd in een wit vlak geplaatst. Hierbij hoort altijd een titel zoals eerder is beschreven. Hieronder zie je een voorbeeld van zo’n kader.
Rond elke kader komt een “hoekje”. Dit zorgt voor een iets meer dynamiek, speelsheid en interesse in het ontwerp. Het logo is een erg belangrijk onderdeel van de huisstijl van V.V. Wilhelmus. Gebruik dit altijd op de correctie manier voor eke uiting.
De platte tekst van de website heeft een grijze kleur. Omdat er soms knopjes zoals “lees verder” en “inloggen” aanwezig moeten zijn, is er gekozen voor een opvallender beeldelement om mensen duidelijk te maken dat het wat anders is dan de platte tekst. Dit is natuurlijk gedaan in huisstijl kleuren van V.V. Wilhelmus. Een voorbeeld zie je hieronder.
Let op: Er worden geen randen (borders) gedaan rond een kader. De achtergrond afbeelding zorgt voor een constrast zodat het kader zichtbaar is zonder een rand
6 / 10
FEEDBACK
Feedback is erg belangrijk voor de gebruiker. Daarom is er gekozen om dit op alle knoppen toe te passen. Hieronder zie je een voorbeelden van interactie. Normale state:
Normale state:
Rollover state:
Normale sate: Rollover state:
Rollover state:
7 / 10
SCHERM HIËRARCHIE Door middel van ruimte tussen alle vlakken en het gebruik te maken van een grid is. Er is een belans gezocht zodat het oog niet op één punt waar het oog op blijft vallen. Door middel van ruimte tussen alle vlakken, gebruik te maken van een grid en een achtergrond foto dat naar de navigatie wijst is er een hiërarchie ontstaan. Verder zijn er foto’s gebruikt bij nieuws items om daar meer aandacht aan te schenken.
8 / 10
OPMAAK
Alle elementen van op het 16 kolloms grid uitgelijnd zodat het een evenwichtige ontwerp is (zowel verticaal als horizontaal). Tussen elke kader zitten 30 pixels. Doordat alles strak is uitgelijnd wordt het ontwerp automatisch modern en nodigd het uit om lid te worden van V.V. Wilhelmus. Vooral d.m.v. de achtergrond (resterende ruimte) zorgt het ervoor dat je er zin in hebt om te gaan voetballen.
9 / 10
CONSISTENTIE
Het maakt niet waar je op de website kijkt. Ziet in iedergeval dat de website over voetballen gaat en seconde later kom je er achter dat het over V.V. Wilhelmus gaat.
Alle interactieve elementen zorgen ervoor dat je naar een bepaalde pagina gaat. In het knopje staat beschreven van wat er gaat gebeuren (behalve de primaire navigatie, want dat spreek voor zich zelf)
10 / 10
