Transcript Huisstijlhandboek - GLR Mediamanagement

GLR
For
War Child
Huisstijl handboek
Milou van der Zwaan
GLR
For
War Child
Inhoud
Inleiding
Pag 3 Inleiding
Pag 4
Verklarende woordenlijst
Pag 5
1. Logo
Pag 9
2. Kleur
Pag 11
3. Typografie
Pag 13
4. Afbeeldingen
Pag 15 5. Iconen
Dit huisstijlhandboek laat zien hoe de huisstijl van de
doneerpagina van “GLR for War Child” online dient te
worden toegepast. De richtlijnen en specificaties dienen
ter ondersteuning van de ontwikkeling van alle nieuwe
digitale media uitingen.
De webstijl zoals in dit document is gebaseerd op de
visuele indentiteit van War Child die geïntroduceerd is. De
richtlijnen voor deze visuele identiteit zijn vastgelegd in
meerdere documenten.
Deze richtlijnen gaan over het ontwerpen,bouwen en
beheren van de doneerpagina.
Ze zijn een handig instrument om te waarborgen dat de
website voor iedereen werkt en op moderne wijze is
gebouwd
Pag 16 6. Navigatie
2
3
Verklarend woordenlijst
GLR
1. Logo
1.1 Beeld
Corpsgrootte
De grootte van het gebruikte lettertype. In dit document
wordt naast de corpsgrootte soms ook interlinie
(regelafstand) vermeldt. bijvoorbeeld 12/18 px
For
War Child
Er is sprake van een woordbeeld en een vignet.
Deze twee elementen worden samen het logo.
#.....(Hexdecimalen)
Een coderingssysteem voor het definiëren van kleuren op
de beeldschermen. De code bestaat uit 6 getallen, cijfers
of een combinatie van beiden en vooraf gedaan door #
GLR
Het rood van het “GLR for War Child” logo is bijv.
#FC0303
Widget
For
War Child
Contentblokken binnen de website die je los kunt beheren
Tootlip
Online wordt alleen gebruikt gemaakt van deze versie van
het logo.
Een informatieve tekst, welke verschijnt als de gebruiker
de cursor over een item laat gaan.
Deze versie neemt minder ruimte in op het scherm waardoor extra ruimte voor de content van de pagina
3
5
3,5 mm
GLR
1.2 Grootte
GLR
1.3 Plaats
Er is en vaste grootte van het logo vastgesteld, gebaseerd
op de optimale leesbaarheid van de bezoekers van de
website.
6,5 mm
6,5 mm
For
War Child
Het logo linksboven schept onmiddelijk duidelijkheid en
herkenbaarheid voor de gebruiker dat dit eem actie is van
GLR voor War Child.
3,5 mm
For
War Child
Grootte logo:
250 x 130 px.
2,6
12,5 mm
6,5 mm
Het actie logo is rechtboven, ook dit schept gelijk
duidelijkheid dat dit een actie is voor War Child en dat War
Child ervan af weet.
1 mm
Grootte War Child Actie logo:
300 x 130 px
Het logo wordt op een standaardlocatie binnen de website
geplaatst namelijk aan de linker bovenzijde van het scherm.
Het actie logo staat aan de rechter bovenzijde van het scherm.
Beide logo’s dienen op alle pagina’s binnen de website op
deze locatie zichtbaar te zijn.
6
7
2. Kleur
GLR
1.
GLR
For
War Child
1.4 Achtergrond
2.1 Logo
- Het is als beeldmerk kent een witte (#FFFFFF) (1) kleur
als achtergrond.
Het logo straalt door de gebruikte kleur iets bekends, je
ziet met de kleuren gelijk dat het voor War Child is.
For
War Child
- Het gebruik van elke andere kleur als achtergrond is niet
toegestaan (2) (3)
2.
GLR
Beeldmerk
R 252 G 3 B 3
# FC0303
For
War Child
3.
Verloop
R 255 G 255
B 255
# FFFFFF
Tekst
R0G0B0
# 000000
GLR
Dit logo is duidelijk met kleuren dat dit een actie voor
War Child is.
For
War Child
Beeldmerk en
verloop
R 231 G 60 B
62
# E73C3E
8
Tekst
R 255 G 255
B 255
# FFFFFF
Beeldmerk en
verloop
R0G0B1
# 000001
9
3. Typografie
2.2 Kleurenpalet website
White
R 225 G 255 B 225
#FFFFFF
Black
R0G0B0
#000000
MediumRed
R 227 G 33 B 56
#E32138
De basistypografie kent 5 niveaus:
1. Pagina titel
2. Alinea titel
3. broodtekst
White:
• Alle typografie
• Achtergrond
Black:
• Primaire navigatie
• Verduidingen
Arial Black Regular, 14pt, R 255 G 225 B 225, #FFFFFF
MediumRed:
• Primaire navigatie
• Toegepast bij scheidingslijnen
INFORMATIE
Arial Black Regular, 12pt, R 255 G 225 B 225, #FFFFFF
Psychosociale programma’s
Arial Black Regular, 12pt, R 255 G 225 B 225, #FFFFFF
10
11
4. Afbeeldingen
1
2
4.1 Syrië foto’s
1. Paginatitel
• Wordt maar 1 keer gebruikt
• Arial Black Regular, 14pt, R 225 G 225 B 225,
#FFFFFF
Op deze doneerpagina worden foto’s gebruikt om te kijken
wat er in Syrië nu gebeurt en hoe War Child te werk gaat.
De foto’s dienen voor informatie en waar War Child voor
staat: Haal oorlog uit een kind
2. Alineatitel
• Wordt gebruikt als titel van de informatie, video’s en
afbeeldingen
• In blokletters
• Arial Black Regular, 12 pt, R 225 G 225 B 225
#FFFFFF
Specificaties
• Scherpe beelden, scherptediepte is toegestaan (1)
• Mens - en productiegericht
• Geen schokkende beelden (2)
• Link met War Child
• Kleur
3. Broodtekst
• Wordt gebruikt in de alinea’s
• Arial Black Regular, 12 pt, R 255 G 255 B 225
#FFFFFF
1.
3
2.
12
13
5. Iconen
4.2 In contentpagina
5.1 Media
Afbeeldingen
• 297 px breed
• meerde afbeeldingen door op pijl te drukken
Onze doneerknop is de enige icoon die we gebruiken.
Dit icoon is goed zichtbaar en het eerste wat mensen
zien. Het is duidelijk te zien.
3.9 cm
1.2 cm
14
Specificaties
• Lettertype en cirkel
R 227 G 33 B 56 #E32138
• Achtergrond
R 225 G 225 R 225 #FFFFFF
• 3.9 x 1.2 cm
15
6. Navigatie
6.1 Header
In deze doneerpagina kan je naar via het menu naar foto’s
en video’s kijken. En naar de doneer pagina.
Specificaties
• Niet over meer dan 1 regel
Logo (A)
• 5 cm
• uitlijning linkerzijde gelijk met de typografie van de
hoofdnavigatie: 0.25 cm van de linkerzijde
Hoofdnavigatie
• 0.5 cm hoog
• Arial Black Regular, 12pt,
R 225 G 225 B 225, #FFFFFF
• Kleur balk: Black, R 0 G 0 B 0, #000000
MediumRed, R 227 G 33 B 56, #E32138
5 cm
0.5 cm
16