Huisstijlwijzer voor digitale middelen - Sterk Merk

Avans Hogeschool
Huisstijlwijzer voor
digitale middelen
Inleiding
In deze Avans Hogeschool huisstijlwijzer voor digitale middelen vind je onze afspraken over hoe we
communiceren via digitale middelen. Ook op beeldschermen geloven we in krachtige combinaties van
headings en beelden. Aangevuld met minimale stijlelementen, die een krachtig onderscheid maken. Je
vindt in deze huisstijlwijzer ook onze algemene richtlijnen voor digitaal gebruik. En leest welke
verschillen er zijn met de richtlijnen voor drukwerk. Die verschillen hebben te maken met de
eigenschappen van beeldschermen en drukwerk.
Algemene bepalingen
HET LOGO
Het logo van Avans Hogeschool staat vast. Je mag het niet logo niet aanpassen of slechts gedeeltelijk
gebruiken. Het logo is altijd Avans-rood: HEX C6002A, of RGB 198/0/42.
Grootte
De grootte van het logo is afhankelijk van het online middel. De minimale breedte van het logo op
beeldschermen altijd 163 pixels. Dat is nodig voor de leesbaarheid. Op hi-ppi beeldschermen is het
logo relatief zoveel groter. Voorbeeldgrootten per digitaal middel zullen we nog toevoegen aan deze
huisstijlwijzer voor digitale middelen.
Plaatsing
Het logo staat altijd rechts boven, gekoppeld aan de rode balk bovenin. Het logo heeft altijd een witte
achtergrond. Of staat in een foto. Die foto mag op de plaats van het logo geen storende achtergrond
vormen. Let daar ook op bij wisselende achtergrondfoto’s, bijvoorbeeld een beeldcarrousel. Het logo
staat bij digitale uitingen alleen bovenaan. Nooit onderaan in bijvoorbeeld een footer.
KLEURGEBRUIK
De hoofdkleuren voor digitale middelen van Avans Hogeschool zijn Avans-rood en wit. Je mag online
twee andere kleuren gebruiken.
Avans rood
HEX C6002A / RGB 198/0/42
Donkergrijs
HEX 181712 / RGB 24/23/18
Blauw
HEX 00ACEB / RGB 0/172/235
•
Voor vlakverwerking gebruik je donker grijs of Avans-rood.
•
Blauw gebruik je alleen voor interactieve elementen, zoals buttons en textlinks.
•
Wit moet in alle uitingen de boventoon blijven voeren. Zo blijven webpagina’s fris- en helder.
LETTERTYPE
Onlinegebruik je de twee lettertypen die we ook gebruiken in offline middelen: Frutiger en Verdana.
•
Voor corpsgroottes vanaf 16px of 1em kies je altijd Frutiger.
•
Voor kleinere corpsgrootte gebruik je Verdana.
Verkrijgbaarheid
Verdana staat standaard geïnstalleerd op Windows en OS X systemen. Frutiger niet, die moet de
ontwerper dus aanschaffen voor gebruik in ontwerpsoftware. De eindgebruiker kan Verdana zonder
problemen weergeven. Dat geldt niet voor Frutiger. Daarom moet worden Frutiger op bijvoorbeeld de
website worden ge-embed. Avans Hogeschool heeft voor internettoepassingen een abonnement op
fonts.com. Je kunt van waaruit Frutiger embedden.
Standaardbepalingen
• We gebruiken nooit cursief.
• Digitaal gebruik je alleen Frutiger 65 Bold en 75 Black.
• Lettertypen pas je online nooit toe in foto’s of afbeeldingen, maar altijd in de tekst. Dat maakt
termen vindbaar voor zoekmachines.
• Gebruik liever geen headings die helemaal in hoofdletters zijn geschreven. Dat maakt de
headings slechter leesbaar. Hoofdletters mogen wel bij korte headings op bijvoorbeeld foto’s.
DROPSHADOW EN COPYBOX
Om headings en teksten ‘los’ te maken van een foto achtergrond gebruik je een harde dropshadow.
Deze is tot 32px of 2em 1 pixel breed en donkergrijs op 270°, dus recht onder de letter. Vanaf 32px of
1em is hij 2 pixels breed. De schaduw is nooit diffuus en nooit geheel of gedeeltelijk transparant. Let
op: deze toepassing mag je alleen gebruiken bij kleine afbeeldingen.
COPYBOX
Bij grote afbeeldingen gebruik je de copybox. Deze mag maximaal 30% van het totaaloppervlak van
de achtergrond in beslag nemen. De copybox is altijd rechthoekig en donker grijs. Het heeft een
opacity van 80%, zodat de achtergrond er nog enigszins doorheen kan komen. De tekst is wit en
vormt een link. Je kunt de tekst aanvullen met een button, rechts onderin de copybox.
INTERACTIEVE ELEMENTEN
Interactieve elementen laten we doelbewust afwijken van de rest van de huisstijl. Zoals buttons en
tekstlinks. Dat doen we om de mogelijkheid tot actie te onderstrepen. We gebruiken tekstlinks en
verschillende varianten buttons:
Buttons
Buttons zijn altijd rechthoekig. Ze hebben geen afgeronde hoeken en groeien in principe mee met de
grootte van de inhoud; de tekst. Rondom de button geldt een minimale padding van 10 pixels bij
tekstgrootten tot 16px of 1em en daarboven 15px. Je moet altijd minimaal 10% padding hanteren.
Level 1 button
Over het algemeen zijn buttons rood met een lineair
verloop van boven naar beneden. Boven is kleur HEX
DE1F4F / RGB 222/31/79, beneden is de kleur Avans
rood. Bij rollover draait het verloop 180° om. De tekst is
altijd wit.
Level 2 button
Voor belangrijke call-to-actions gebruik je de blauwe
button. Bijvoorbeeld voor buttons als ‘aanmelden’ of
‘inschrijven’. Ook deze hebben een lineair verloop.
Boven lichtblauw HEX 1FC5FC / RGB 31/197/252 ,
beneden blauw: HEX 00ACEB / RGB 0/172/235. Bij
rollover draait het verloop 180° om. De tekst is altijd
wit.
Level 3 button
De level 3 button gebruik je op plekken waar veel
buttons voorkomen die eenzelfde soort resultaat
oproepen. Een voorbeeld is de opleidingkiezer op de
homepage van avans.nl. Dat is een minder aanwezige,
zwarte variant van de button. Ook deze variant heeft
een lineair verloop. Boven grijs HEX 666666 / RGB
102/102/102, beneden donkergrijs: HEX 181712 / RGB
24/23/18. Bij rollover draait het verloop 180° om. De
tekst is altijd wit.
Tekstlinks
Tekstlinks zijn altijd blauw, zonder underline. Bij rollover verschijnt wel de underline, in dezelfde tint
blauw. Eenmaal bezochte links krijgen een paarse kleur: HEX 6C25B1 / RGB 108/37/177.
Interactieve elementen
Andere interactieve elementenstel je samen uit een kleurencombinatie van donker-grijs en blauw.
Zoals sliders, dropdowns, radiobuttons of checkboxes. Enkele voorbeelden.
VLAKGEBRUIK
Online mag je volvlakken gebruiken als kader. Dat mag alleen in Avans rood en donkergrijs. Er zijn
beperkte mogelijkheden voor typografie binnen deze vakken.
•
Frutiger 65 Bold gebruik je alleen boven 24px of 1,5em. Je gebruikt Frutiger altijd met witte
letters, dat vergroot de leesbaarheid.
•
Verdana gebruik je alleen vanaf 14px / 0,875em. Je gebruikt Verdana alleen bold en in witte of
eventueel lichtgrijze letters: HEX CCCCCC / RGB 204/204/204. Op Avans rood kies je voor
Verdana altijd wit.
FOTOGRAFIE
Het gebruik van foto’s binnen een digitale omgeving verschilt per middel. In het algemeen heeft het de
voorkeur om fotografie groot in te zetten, met headings geplaatst binnen de foto. Klein gebruik van
fotografie raden we af, tenzij hier functionele redenen voor zijn.
Websites
GRID & SCHAALBAARHEID
Alle websites voor Avans Hogeschool moeten in ieder geval adaptief zijn voor desktop browsers en
tablets. De website moet minimaal op een breedte van 764 pixels weergegeven kunnen worden,
zonder dat de browser zelf hoeft in te zoomen. Avans Hogeschool gebruikt hiervoor deze drie 4koloms, schaalbare grids:
Browservensters van 1128 pixels en breder:
| 26px | 250px | 26px | 250px | 26px | 250px | 26px | 250px | 26px |
Browservensters tussen 970 pixels en 1128 pixels breed:
| 26px | 210px | 26px | 210px | 26px | 210px | 26px | 210px | 26px |
Browservensters tussen 764 pixels en 970 pixels breed:
| 26px | 160px | 24px | 160px | 24px | 160px | 24px | 160px | 26px |
Bij voorkeur lopen de drie grids vloeiend in elkaar over. De gutter van 26 pixels komt overeen met de
breedte van de a van het Avans logo. De middelste 3 gutters - de smalle tussenkolommen - zijn bij het
kleinste grid iets kleiner dan bij de andere grids: 24px t.o.v. 26px.
Bij het kleinste grid is het vrijwel onvermijdelijk om ook de fontgroottes aan te passen en
content anders in te delen. Hieronder zie je een voorbeeld voor de schaalbaarheid hiervan.
| 26px | 250px | 26px | 250px | 26px | 250px | 26px | 250px | 26px |
| 26px | 210px | 26px | 210px | 26px | 210px | 26px | 210px | 26px |
| 26px | 160px | 24px | 160px | 24px | 160px | 24px | 160px | 26px |
NAVIGATIE
De navigatie op Avans websites heeft drie onderdelen: hoofdnavigatie, subnavigatie en secundaire
navigatie.
Hoofdnavigatie
De hoofdnavigatie staat altijd horizontaal, bovenin de website. De rode balk biedt plaats voor het
eerste navigatieniveau. De ruimte links naast het Avans logo biedt ruimte voor een tweede niveau.
Vanuit hier mag je eventueel ook een submenu als dropdown tonen. Dat is een derde niveau.
Subnavigatie
Diezelfde subnavigatie gebruik je op de pagina’s die binnen het 1e of 2e niveau vallen. Aan de
linkerkant van de pagina. Vanuit hier kan je zelfs een vierde niveau toepassen: sub-sub. Als er geen
derde niveau is, dan kun je de ruimte van het submenu gebruiken voor de items in het eventuele
tweede niveau van de navigatie. Let op: het tweede niveau staat dan nooit bovenin de website.
Secundaire navigatie
Secundaire, vaste navigatie mag op twee plekken staan. Boven de rode balk, rechts uitgelijnd op de
pagina. Of onderaan in de footer van de pagina. Op alle websites van Avans, behalve op avans.nl zelf,
is het verplicht om als meest rechtse item in de witte balk bovenaan de pagina een link naar avans.nl
te plaatsen. Iconen die verwijzen naar specifieke social media accounts mogen niet in de header van
de pagina staan, alleen in de footer.
LANDINGSPAGE
In bijzondere gevallen kan het raadzaam zijn om je visueel aantrekkelijk landingspage te laten
aansluiten op een campagne. Bijvoorbeeld voor promotionele acties van Avans Hogeschool. Op de
landingspagina mag je bij een korte titel kapitale letters gebruiken. Je gebruikt Frutiger 75 Black font.
Websites (mobile)
SCHAALBAARHEID
Maak je een mobiele versie van een
Avans website, dan moet je rekening
houden met een behoorlijke
schaalbaarheid. En ook met een
herindeling van content ten opzichte
van de desktop of tablet versies van de
website. De inhoud van de mobiele
website mag beslist niet afwijken van
de desktop of tablet website.
Omdat ook mobiele devices van elkaar
verschillen qua resolutie, moeten
mobiele websites zich aanpassen op die
resolutie. Hieronder zie je een
voorbeeld van de homepage van
avans.nl die voor wat betreft resolutie
vertaald is naar iPhone liggend en
iPhone staand.
NAVIGATIE
Navigatie op touchscreens werkt anders dan navigatie met een muis. Op mobiele Avans websites
wordt het complete menu bovenaan ontsloten door een menu knop. Als je die indrukt schuift de
website naar beneden en ontstaat in de rode balk ruimte voor het menu.
Hoofdnavigatie
De indeling van het hoofdmenu is vergelijkbaar met
die van desktop websites. De niveau 1 navigatie
items staan in het eerste scherm. Na een druk
verschijnen de eventuele niveau 2 items. Let op:
omdat touch geen rollover kent, is er een verschil
qua functionaliteit ten opzichte van bediening met de
muis. Bij de desktop website is het 1e niveau item
ook een pagina. Bij touch zorgt het drukken op dit
niveau 1 item voor een overzicht van niveau 2 items.
Daarom moet je op dit tweede niveau nog een
verwijzing maken naar de hoofdpagina van het eerste
niveau. Dat kan heel eenvoudig door een menu item
toe te voegen bovenaan de lijst. Vanaf het 2e niveau
verschijnt boven het menu een knop om een niveau
terug te gaan. Het menu kan tot maximaal drie
niveaus diep gaan. Op de desktop site staat dat gelijk
aan de items in de dropdown.
Subnavigatie
Subitems zet je altijd onderaan de pagina’s in de vorm van een lijst. Dit gebeurt boven de footer.
Secundaire navigatie
Onder de footer is plaats voor secundaire navigatie items.
Mobile apps
LOGOGEBRUIK & APP ICON
Bij mobiele applicaties heb je te maken met een beperkt schermformaat. Het logo weergeven op elk
screen is niet praktisch of relevant. Daarom hoeft het logo in mobiele applicaties alleen op het
startscherm of splashscreen te staan.
APP ICON
Voor een goede branding van het merk Avans moet je consistent
zijn in kleur en stijl. Alleen het logo gebruiken is niet genoeg,
zeker op plekken waar herhaling kan voorkomen. App icons
moeten met name de inhoud en de functionaliteit van de app
weergeven. Ook de naam van de app richt zich op de
functionaliteit. App icons worden bijgestaan door het logo. Het
logo mag nooit direct als app icons worden gebruikt. In de tabel
zie je wanneer wel en niet.
Platform
Logo
Size (pixels)
Android ldpi
No
36x36
Android mdpi
No
48x48
Android hdpi
Yes
72x72
Android xhdpi
Yes
512x512
Google Play
Yes
512x512
iPhone 3
No
57x57
iPad 1 and 2
Yes
72x72
iPad 3 and 4
Yes
144x144
iPhone 4 and 5
Yes
114x114
App Store
Yes
1024x1024
Rooster
LAYOUT & MARGE
De marge die we hebben afgesproken voor de letter a in het logo geldt ook voor mobiele applicaties.
Hieronder enkele voorbeelden van lay-outs.
Narrowcasting
Avans maakt gebruik van narrowcasting schermen. Die hangen in de eigen gebouwen en kunnen ook
gebruikt worden op beurzen. Hieronder volgen de richtlijnen voor statische schermen met informatie.
OPBOUW
Dit zijn de standaarden voor de opbouw van de narrowcastingschermen:
1. Rode balk en logo staan altijd op dezelfde plaats.
2. Het voorgaande scherm gaat in 1 seconde over naar wit.
3. Daarna bouwt het nieuwe scherm zich op. Eerst de fotografie en daarna de tekst of de tekstvlakken.
TYPOGRAFIE
Tekstgebruik
De titel moet op het scherm altijd goed leesbaar zijn. Ook de lopende tekst moet je vrij groot
weergeven om leesbaar te blijven.
Lettertype
We gebruiken Frutiger 75 Black voor de titels en Frutiger 55 Roman voor de teksten. Frutiger 75 Black
gebruik je alleen in kapitaal. De regelafstanden vind je in de standaard tabel uit de huisstijlwijzer.
STANDAARD VISUELE BEPALINGEN
Rode balk & logo
Op alle schermen verschijnt de combinatie van rode balk en logo. Deze verdwijnt nooit uit beeld. Ook
niet bij een verversing naar een nieuwe slide.
Bij Full HD (1920x1080)
Uitgaande van een full-hd resolutie is de rode balk 40 pixels hoog. Het logo is standaard 400
pixels breed en staat rechts bovenaan. Met inachtneming van de minimale afstand tot de rand
van het scherm en de rode balk. De letter a van het logo heeft daarbij de juiste afmeting. Het
internationale logo meet in dit geval 307 pixels breed.
Bij 900x1440 (staand)
De rode balk is 30 pixels hoog. Het logo is 300 pixels breed.
Marge
De ruimte waarbinnen titels en vlakken moeten komen wordt ook bepaald door het formaat van de
letter a uit het Avans Hogeschool logo.
STANDAARD SCHERMEN
Type 1
Scherm type 1 gebruik je als het om een korte melding gaat. Je gebruikt een grote foto die de
achtergrond vult. De titel komt in de rode balk en heeft bij liggende oriëntatie maximaal 1 regel, bij
staand 2. De ondertitel in maximaal twee regels bij liggende oriëntatie en 3 bij staande in de witte
balk. Je mag een QR code gebruiken, maar alleen met een URL.
Bij Full HD (1920x1080)
o
Voor de witte titel kies je Frutiger 75 Black, 72 pixels.
o
Voor de ondertitel kies je Frutiger 55 Roman, 48 pixels.
Bij 900x1440 (staand)
o
Voor de witte titel kies je Frutiger 75 Black, 64 pixels.
o
Voor de ondertitel kies je Frutiger 55 Roman,
40 pixels.
Type 2
Is de tekst wat langer, dan gebruik je scherm type 2. Bijvoorbeeld bij een nieuwsbericht of een
belangrijke aankondiging. Zie de voorbeelden hieronder.
Bij Full HD (1920x1080)
De afbeelding rechts heeft een breedte van 530 pixels en moet verticaal altijd vullend zijn.
o
De titel van het bericht is Frutiger 75 Black, 128 pixels.
o
De rode ondertitel is Frutiger 75 Black, 64 pixels.
o
De lopende tekst is Frutiger 55 Roman, 64 pixels.
Bij 900x1440 (staand)
De afbeelding boven heeft een hoogte van 690 pixels en moet horizontaal altijd vullend zijn.
o
De titel van het bericht is Frutiger 75 Black, 64 pixels.
o
De rode ondertitel is Frutiger 75 Black, 40 pixels.
o
De lopende tekst is Frutiger 55 Roman, 40 pixels.
Films
Er zijn ook richtlijnen voor films die gemaakt zijn in opdracht van Avans Hogeschool. Bijvoorbeeld voor
promotie of inspiratie.
OPBOUW
Deze standaarden gelden voor de opbouw van films:
•
Een film start altijd met sfeerbeeld. Na enkele seconden komt de rode balk, het logo, de titel
en eventueel een subtitel in beeld. Ondertussen blijft op de achtergrond het sfeerbeeld
doorspelen.
•
Ook het einde van een film bevat sfeerbeeld. Aan de rechterkant schuift een witte kolom over
het beeld. Daarin is ruimte voor de aftiteling of een wervende tekst.
TYPOGRAFIE
Tekstgebruik
De hoeveelheid tekst gebruikt in beeld moet beperkt blijven tot korte titels en statements. De redactie
kan de teksten inkorten. Stukken tekst komen nooit in beeld in Avans films.
Lettertype
Je gebruikt lettertype Frutiger 75 Black, alleen in kapitaal. De regelafstanden vind je in de standaard
tabel uit de huisstijlwijzer. Grote titels zet je bij een full-hd resolutie op 200 pixels grootte, subkoppen
op 72 pixels. Een derde gebruikt formaat is 48 pixels. Bij de aftiteling neem je 32 pixels.
STANDAARD VISUELE BEPALINGEN
Rode balk & logo
Bij het intro- en eindscherm gebruik je de combinatie van rode balk en logo. Uitgaande van een full-hd
resolutie is de rode balk 40 pixels hoog. Het logo is standaard 400 pixels breed en staat rechts
bovenaan. Je houdt ook rekening met de minimale afstand tot de rand van het scherm en de rode
balk. De letter a van het logo heeft de juiste afmeting. Het internationale logo is 307 pixels.
Marge
De ruimte waarbinnen je titels zet wordt ook bepaald door het formaat van de letter a uit het Avans
Hogeschool logo.
STANDAARD SCHERMEN
Introscherm
Het introscherm heeft altijd de rode balk, het logo en de titel van de film. Eventueel kan er ook een
ondertitel bij. Als door het beeld op de achtergrond de teksten moeilijk leesbaar zijn, dan mag je een
gradient gebruiken. Vanaf het midden van het beeld tot beneden. Met een verloop van transparant
naar zwart.
Intro alternatief
Is er geen sfeerbeeld beschikbaar als achtergrondbeeld bij het introscherm, dan mag je kiezen voor
een witte achtergrond. Zie hieronder een voorbeeld, dat ook laat zien hoe je langere titels kunt
plaatsen.
Titel
Persoonlijke titels, zoals voor- en achternamen of iemands titel of functienaam, zet je in een balk
onderin beeld. Die is samengesteld uit twee delen. Het zwarte deel bestrijkt de gehele breedte van het
beeld en is op full-hd resolutie 160 pixels hoog. Het rode deel is 100 pixels hoog en steekt 20 pixels
boven de zwarte balk uit. De lengte van de rode balk pas je aan aan de lengte van de inhoud. In de
zwarte balk is direct onder de rode balk ruimte voor een ondertitel.
Tussentitel
Sommige films hebben tussentitels. Die mogen in beeld staan, met gebruik van de verplichte marge.
Tussentitels zijn altijd links uitgelijnd, eventueel met een chapeau.
Eindscherm of aftiteling
Het eindscherm bevat altijd de rode balk, het logo en een witte balk van 530 pixels breed aan de
rechterkant van het beeld. Op de achtergrond draait een afsluitend sfeerbeeld. De witte balk is te
gebruiken voor aftiteling. Of voor promotionele doelen, bijvoorbeeld het noemen van een URL.
Nieuwsbrief
LAY-OUT
In nieuwsbrieven is het niet mogelijk om Frutiger te gebruiken in de lopende tekst. Je moet dus
Verdana gebruiken in de teksten en koppen. Er zijn twee varianten van de nieuwsbrief, met één item
of meerdere items.
Bannering
LOGO
De banner heeft een beperkt formaat. Daarom is het niet verplicht om het logo op elke slide te laten
zien. Het logo moet wel op de laatste slide staan. De rode balk is wel op elke slide verplicht.
AFKADERING
Avans Hogeschool heeft als basis veel wit in de huisstijl. Omdat banners vaak op witte achtergronden
worden geplaatst, is het verplicht om een afkadering te maken. Gebruik hiervoor bij slides met een
witte achtergrond een 1 pixel lijn, licht grijs: HEX CCCCCC / RGB 204/204/204 aan de randen van de
banner waar de banner wit is. In het voorbeeld hieronder zie je dat er geen lijn hoeft te lopen bij de
rode balk.
TYPOGRAFIE
Banners vormen korte uitingen en hebben dus korte teksten. Daarom gebruik je in banners Frutiger 75
Black in kapitalen.
ANIMATIE
Transitie-animaties moeten snel en simpel verlopen. Denk aan snelle bewegingen met korte ease-in &
-outs. Gebruik je foto’s op de achtergrond, dan wordt eerst de foto ingeanimeerd (snelle fade-in),
daarna komt de tekst er overheen. Bij het uitanimeren hiervan gebeurt dat andersom: eerst de tekst
en dan de foto.

Download Report