2 simpele trucs om de kleuren van je schoolwebsite te verbeteren

Gemaakt
August 26, 2021
Laatste update
October 8, 2021
Auteur
Robbert van Empel
Onderwerp
Website
Samenvatting
Enkele van de eerste brainstormvragen die je bij het maken van een nieuwe website voor je school moet stellen is: wat is de identiteit van de school? Welke "stijl" past het beste bij onze school? Heeft het zin om een ​​minimalistisch (wit en zwart kleurenschema te gebruiken) of een meer neutraal kleurenpalet met verschillende tinten beige en bruin? Lees hier de 2 trucs van websitebouwer Robbert.

Hoe kun je de kleuren van de website van je school verbereren?

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.

Wat is contrast?

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.

Waarom contrast gebruiken op je website?

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.

Kleur

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.

Gebruik een overlay

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.

Check je kleuren met een simpele truc

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.

Bron: Chris Do

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.

Heb je meer hulp nodig?

Dan mag je me altijd een email sturen. Ik vind het ook altijd leuk om contact met je te maken via LinkedIn, dus stuur me vooral een connectieverzoek.