WEB & DESIGN
HUISSTIJLHANDBOEK Richtlijnen en instructies voor het gebruik van de huisstijl van Web & Design
Inhoud Inhoud 2 Logo gebruik 3 Regels logo gebruik 4 Positie van het logo 6
2
Logo gebruik Basis logo
De huisstijl wordt in de meeste gevallen gevormd door het logo. Daarom is dit het belangrijkste element van de huisstijl. Dit logo staat voor rust, vooruitstreving, innovatie en creativiteit. Het kan worden gezien als samenstelling van verschillende dingen, wat de opleidingen ook inhouden, samenwerken, en het kan worden gezien als denkwolk, als uiting van creativiteit.
WEB & DESIGN
Verder wordt de huisstijl gekenmerkt door het gebruikt van lettertype en door de kleuren. Hiernaast zijn twee versies van het logo te zien. De basis versie en de greyscale.
Grayscale logo
Bij voorkeur wordt er altijd gebruik gemaakt van de basis versie en het gebruik hiervan is te vinden op pagina 4. Wanneer het wel nodig is om het logo in greyscale te gebruiken dan wordt hij op deze manier gebruikt.
WEB & DESIGN
3
Regels logo gebruik 1. De achtergrond
Correct gebruik
Bij voorkeur het liefst het logo op een witte achtergrond behouden. Mocht dit echter niet nodig zijn dan mag de achtergrond eventueel een lichte grijstint of een lichte oranje
2. Het kleurgebruik
De kleuren van het logo worden niet aangepast. Deze worden altijd weergegeven in de juiste kleuren (zie kleurgebruik). Alleen wanneer dit nodig is mag gebruik gemaakt worden van de greyscale versie
3. Vervorming
WEB & DESIGN
WEB & DESIGN
WEB & DESIGN
WEB & DESIGN
Het logo mag ten alle tijden niet vervormt worden. Dit mag alleen wanneer hij juist geschaalt wordt. Ook mag het logo niet worden geroteerd en/of worden gespiegeld
4. Beeldmerk
Het beeld merk mag niet zonder de tekst worden gebruikt. Dit mag alleen wanneer het wordt toegevoegd als stijlelement. Als logo horen ze ten alle tijden bij elkaar te staan.
4
Regels logo gebruik Dit zijn dus een aantal voorbeelden van hoe het logo niet gebruikt mag worden.
Incorrect gebruik
Hij mag niet worden verschaalt als hij uit verhouding raakt. Ook mag hij niet worden geroteerd of worden gespiegeld.
WEB & DESIGN
WEB & DESIGN
B&
WE
GN
I DES
WEB & DESIGN
De kleuren mogen niet worden aangepast. Bij zowel het beeldmerk als de letters. Hij mag niet worden weergegeven op een donkere achtergrond. Ook geld voor dit elke andere donkere kleur is niet toegestaan.
5
Positie van het logo Voor de positionering van het logo wordt van het volgende formaat gebruikt gemaakt. (zie afbeelding). De afmetingen hier voor zijn gebaseerd op de groote van het vierkante rechts boven. Deze past zo in alle vier de hoeken en dit creert een duidelijke witruimte om het logo heen. Er mogen dan ook geen andere elementen en/ of tekst geplaatst worden binnen die margin.
WEB & DESIGN 6
Kleur gebruik PMS: cmyk: rgb: Hex:
2001 U 1 / 51 / 72 / 0 244 / 147 /87 #f39257
PMS: 2352 C cmyk: 32 / 67 / 1 / 0 rgb: 175 / 109 / 171 Hex: #af6dab PMS: Black 6 C cmyk: 75 / 68 / 67 / 90 rgb: 0/0/0 Hex: #000000 PMS: 649 U cmyk: 0 / 0 / 0 / 0 rgb: 255 / 255 / 255 Hex: #ffffff PMS: Cool Gray 6 C cmyk: 0 / 0 / 0 / 38 rgb: 171 / 173 / 176 Hex: #aaacaf PMS: Cool Gray 7 C cmyk: 0 / 0 / 0 / 49 rgb: 149 / 151 / 154 Hex: #959799
Dit zijn de kleuren die gebruikt mogen worden voor de Web & Design huisstijl en dit zijn dan ook de enige kleuren die gebruikt mogen worden. Voor al het werk wat digitaal gedaan wordt wordt er gebruik gemaakt van de rbg code. Voor al het druk werk kan gebruik gemaakt worden van zowel de PMS als cmyk. Bijvoorkeur wordt cmyk gebruikt omdat dit de juiste kleur is en omdat de pantone niet altijd helemaal past. De zwart wordt gebruikt voor de tekst niet alleen van het logo maar ook van de broodtekst. Mocht het voorkomen dat er een donkere achtergrond is dan kan de tekst in het wit gedaan worden. Dit geld niet voor het logo (zie Regels logo gebruik). De twee grijstinten worden alleen gebruikt voor de greyscale versie van het logo en komen verder nergens anders voor.
7
Font gebruik Voor de platte tekst en de broodteksten is er ook een vast font uitgekozen. Hiervoor is een voor druk werk en een voor digitaal werk. Voor het drukwerk is gekozen voor Roboto in verschillende varianten: Italic, Medium en Light. Hiernaast is dan ook te zien hoe deze verschillende diktes worden toegepast en hoe dat deze correct gebruikt mogen worden.
8
“Design is not just what it looks like and feels like. Design is how it works.� (10 pt)
Dit is een kop (13 pt) Dit is een subkop (11 pt)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies necss, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. (10 pt)
Font gebruik Thin
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789!@#$%^&*()?,.:;”
Dit zijn de verschillende diktes met een voorbeeld alfabet, alle nummers en leestekens.
Medium
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789!@#$%^&*()?,.:;”
Italic
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789!@#$%^&*()?,.:;”
9
Font gebruik Voor het werk wat digitaal gedaan wordt er gebruik gemaak van Arial.
“Design is not just what it looks like and feels like. Design is how it works.� (10 pt)
Ook hiervan zijn verschillede maten en diktes. Arial wordt dan ook alleen voor het digitaal werk gebruikt en mag niet worden gebruikt voor drukwerk.
Dit is een kop (13 pt)
Dit is om de herkenbaarheid van de huisstijl van Web & Design te behouden. Er mag dan ook voor digitaal werk geen ander font worden gebruikt. De varianten die voor digitaal werk gebruikt worden zijn Italic, Bold en Regular.
10
Dit is een subkop (11 pt)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies necss, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. (10 pt)
Font gebruik Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789!@#$%^&*()?,.:;”
Dit zijn de verschillende diktes met een voorbeeld alfabet, alle nummers en leestekens.
Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789!@#$%^&*()?,.:;”
Italic
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789!@#$%^&*()?,.:;”
11