Charte graphique

L’identification immédiate de notre identité graphique par nos publics cibles constitue un enjeu majeur.

La forme, les couleurs et l’emplacement du logo sur la page, l’univers
coloriel, la typographie sont autant de balises qui contribuent à l’installation et à la consolidation de notre identité graphique. Il n’y a pas de reconnaissance sans cohérence.
Cette charte constitue la référence absolue. Nous sommes tous responsables de notre identité graphique. Voilà pourquoi il est essentiel que chacun d’entre nous adopte et applique consciencieusement l’ensemble de ces règles et, le cas échéant, les fasse appliquer par nos prestataires.)

Pour toute information concernant la création et/ou la production de vos documents, site internet, merci de prendre contact avec l’équipe de la Communication : communication@perspective.brussels – T +32 435 42 23/63

Cette charte graphique évoluera et s’enrichira dans le temps, veuillez vérifier que vous utilisez la dernière mise à jour. Cette page internet est une déclinaison de la charte pour sa partie web, application.

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
  • 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 1Bouton 2Bouton 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