Grafisch handvest - websites en applicaties

Deze internetpagina bevat de versie van het handvest voor de website en de applicatie.

Het logo

Het logo bestaat uit twee elementen : de afbeelding en de naam.

De SVG-versie, beschikbaar hier

Een versie zonder de naam is ook beschikbaar.

Op de websites mag het logo alleen in kleur worden gebruikt, en het beste is om jpeg-, png- of gif-formaten te vermijden om het logo onder alle omstandigheden scherp te houden.

Meer informatie over het logo in het grafische handvest.

 

De kleuren

De kleuren van het logo, titles, knoppen

De basiskleuren zijn :

• Terracotta #d95a49  
• Licht terracotta  #f0d0c8  
• Donker teracotta #3b1a00  
• Grijs #9A9A9A  

Varianten

U kunt ook de volgende variaties gebruiken voor de gekleurde achtergronden

• Licht roze #f2e3df
• Donker roze #e7a599

De kleuren van de text 

De lopende tekst is in # 562821 maar de kleuren Terracota en donker terracotta kunnen ook gebruikt worden voor de tekst op een witte achtergrond.

Toegankelijkheid: kleurcontrasten

De Europese richtlijn inzake toegankelijkheid van overheidswebsites is eind 2016 in werking getreden. De websites van perspective.brussels moeten voldoen aan de norm WGAC 2.0, niveau AA.

De kleur #562821 op een witte achtergrond heeft een contrast van 12,2:1 en voldoet dus in elke grootte en letterdikte aan de geldende normen.

De kleur Terracotta #d95a49 op een witte achtergrond heeft slechts een contrast van 3,8:1 en mag enkel gebruikt worden voor teksten in tekens van minimaal 14 pixels.

Lettertypes

Het belangrijkste lettertype voor de website is Raleway. Het is verkrijgbaar bij Google en kan gebruikt worden in de diktes 400, 500 en 700, cursief of normaal.

Een bijkomend lettertype, Monospace, wordt in zeer specifieke gevallen gebruikt, net als het lettertype Anonymous Pro, dat ook bij Google verkrijgbaar is.

Dat lettertype wordt enkel gebruikt voor cijfertabellen (rechts uitgelijnd in dat geval) en de footer van de website.

Geen enkele van de drie roze varianten kan gebruikt worden voor een tekst op een witte achtergrond, ongeacht de grootte. Die kleuren moeten als tekstachtergrond gebruikt worden.

Header

De header van de website moet links het volledige logo bevatten en rechts het loepje van de zoekfunctie en het kruimelpad met de taalkeuze.

 

Footer

De footer van de website moet over de volledige breedte van het scherm ingevuld worden met de achtergrondkleur Terracotta donker #3b1a00. Het lettertype dat voor de footer gebruikt wordt, is Anonymous Pro.

Aan de linkerkant staan interne en externe koppelingen en aan de rechterkant staan de contactgegevens van perspective.brussels met koppelingen naar de sociale netwerken.

Op de laatste lijn staat de copyright-vermelding, credits en de koppeling naar de wettelijke vermeldingen.

 

Knoppen en CTA (Call To Action)

De knoppen kunnen de volgende kleuren hebben :

Knop 1

Knop 2

Knop 3

De functie ':hover' keert de kleuren om, behalve voor de roze knop. De tekst blijft donker.

 

Pictogrammen

Voor bepaalde acties tijdens het browsen of downloaden moeten er bepaalde pictogrammen gebruikt worden:

Voor een externe koppeling moet het volgende icoontje gebruikt worden : 

De zoekfunctie wordt weergegeven met het loepje :

Voor het downloaden van bestanden moet het volgende icoontje gebruikt worden :

Het browsen via ankers op een pagina wordt weergegeven met de volgende icoontjes   

Het browsen tussen verschillende pagina's van de website wordt aangeduid met de icoontjes    

In de laatste twee gevallen staat het terracotta icoontje voor de actieve pagina/anker.

 

Elementen om toe te voegen aan deze pagina over het grafisch handves

(toe te voegen door de ontwikkelaar (idee van de cel COM)

• pictogram om toe te voegen
  • fr, nl, en
  • locatie
  • inschijven 
  • agenda
• illustraties (stadsprojecten, uitdagingen in de stad, statistieken, plannen)
• driehoeksprincipe met de foto voor de actualiteit/stadsprojecten (transparantie, tekst, ...)
• streepje en pijltjes in de kolom met documenten (rechts)
• vergroten van de foto en bolletje om van de ene naar de andere foto te gaan