Na een beeld te hebben geschetst met de LoFi over hoe de website er zo ongeveer uit komt te zien, ben ik aan de slag gegaan met de HiFi.
Ik merkte dat contrastratio een lastig onderdeel was van de website. Om goed in de gaten te houden of de tekst nog voldoende leesbaar zou zijn, werd er tijdens het ontwerpen gebruik gemaakt van verschillende contrastratio checkers online, waaronder;
Hier was de website van coolors.co al snel een favoriet aangezien deze goed visueel liet zien hoe de tekst er uit komt te zien en aangaf duidelijk hoe de kleurcombinatie presteert. Om de website op te kleuren, heb ik verschillende mogelijkheden geprobeerd. Denk aan kleuren voor een call-to-action, achtergrond, banners, headers, subknoppen en titels.
Figuur 1: Logo van KBO Brabant
Het logo bestaat uit de volgende kleuren:
Vervolgens ben ik gaan experimenteren aan de hand van coolors.co welke combinaties mogelijk zouden zijn. De lichtblauwe/groene kleur was erg lastig te implementeren. Deze kleur is erg licht en zou onder de categorie ‘pastelkleuren’ passen. Uit mijn design pattern onderzoek bleek dat de kleuren blauw, geel en pastelkleuren het beste vermeden konden worden. Blauw wordt minder intens opgevangen door ouderen en geel en pastelkleuren lijken te veel op wit. Doordat pastelkleuren zo dicht bij de witte kleur zit, is het voor een ouder menselijk oog erg vermoeiend om daar onderscheidt tussen te houden. Deze vermoeiende vormgeving kan omgaan in frustraties wat vervolgens resulteert in het niet willen gebruiken van de website. De lichtblauwe/groene kleur heb ik daarom alleen gebruikt als subtiele accentkleur voor subknoppen en schaduwen.
Hieronder ziet u een paar experimenten over contrastgebruik met de huisstijlkleuren. Wat frustrerend was is dat opvallende kleuren met een hoog contrast vaak slecht leesbaar zijn, donkere kleuren goed leesbaar zijn maar niet opvallen en lichte kleuren al snel een pastelkleur werd waardoor dit ook voor ouderen beter niet gebruikt kan worden.
Figuur 2: Screenshots van verschillende huisstijl contrastratio’s met coolors.co
Om de website gelijk te kleuren werd er gewerkt aan een goede call-to-action knop. Het liefste wilde ik de kleur oranje gebruiken maar helaas zat deze niet in de huisstijl van het logo.
Hieronder vindt u een paar iteraties van de geprobeerde knoppen.
Figuur: 3 Iteraties van verschillende knoppen