3 - Regionaal grafisch charter
De visuele identiteit die is ingevoerd door de Regionale Webstrategie op het portaal be.brussels en de 13 thematische sites, is gebaseerd op de huisstijl van het Brussels Hoofdstedelijk Gewest. Aangezien de regionale huisstijl niet is aangepast voor gebruik op het web, zijn er enkele aanpassingen gedaan, met name op het gebied van kleuren.
A. Kleuren
Voor gebruik online, werd een uitgebreid kleurenpalet samengesteld dat eenerzijds de merkidentiteit weerspiegelt, maar anderzijds veelzijdig genoeg is om tegemoet te komen aan alle functionele noden.
1) De primaire kleuren
De basis voor dit palet omvat drie kleuren, die bepalend zijn voor de merkidentiteit van de regionale webstrategie:
2) De secundaire kleuren
Vanuit deze kleuren werd een veelzijdig, functioneel palet samengesteld. Een overzicht.
3) Hoe de kleuren van de SWR-huisstijl gebruiken?
Het spreekt voor zich dat deze kleuren niet willekeurig door elkaar mogen worden gebruikt. Om de merkidentiteit van de regionale webstrategie optimaal uit te dragen, krijgt elke kleur een functie. Hieronder een overzicht.
 | De verschillende tinten blauw, met het primaire blauw als belangrijkste variatie, zijn de voornaamste dragers van de merkidentiteit van the regionale webstrategie. Vooral grotere oppervlaktes en contentvlakken krijgen deze kleuren toegewezen. Ook de belangrijkste interactieve componenten, zoals buttons en links zijn blauw. |
 | Grijs en zwart gebruiken we hoofdzakelijk voor ondersteunende elementen, zoals tekst en labels. Wit wordt niet alleen als dominante kleur gebruikt voor onze interfaces, maar is ook de uitgewezen tekstkleur op donkere achtergronden. |
 | Rood, groen en geel worden uitsluitend gebruikt voor functionele interface elementen, die de gebruiker feedback geven over interacties. We onderscheiden groen voor succesvolle acties, rood voor foutmeldingen en oranje/geel voor waarschuwingen. Geel wordt ook gebruikt als focus-kleur. |
4) Kleuren hiërarchie
Een doorsnee pagina zal steeds worden opgebouwd met horizontale banden, waarbij het belangrijk is steeds een hiërarchie aan te houden op gebied van kleurgebruik.
Wit is steeds dominant, gevolgd door lichtblauw en het primaire blauw. Op deze manier wordt het design visueel niet te zwaar. Wees dus spaarzaam in het gebruik van het primaire blauw, en hou de lay-outs steeds licht en overzichtelijk.
5) Semantisch kleurensysteem
Binnen het design systeem werden naast het basiskleurenpalet een aantal variabele kleur-tokens gedefinieerd die ons in staat stellen snel kleuren aan te passen waar nodig. Het voorkomt ook onnodige toevoeging van afwijkende kleurwaardes. Gebruik dus steeds de gedefinieerde tokens en voeg zelf geen andere kleuren toe aan het systeem.
Onderstaand voorbeeld illustreert hoe de semantische kleurtokens zijn toegewezen aan de verschillende componenten.
B. Weblettertype
1) Lettertype Inter
Het lettertype "Inter" wordt gebruikt voor alle digitale kanalen.
Inter is een open-source schreefloos lettertype ontworpen door de Zweedse ontwerper/programmeur Rasmus Andersson. Het is ontworpen om goed te werken op schermen als een UI-lettertype en heeft een grote x-hoogte.
Enkele voordelen:
Geoptimaliseerd voor web
Google font
Gratis licentie
De zogenaamde x-hoogte is het meest opvallende kenmerk van Inter. Daarmee kan een optimale leesbaarheid van tekst worden bekomen, wat het lettertype bijzonder geschikt maakt voor digitale toepassingen.
Inter kan worden gedownload via de Google Fonts website: fonts.google.com/specimen/Inter
2) Een uitgebreide stijlenset
Desktop
Mobile
C. Design
Het ontwerp van het regionale portaal be.brussels is bewust eenvoudig en open (in lijn met de 5 ontwerpprincipes van de regionale webstrategie), met als doel de navigatie vlot en aangenaam te maken.
Eenvoudig
Elk grafisch element in het ontwerp is met zorg uitgekozen en heeft een functie in de lay-out. Anders laten we het weg.
We gebruiken geen vormelementen die gebruikers afleiden van de taak waarmee ze bezig zijn. Het grafisch ontwerp staat in dienst van de content en zorgt ervoor dat die goed lees- en scanbaar is.
“Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away - Antoine de Saint-Exupery”
Open
Open interpreteren we als vriendelijk en uitnodigend. We kozen voor ronde hoeken en laten genoeg witruimte toe in de lay-out. De lay-out is ordelijk en gestructureerd, waardoor bezoekers gemakkelijk en zorgeloos navigeren.
D. Het logo van het Brussels Hoofdstedelijk Gewest
Het regionale portaal be.brussels benadrukt het logo van het Brussels Hoofdstedelijk Gewest. Dit logo is te vinden in de header en de footer van alle pagina's van de website. Het eentalige logo wordt gebruikt en verandert afhankelijk van de taal van de site. Het is klikbaar en stelt de gebruiker in staat terug te keren naar de startpagina van het be.brussels portaal, waar de 13 thematische families worden gepresenteerd.
Terug naar de startpagina van het draaiboek via deze link