Charte graphique - sites internet et applications

Cette page est un complément de la charte graphique pour pour les sites internet, applications

Le logo

Le logo est constitué de 2 éléments : le sigle et le nom.

Vous pouvez utiliser la version SVG, disponible ici

Une version sans le nom est également disponible

Sur les sites internet, le logo ne peut être utilisé que en couleurs, et il est préférable d'éviter les formats jpeg, png ou gif afin de garder le logo net en toutes circonstances.

Vous trouverez plus d'informations sur le logo dans la charte graphique jointe à cette page.

 

Les couleurs

Les couleurs du logo, titres, boutons

Les couleurs principales sont :

• Terracotta #d95a49 / R170 V95 B53  ( !! attention, le nouveau terracotta à utiliser est  #d53e2a / R213 V62 B42) )
• Terracotta clair - rose #f0d0c8 / R229 V207 B194
• Terracotta foncé #3b1a00 / R59 V26 B0
• Gris #9A9A9A / R154 V154 B154

Variantes

Vous pouvez également utiliser les variantes suivantes pour des fonds colorés

• Rose clair #f2e3df
• Rose foncé #e7a599

Les couleurs du texte courant

Le texte courant est en #562821 mais les couleurs Terracota et Terracotta foncé peuvent également être utilisées pour le texte sur fond blanc.

Accessibilité : contraste des couleurs

La directive européenne relative à l'accessibilité des sites web est entrée en vigueur fin 2016. Les sites de perspective.brussels doivent donc respecter la norme WGAC 2.0 de niveau AA.

Cette dernière couleur #562821 sur fond blanc présente un contraste de 12,2:1 et est donc conforme dans toutes les tailles ou graisses de typo.

La couleur Terracotta #d95a49 sur fond blanc ne présente qu'un taux de contraste de 3,8:1 et ne doit être utilisée que pour des textes en caractères de minimum 14 pixels.

 

Les polices de caractères

La police de caractères principale pour internet est la Raleway, disponible chez Google et utilisable dans les graisses 400, 500 et 700, en normal ou italique,

Une police de caracères secondaire, monospace, est utilisée dans des cas très spécifiques, l'Anonymous Pro, également disponible chez Google.
Cette police de caractères n'est utilisée que pour des tableaux de chiffres (alignés à droite dans ce cas) et le pied de page du site.

Aucune des 3 versions de rose ne peuvent être utilisées en texte sur fond blanc, quelle que soit leur taille. Ces couleurs doivent être utilisées pour des fonds de texte.

Le Header

Le Header du site devra utiliser le logo complet sur la gauche, l'outil de recherche avec la loupe sur la droite, et le fil d'Ariane contenant le choix de langues sur la droite.

 

Le Footer

Le Footer du site doit être sur fond Terracotta foncé #3b1a00 sur la largeur totale de l'écran. La police de caractères utilisée dans cette zone de l'écran est l'Anonymous Pro.

Il est composé sur la gauche de colonnes de liens, internes ou externes, et sur la droite des contacts, perspective ou spécifique au site, avec des liens vers les réseaux sociaux.

Une dernière ligne contient les copyrights, crédits et liens vers les mentions légales.

 

Boutons et CTA (Call To Action)

Les boutons peuvent utiliser les couleurs suivantes :

Bouton 1

Bouton 2

Bouton 3

L'état :hover inverse les couleurs, hormis pour le bouton rose - le texte reste foncé.

 

Les pictogrammes

Une série de pictogrammes doivent être utilisés pour des éléments précis de navigation ou téléchargement ;

Un lien externe doit toujours être accompagné de l'icône : 

La recherche est symbolisée par l'icône loupe :

Le téléchargement de fichiers doit utiliser l'icône suivante :

La navigation par ancres à l'intérieur d'une page utilisera les icônes   

Et la navigation entre différentes pages du site utilisera les icônes    

Dans ces deux derniers cas, l'icône terracotta resprésnete la page / l'ancre active.

 

Éléments à ajouter à cette page Charte graphique

(à ajouter par le développeur (idée de la cellule COM) 

• picto à ajouter
  • fr, nl, en
  • localisation
  • inscription
  • agenda
• les illustrations (projets urbains, enjeux urbains, statistique, plans)
• principe des triangle avec la photo pour les actus/projets urbains (transparences, texte, ...)
• tiret et petites flèches dans la colonne des documents (à droite)
• agrandissement de la photo et boule pour passer d'une photo à l'autre