5 technieken voor het fine-tunen van UX met kleur
Kleur is een van de belangrijkste elementen in elk ontwerpsysteem. Op websites of in apps kan kleur op verschillende manieren worden gebruikt: soms kan kleur worden gebruikt om een focuspunt te creëren door contrast of door de kleur te beperken tot een geselecteerde plek; kleur kan ook helpen bij het vaststellen van de hiërarchie en daarom van invloed zijn op waar een gebruiker naar kijkt.
In dit artikel zullen we het hebben over hoe je kleur strategisch kunt gebruiken.
1. Een focuspunt creëren door verhoudingen
Een goed voorbeeld van kleurverhoudingen is het ontwerp van Viporte . Terwijl je naar beneden scrolt op hun startpagina, is elke sectie versierd met een grote letter in het midden. De letter is gevuld met een mooie kleur voordat de animaties van de secties beginnen. De kleur van de verschillende afbeeldingen die animeren zijn gerelateerd aan de kleur van de letters. Het brandpunt ligt zeker in het midden van de secties, mede dankzij het gerichte gebruik van kleur. De verhoudingen variëren, soms is er een beetje kleur en soms is er veel van. Hoe dan ook, verhoudingen worden gebruikt om de aandacht te vestigen op een focuspunt. Als de kleur overal binnen een sectie duidelijker was, zou het focuspunt niet zo duidelijk zijn.
2. De aandacht vangen door contrast
Een ander ding dat kleur kan manipuleren, is contrast. Wanneer de kleuren van het totale ontwerp kalm of zacht zijn, zal het toevoegen van een contrasterende kleur veel aandacht aan de afbeeldingen trekken.
Dat is precies wat er gebeurt in het ontwerp van Thinx . Op de startpagina is het algehele kleurenschema van de interface in feite zwart en wit. Toch vertrouwt het ontwerp zwaar op talloze foto's. Vooral aan de bovenkant van de startpagina hebben de foto's van het ondergoed een donkerrode achtergrond. In vergelijking met al het andere op de pagina is dat behoorlijk vet. Zonder twijfel is het ding dat hier opvalt het donkerrood. Het rood heeft een veel hoger contrast tegen het zwart-witte kleurenschema. Ik gebruik Thinx graag als een voorbeeld omdat het laat zien dat felle neon kleuren niet de enige zijn die geschikt zijn om door contrast de aandacht van iemand te trekken. Het is echt slechts een evenwichtsact van twee kleuren waardoor een van deze echt opvalt.
3. Kleur gebruiken om UX-patronen te maken
De beste manier om visuele patronen te maken, is door middel van consistentie. Patronen creëren op hun beurt relaties waarmee een gebruiker kan wennen. Het is dezelfde manier waarop gebruikers gewend zijn dat certina-pictogrammen verband houden met bepaalde acties, dat wil zeggen dat een prullenbak betekent dat u kunt verwijderen. Kleuren zijn veel subjectiever omdat elke website of app een eigen betekenis kan geven aan kleuren.
Laten we de relatie met de kleur blauw aannemen De portfoliowebsite van Underbelly . Het is een eenvoudig voorbeeld en het is perfect om mijn punt te maken. Alles waarop u op de website van Underbelly kunt klikken, is blauw. Nadat de website een paar seconden is gebruikt, wordt snel duidelijk dat hun links blauw zijn. En zo maak je patronen door kleur. Patronen zijn goed omdat gebruikers en bezoekers gemakkelijk iets kunnen herkennen. Hoe eenvoudiger erkenning wordt, hoe minder mensen denken en inmiddels weten we allemaal hoe gelukkig dat is Steve Krug .
4. Hiërarchie creëren door middel van kleur
Een ander ding kleur kan goed zijn voor het opzetten van een hiërarchie. Op Skore's productpagina , zowat elke sectie heeft elementen van groen. Niet alleen de groene repetitie, die een herkenbaar patroon creëert, het helpt ook om de belangrijke delen van een bepaald gedeelte te onderscheiden. Vaak is het eenvoudig om hiërarchie uit te leggen door middel van grootte zoals lettergrootte. Maar de intensiteit van een kleur, evenals het gebruik van een kleur in gebruik, kan ook heel goed zijn bij het instellen van een hiërarchie.
In het voorbeeld van Skore heeft de green een goed contrast met de grijze tekst en de witte achtergrond. Het valt op. Bovendien is hun kleurenschema niet afhankelijk van andere accentkleuren die de groene primaire maken. Dit alles draagt bij aan de manier waarop elke sectie de hiërarchie weergeeft. Daarom helpt de groene kleur de ogen van de gebruiker te richten op de belangrijke elementen met een mooie hiërarchie binnen elke sectie. De groene elementen vertellen een gebruiker waar hij het eerst moet kijken.
5. Benutten van overeenkomsten in kleur
Uit alle verschillende dingen die we doen met kleur als ontwerpers, gebruiken we het vooral en gebruiken we het opnieuw om consistentie op zijn plaats te houden binnen het ontwerp. Laten we eens kijken InVision's End of the Year bestemmingspagina. Aan de bovenkant van de pagina is een roze en violet verloop gebruikt als achtergrondafbeelding. Verderop in de pagina worden roze en violet gebruikt voor de knopkleuren. Bovendien wordt de bestemmingspagina wit opnieuw gebruikt over de roze en paars gekleurde achtergronden. Het gebruikt ook de zwarte en grijze tekstkleur over de witte achtergrond. Als de kleuren elke keer anders zouden zijn, zou het er niet zo geweldig uitzien.
Laten we eens een ander voorbeeld bekijken Co-motion . Op hun startpagina maakt de creatieve studio gebruik van een paar verschillende kleuren. Maar ze zijn allemaal vergelijkbaar genoeg in hun toon om een samenhangende stroom te bieden. In dit voorbeeld is er niets dat specifiek opvalt, wat ook een goed doel kan zijn. In dit geval wordt de nadruk met kleur gelegd op een goede en samenhangende stroom van de pagina, waarbij u probeert de gebruiker betrokken te houden en te laten scrollen.
Conclusie
Kleur kan een geweldig hulpmiddel zijn bij het bereiken van verschillende ontwerpdoelen. Kleur kan helpen om een hiërarchie te definiëren en vast te stellen en om een focuspunt te bieden. Kleuraccent komt in verschillende vormen. Hoe dan ook, werken met kleur kan heel leuk zijn. Beïnvloeden waar de ogen van een bezoeker of gebruiker naartoe gaan, kan eenvoudiger met behulp van een strategisch kleurenschema.