Er zijn veel visuele ontwerppunten die tijdens dit besluitvormingsproces moeten worden
aangevinkt. Veel van deze processen zullen betrekking hebben op hoe ontwerpelementen zich tot elkaar
verhouden. Alle deze visuele ontwerpkeuzes gaan over iets dat heet contrast.
Contrast wordt beschouwd als een van de vijf essentiële visuele ontwerpprincipes. De
overeenkomst tussen deze principes is dat ze weergeven hoe ontwerpelementen samenwerken om een visuele
entiteit te vormen die gebruikers waarnemen en waarmee ze omgaan.
Contrast is de relatie tussen twee of meer ontwerpelementen waarvan de dramatische verschillen worden benadrukt wanneer beide elementen samen worden weergegeven. De mate van contrast tussen deze elementen staat niet in verhouding tot hun mate van overeenkomst: hoe minder vergelijkbaar twee items zijn, hoe groter het contrast tussen hen.
Lichtblauw of een andere pastelkleur zou bijvoorbeeld niet bijzonder prominent zijn op
een website met andere pastelkleuren met vergelijkbare tinten. Maar als pastelelementen worden afgewisseld met
donkere, gewaagde elementen zoals een diepe auberginekleur, zou het verschil tussen de donkere en lichte
kleuren duidelijk zijn.
Een belangrijk voordeel van contrast in op de website van je school ligt in de impact ervan op de visuele hiërarchie. Zoals ik al zeiden, kan contrast worden gecreëerd door een variatie in de grote, vorm, kleur of andere kenmerken. Het benadrukken van een tweedeling van belang tussen twee ontwerpelementen hangt niet af van het soort contrast dat bestaat, maar van de mate van polariteit ertussen.
De meest effectieve manier om contrast in op je website te gebruiken, is door
vertrouwd te raken met de vele soorten contrast die kunnen bestaan.
Kleurcontrasten zijn de meest bekende vorm van contrast in design. De grootste reden waarom kleurcontrast wordt gebruikt, is omdat het zorgt voor het meer toegankelijk maken van je website. De belangrijkste reden hiervoor is dat de leesbaarheid van de tekst beter is, wanneer het contrast met de achtergrond voldoende is. Kleuren zijn belangrijk, omdat het de toegankelijkheid van je de website van je school vergroot voor leerlingen met een visuele beperking of met kleurenblindheid. Daarnaast zorgt het er ook voor je leerlingen onbewust laat focussen op de plaatsen op de website, waar je ze op wilt laten focussen. Denk daarbij aan bijvoorbeeld de knop "aanmelden". Kleurcontrast zorgt ervoor dat leerlingen niet alleen je website bezoeken en verlaten, maar dat ze ook daadwerkelijk overgaan tot een actie.
Heb je al een bestaande website en ben je voorlopig nog niet van plan om een nieuwe
website voor je school te laten maken, dan kun je het beste gebruik maken van een "overlay".
Overlays van achtergrondafbeeldingen (evenals overlays in effen kleuren of patronen)
kunnen een duidelijker contrast geven tussen de achtergrond en een koptekst. Deze techniek wordt veel gebruikt
voor de Hero (dit is het eerste scherm dat je ziet als je op een webite komt).
In de afbeelding met de auto hierboven zie je een semi-transparante zwarte
achtergrondoverlay. Deze is toegepast op de afbeelding en verhoogt het contrast tussen de afbeelding en de
witte koptekst. De schaduw van het zwart is transparant genoeg om de afbeelding te zien en de tekst is
duidelijk leesbaar. Wat in het bedrijfsleven vaak goed gaat, gaat bij scholen meestal fout. Hieronder zien we
een afbeelding van een middelbare school uit Groningen. Daar zien we de witte koptekst op een achtergrond die
voor een groot deel ook wit is. Het gevolg is dat de tekst slecht te lezen is.
Begin je met een nieuwe website voor je school of ben je instaat om de kleuren van de
website aan te passen? Dan kun je de nieuwe kleuren makkelijk testen met een simpele truc.
Plaats de kleuren die je wilt gebruiken naast elkaar en maak er een grayscale van. Een
grayscale betekend dat je de kleuren grijs maakt. Het grijs maken kan al via simpele online tools zoals pinetools.
Bron: Chris Do
Als het contrast tussen de kleuren te laag is, dan kun je dat makkelijk zien in
grayscale. In de afbeeldingen hieronder zie je het verschil. In de eerste afbeelding is het verschil te laag,
in de tweede afbeelding is het verschil goed te zien.
Wil je snel checken of je website voldoet aan een goede contrast. Maak dan een
screenshot van je website en maak er een greyscale van. Zodra we kijken naar de voorbeelden van de overlays
kijken, dan kun je zien dat naast het kiezen van de juiste kleuren, een overlay ook het probleem kan oplossen.
Wil je geen tijd en moeite investeren in het grijs maken van allerlei
kleurcombinaties, dan kun je het kleurcontrast automatisch laten maken via online tools zoals ColorSpace.
Als je tot hier bent gekomen, dan denk je waarschijnlijk: "Ik heb iemand nodig die de website van mijn school kan bouwen." Daarom wil ik je een aanbod doen. Ik ga gratis met je in gesprek om te kijken wat je precies nodig hebt en ik kijk of ik de meest geschikte persoon ben om dit te leveren. Ben ik het niet, dan help ik je graag om de juiste persoon te vinden. Vind je dit interessant? Stuur me dan een email of stuur me een bericht via LinkedIn.
