Wanneer we het grafische handvest toepassen op onze interfaces, moeten we onszelf de kwestie van kleur stellen.
Als er al een charter is gemaakt, moet je deze lezen en toepassen (vaak onder toeziend oog van de afdeling marketing en communicatie, die zorgt voor een goed gebruik van grafische elementen).
Maar misschien bent u verantwoordelijk voor het maken van de grafiek en dus voor het kiezen van de kleuren. Om het charter te bouwen, moet u bijzondere aandacht besteden aan de symboliek en de combinatie van kleuren.
Een coherent en harmonieus palet maakt het mogelijk om een boodschap correct over te brengen. Kleuren hebben een zeer krachtige communicatiekracht. Afhankelijk van het gebruik, de keuze en de diversiteit van de gekozen kleuren, kunt u een hiërarchie creëren tussen uw inhoud en bepaalde elementen benadrukken, waaronder call-to-actions bijvoorbeeld.
Speciale aandacht moet ook worden besteed aan toegankelijkheid. Als we het hebben over toegankelijkheid voor kleuren, dan denken we vooral aan het contrast van kleuren tussen achtergronden en teksten. Er is een verhouding voor het kiezen van de juiste kleurovereenkomsten.
Ik deel een online tool waarmee je de kleurencombinatie kunt controleren op webtoegankelijkheid.
Het samenstellen van een kleurenpalet heeft drie doelstellingen :
- Breng esthetiek, harmonie en consistentie in uw interfaces.
- Breng uw lezers over de problemen, waarden en persoonlijkheid van uw merk.
- Val op en markeer de geesten in vergelijking met concurrenten.
Ik zou zelfs een argument kunnen toevoegen door met u over organisatie te praten: als ontwerper kunt u door snel uw kleurenpalet te definiëren en eraan vast te houden, rustig interfaces bouwen en niet verdwalen.
Dus vandaag deel ik mijn tips voor het opbouwen van je kleurenpalet.
Aarzel niet om ons in opmerkingen uw goede praktijken op uw projecten te geven! Bij UX Republic luisteren we altijd naar uw best practices en uw mening!
#1 Hoofdkleur
Laten we bij het begin beginnen : de hoofdkleur van uw website! Dit is de kleur die uw merkidentiteit tot leven brengt.
Voor deze dominante kleur is het interessant om meer te weten te komen over de psychologie en betekenis van
kleuren. Dus, afhankelijk van de activiteitssector, de typologie of het doel, krijgt u hulp bij het kiezen ervan.
Kies niet op basis van uw persoonlijke voorkeuren of designtrends. Je moet sterke argumenten hebben voor je klant en vooral je doel is om via kleur een boodschap naar gebruikers te sturen.
U kunt variaties van deze kleur maken om verschillende tonen en verschillende dekkingen te verkrijgen.
#2 Secundaire kleur
De secundaire kleur zorgt voor contrast met je hoofdkleur.
Je moet bedenken dat het verschillende toestanden symboliseert in je interfaces en in het bijzonder acties (call-to-actions en links bijvoorbeeld).
Omdat het interacties en belangrijke inhoud accentueert, is het essentieel om een kleur te kiezen die opvalt en klikken aanmoedigt, terwijl het harmonieus blijft met uw charter.
Wat vind ik van deze kleur?
Over het algemeen kiest men een kleur die tegenovergesteld is aan en complementair is aan de hoofdkleur. U kunt hiervoor het kleurenwiel gebruiken. Maar dit is geen absolute regel! Laat je creativiteit de vrije loop!
Veel sites gebruiken zwart als actiekleur (vooral in de luxesector) en het werkt omdat het in het universum van het merk past en andere processen worden gebruikt om de inhoud te benadrukken.
De secundaire kleur is een goede gewoonte in UX-ontwerp, maar veel ontwerpers gebruiken deze niet en gebruiken de hoofdkleur als actiekleur.
Zo vinden we in de Apple richtlijnen de Tint Color terug, deze unieke kleur die symbool staat voor de merk/product kleur en de aanklikbare elementen.
#3 Achtergrondkleuren
De gebruikte achtergrondkleur is vaak wit of lichtgrijs. Maar nogmaals, aarzel niet om tests uit te voeren om uw creativiteit te laten ontwaken.
● Wit is een veilige keuze; het is een frisse kleur waardoor uw content opvalt.
● Lichtgrijs maakt het mogelijk om inhoud met een witte achtergrond te accentueren en daardoor te verbeteren (bijvoorbeeld kaarten of een tabel).
● Donkere tinten: Je kunt ook donkere tinten voor je interface overwegen, zoals antracietgrijs of middernachtblauw. Ook dit hangt af van je kleurenpalet.
● Gradiënten zijn ook een optie, en hiervoor heb je meerdere kleuren nodig die goed bij elkaar passen en geen onevenwichtigheid of te abrupte overgang creëren.
Mijn truc voor het bepalen van de achtergrondkleur is om uit te gaan van de hoofdkleur en deze lichter te maken om er een verbinding mee te maken.
Wat vind ik van deze kleur?
- Ik selecteer de hoofdkleur in Figma, Sketch of een andere ontwerptool.
- Ik schakel over naar de HSL-modus (in plaats van bijvoorbeeld in Hex te zijn.
- Ik verander de "L" -waarde in 95.
#4 Tekstkleuren
Een goede gewoonte om in gedachten te houden voor uw ontwerpen is om geen zwart (#000000) te gebruiken voor uw elementen, vooral uw teksten.
Wij geven de voorkeur aan zwarte varianten die beginnen bij blauw, groen, grijs, … Wederom, afhankelijk van je palet.
Mijn truc voor het bepalen van de kleur van tekst maakt gebruik van de methode voor de achtergrondkleur, dat wil zeggen, om uit te gaan van de hoofdkleur en deze donkerder te maken om er een link mee te maken.
Wat vind ik van deze kleur?
- Ik selecteer de hoofdkleur in Figma, Sketch of een andere ontwerptool
Ik schakel over naar HSL-modus (in plaats van bijvoorbeeld in Hex te zijn) - Ik verander de "L" -waarde in 10
Ik raad je ook aan om voor de teksten twee kleuren te kiezen. Een donkere en een lichtere om een hiërarchie te creëren tussen verschillende soorten inhoud.
#5 Waarschuwingskleuren
Voor bepaalde typen sites is het interessant om kleuren voor de waarschuwingen te geven: rood, oranje en groen.
Ze kunnen worden gebruikt om berichten of meldingen naar uw gebruikers te sturen, zoals een fout of een validatie.
Dit zijn kleuren die gebruikt worden voor :
● foutmeldingen, 404 pagina's, alerts (snackbars, toasts, modals, etc.).
● de toestanden en/of statussen van een element
● knoppen of links (rood om bijvoorbeeld te vernietigen of te verwijderen)
# Tot slot
Om een kleurenpalet op te bouwen, is je eerste taak daarom om eerst je hoofdkleur te kiezen. Dankzij deze keuze kunt u een harmonieus en coherent palet creëren.
Even terzijde over het gebruik en het delen van het handvest dat je gaat maken: denk aan het maken van een document waarin de kleuren en hun gebruik worden gegroepeerd om het te delen met het projectteam en in het bijzonder met de ontwikkelaars van het project.
Het kan ook de vorm aannemen van een bibliotheek in uw favoriete ontwerptool.
En in dit geval raad ik je aan om de termen (“primaire kleur”, “secundaire kleur”, …) te gebruiken. En niet de naam van de kleur (“Blauw”, “rood”, “#FEFEFE, …).
Dus als er een wijziging wordt aangebracht, wordt het gemakkelijker voor u. En in gebruik zal het ook zijn bij het maken van uw verschillende routes.
Vergeet niet de tijd te nemen om inspiratie op te doen, de symbolen te controleren, tests uit te voeren en uw keuzes uit te dagen.
Afbeeldingsbron: https://undraw.co/illustrations
Alexa CUELLAR UX-UI-ontwerper @UX-Republic
