3. Charte graphique régionale
L’identité visuelle déployées par la Stratégie Web Régionale dans le portail be.brussels et ses 13 sites thématiques se base sur la charte graphique de la région Bruxelles-Capitale. La charte graphique régionale n’ayant pas été adaptée à une utilisation sur le web, certaines adaptations ont été effectuées au niveau notamment des couleurs.
A. Couleurs
Pour une utilisation en ligne, une vaste palette de couleurs a été élaborée qui, d'une part, reflète l'identité de la région Bruxelles-Capitale, mais d'autre part, est suffisamment polyvalente pour répondre à tous les besoins fonctionnels.
1) Les couleurs principales
La base de cette palette comprend trois couleurs, qui définissent l'identité de marque de la Stratégie Web Régionale:
2) Les couleurs secondaires
À partir de ces couleurs, une palette polyvalente et fonctionnelle a été créée. En voici un aperçu.
3) Comment utiliser les couleurs de la charte graphique SWR
Il va sans dire que ces couleurs ne doivent pas être utilisées de manière interchangeable au hasard. Afin de transmettre de manière optimale l’identité de la Stratégie Web Régionale, chaque couleur est dotée d'une fonction. Vous trouverez ci-dessous un aperçu.
 | Les différentes nuances de bleu, avec le bleu primaire comme principale variation, sont les principaux vecteurs de l’identité de la Stratégie Web Régionale. Ces couleurs sont principalement attribuées à des surfaces et des zones de contenu plus grandes. Les composants interactifs les plus importants, tels que les boutons et les liens, sont également bleus. |
 | Nous utilisons principalement le gris et le noir pour les éléments de support, tels que le texte et les étiquettes. Le blanc n'est pas seulement utilisé comme couleur dominante pour les interfaces, mais c'est aussi la couleur de texte choisie sur les arrière-plans sombres. |
 | Le rouge, le vert et le jaune sont utilisés exclusivement pour les éléments d'interface fonctionnels, qui fournissent à l'utilisateur un retour d'information sur les interactions. Nous distinguons le vert pour les actions réussies, le rouge pour les messages d'erreur et l'orange/jaune pour les avertissements. Le jaune est également utilisé comme couleur de mise au point. |
4) Hiérarchie des couleurs
Une page typique sera toujours construite avec des bandes horizontales, il est donc important de toujours maintenir une hiérarchie en termes d'utilisation de la couleur.
Le blanc est toujours dominant, suivi du bleu clair et du bleu primaire. De cette façon, le design ne devient pas trop lourd visuellement. Soyez donc parcimonieux dans l'utilisation du bleu primaire et gardez toujours les mises en page légères et épurées.
5) Système de couleurs sémantique
Dans le système de conception, en plus de la palette de couleurs de base, un certain nombre de jetons de couleur variables ont été définis qui nous permettent d'ajuster rapidement les couleurs si nécessaire. Il empêche également l'ajout inutile de valeurs de couleur différentes. Utilisez donc toujours les jetons définis et n'ajoutez pas vous-même d'autres couleurs au système.
L'exemple ci-dessous illustre la façon dont les jetons de couleur sémantique sont attribués aux différents composants.
B. Police de caractères web
1) La police Inter
La police Inter est utilisées pour tous les canaux numériques.
Inter est une police de caractères open-source sans empattement conçue par le concepteur/programmeur suédois Rasmus Andersson. Il est conçu pour bien fonctionner sur les écrans en tant que police d'interface utilisateur et a une grande hauteur x.
Quelques avantages :
Optimisé pour le web
Police Google
Licence libre
La hauteur x est la caractéristique la plus frappante de l'Inter. Cela permet une lisibilité optimale du texte, ce qui rend la police particulièrement adaptée aux applications numériques.
Inter peut être téléchargé sur le site Web de Google Fonts : fonts.google.com/specimen/Inter
2) Un ensemble complet de styles
Bureau
Mobile
C. Design
Le design du portail régional be.brussels se veut volontairement simple et ouvert (en lien avec les 5 principes de conception de la stratégie web régionale), ceci afin de rendre la navigation fluide et agréable.
Simple
Chaque élément graphique de la conception est soigneusement choisi et a une fonction dans la mise en page. Dans le cas contraire, nous l'omettons.
Nous n'utilisons pas d'éléments de formulaire qui distraient les utilisateurs de la tâche à accomplir. La conception graphique est au service du contenu et veille à ce qu'il soit facile à lire et à parcourir.
“La perfection est atteinte non pas quand il n'y a plus rien à ajouter, mais quand il n'y a plus rien à enlever - Antoine de Saint-Exupery”
Ouvert
Nous interprétons la notion d'ouverture comme étant amicale et invitante. Le choix de design s’est porté vers des coins arrondis avec suffisamment d'espace blanc dans la mise en page. La mise en page est ordonnée et structurée, ce qui permet aux visiteurs de naviguer facilement et sans encombre.
D. Le logo de la région Bruxelles-Capitale
Le portail régional be.brussels met en évidence le logo de la région Bruxelles-Capitale. Ce logo peut être retrouvé dans le header ainsi que dans le footer de toutes les pages du site. Le logo uni-langue est utilisé et change en fonction de la langue du site. Il est cliquable et permet à l’utilisateur de retourner sur la page d’accueil du portail be.brussels exposant les 13 familles thématiques.
Retour à la page d’accueil du playbook ici