Gedempte kleuren: Definitie en hoe ze te gebruiken in websites en apps

Advertentie

Het concept van het gebruik van gedempte kleuren in je ontwerp is zeker niet nieuw. Als je het vergelijkt met de trend van levendige kleuren die we bijna overal hebben, lijkt het zeker iets nieuws.

Een moderne UX-designer weet dat de minimalistische, platte trend de laatste jaren steeds meer terrein wint.

Er zijn bedrijven van het kaliber Microsoft, Apple en Twitter, en ze maken allemaal gebruik van deze opkomende stijl bij het ontwerpen van hun digitale producten.

Het vlakke ontwerp gaat hand in hand met de minimalistische benadering.

Het vlakke ontwerp elimineert diepte door geen gebruik te maken van arceringen en kleurverlopen, en geeft de voorkeur aan eendimensionale geometrie.

FireShot-Capture-1789-BO Gedempte kleuren: Definition and How to Use Them In Websites and Apps

The minimalist design will eschew unnecessary features and content, replacing it with a clean, sleek monochromatic approach. Together, the two approaches will give you legibility and clarity, and reject ornamentation and excess.

FireShot-Capture-1790-Fut Muted Colors: Definition and How to Use Them In Websites and Apps

However, even though these two practices make the UI interface very simple, their intersection has created some usability issues for certain users.

Dat alles te eenvoudig is, heeft in feite het tegenovergestelde effect gehad van wat nodig was, en gebruikers vinden het moeilijker om uit te vinden waar ze kunnen klikken, en waarom.

Gelukkig is er een derde trend om dit te verhelpen. Gedempte kleuren hebben ook wat stoom opgepikt.

exploratie-pastelkleur-2- Gedempte kleuren: Definition and How to Use Them In Websites and Apps

exploratie-pastel-kleur-2- Gedempte kleuren: Definition and How to Use Them In Websites and Apps

Gematteerde kleurenschema’s komen overal voor in gedrukte reclame. In een printcampagne heb je echter geen minimalistisch ontwerp of een vlak effect nodig, omdat de gebruiker geen interactie heeft met een stuk papier, maar alleen maar hoeft te kijken.

Hoe dan ook, het gedempte kleurenpalet heeft naast zijn primaire rol in de functionele UX-praktijken een nieuwe rol gekregen.

FireShot-Capture-1776-Air Gedempte kleuren: Definition and How to Use Them In Websites and Apps

Als je probeert een gedempte kleuren definitie te vinden, zul je merken dat het beste antwoord op de “Wat zijn gedempte kleuren” vraag ligt in het feit dat deze kleuren staan voor het moderne, efficiëntie en progressiviteit.

Ze laten de kijker zien dat de stof waar ze naar kijken, relevant is, en niet verouderd. Gedempte kleuren zie je bijvoorbeeld terug in de video “Hotline Bling” van Drake.

FireShot-Capture-1778-Rot Gedempte kleuren: Definition and How to Use Them In Websites and Apps

Deze kleuren en gedempte pastels zijn heel bewust gekozen, en ze spreken de hedendaagse cultuur en de massa aan. Ze geven ook iets aan van het moment. Omdat ze veel gemakkelijker zijn om naar te kijken dan harde, scherpe kleuren, zijn ze ook conceptueel zeer modieus.

FireShot-Capture-1780-Vic Gedempte kleuren: Definition and How to Use Them In Websites and Apps

Advertentie

Heden ten dage moeten UX-ontwerpers weten dat hun kleurkeuzes eigenlijk hun ontwerpkeuzes zijn, en kleur kan veel aangeven, net als flow, inhoud, bruikbaarheid en functie.

Kiezen tussen een levendige groene kleur of gedempte groentinten kan het verschil maken tussen de gebruiker die op de site blijft, of die meteen weer vertrekt. Net als de manier waarop een onhandige UI een beetje analoog kan lijken, kunnen die heldere, levendige kleuren lijken op een explosie uit het verleden.

Gedempte kleuren lijken zoals ze doen vanwege:

FireShot-Capture-1781-VR- Gedempte kleuren: Definition and How to Use Them In Websites and Apps

  1. Lage waarde
  2. Lage verzadiging
  3. Vermenging met aangrenzende kleuren
  4. Combinatie van een van de bovenstaande

Er zijn variaties op het vlakke kleurenpalet die je al duizenden keren hebt gezien, en vaak passen ze gewoon niet bij de ontwerpesthetiek die je nastreeft. Zelfs als al het andere je aanspreekt.

Dit is waar een gedempte kleurenoptie wonderen kan doen, want als je het gebruikt met een vlakke esthetiek, is het een klassieke, gepolijste look die anders genoeg is om op te vallen tussen alle andere vlakke projecten.

animal-800-x-600-large-1 Gedempte kleuren: Definition and How to Use Them In Websites and Apps

animal-800-x-600-large-1 Gedempte kleuren: Definitie en hoe ze te gebruiken in websites en apps

Maar, wat is een gedempt kleurenpalet?

In het kader van dit gesprek gaat het om elke tint die sterk verzadigd is en waaraan een tint of schaduw wordt toegevoegd om hem gedempt en minder fel te maken. Het resultaat is vaak een zachtere, rustigere kleur die gemakkelijker is om mee te werken en die ook beter bij het ontwerp past.

FireShot-Capture-1784-AMA Gedempte kleuren: Definition and How to Use Them In Websites and Apps

“Kleur” is eigenlijk een heel onnauwkeurige term die we dagelijks gebruiken. Het bestaat uit drie hoofdcomponenten, namelijk tint, verzadiging en waarde.

Als je een ballon hebt waarbij de evenaar de tint op 360-graden is, de verticale as de waarde en de horizontale as de verzadiging, dan kunnen de kleuren worden gevisualiseerd op het binnenvolume.

FireShot-Capture-1785-Des Gedempte kleuren: Definition and How to Use Them In Websites and Apps

Er zijn nog enkele andere concepten die bij deze vraag kunnen helpen, zoals “shading” en “tinting”. Het mengen van een kleur met zwart staat bijvoorbeeld bekend als “shading”, en resulteert in een iets gedemptere kleur.

Het toevoegen van wit aan een kleur staat bekend als “tinting”, en resulteert in een fellere kleur. Niet alle kleuren kunnen echter helder of donker worden, zoals bijvoorbeeld geel. Door het donkerder te maken, wordt het bruin.

Tinten in gedempte kleuren

FireShot-Capture-1783-Tim Gedempte kleuren: Definitie en hoe ze te gebruiken in websites en apps

Door wit aan een kleur toe te voegen, oftewel te tinten, krijg je een kleur die aanzienlijk lichter is dan het origineel, en meestal bekend staat als een pastel. Ze kunnen variëren van bijna wit, tot een beetje lichter dan de volledig verzadigde kleur.

FireShot-Capture-1786-Kve Gedempte kleuren: Definition and How to Use Them In Websites and Apps

Ze voelen lichter en zachter aan en geven je een meer rustgevende esthetiek in vergelijking met de gedurfdere, helderdere opties.

Ze zijn erg populair bij illustraties en doen ook wonderen op foto’s. Ze vallen weg van de hoofdesthetiek, en ze worden het meest gebruikt wanneer je een ander focuspunt hebt in tegenstelling tot de hoofdesthetiek.

Tinten in gedempte kleuren

FireShot-Capture-1787-Céd Gedempte kleuren: Definition and How to Use Them In Websites and Apps

Tinten daarentegen laten de kleur zwaarder lijken voor het oog, en variëren van een bijna zwarte kleur, tot een tikkeltje donkerder dan de originele kleur. Ze werken goed in verschillende omgevingen, vooral wanneer ze met minder zwart worden gebruikt.

story-app-verkenning-groot Gedempte kleuren: Definition and How to Use Them In Websites and Apps

Er zijn projecten die echt donker zijn en veel zwart hebben die leesbaarheidsproblemen met zich meebrengen tenzij je ze uitzonderlijk goed uitvoert. Mensen gaan er vaak ten onrechte van uit dat tinten zwart moeten lijken, maar als je een van de kleuren van de traditionele platte ontwerpschema’s evolueert, is dat niet het geval.

Tonen in gedempte kleuren

FireShot-Capture-1782-Wha Gedempte kleuren: Definition and How to Use Them In Websites and Apps

Door zwart en wit te combineren met een kleur om deze zachter te laten lijken, krijg je tonen. De meeste kleuren worden eigenlijk gemaakt met tonen, omdat het complexe kleuren zijn met een bijna universele aantrekkingskracht.

Dit is te danken aan het feit dat ze uit een paar verschillende delen van het kleurenspectrum putten, en dit is de reden waarom tonen de eerste keuze zijn van kunstenaars en ontwerpers voor de meeste van hun projecten.

unsplash-app-exploration-la Gedempte kleuren: Definition and How to Use Them In Websites and Apps

unsplash-app-exploration-la Gedempte kleuren: Definition and How to Use Them In Websites and Apps

Eindgedachten over gedempte kleuren

Of je nu van een aantal traditionele vlakke ontwerpkleuren afwijkt, het kiezen van een van de bovenstaande kleurtechnieken is niet je enige keuze. Je kunt tinten, schakeringen en tonen combineren om iets te maken dat anders is en absoluut innemend.

De les met deze eenvoudige studies is dat je niet verstrikt kunt raken in het moeten gebruiken van een “volgens het boekje” trend. Gebruik een ander soort techniek om je eigen trend te maken. Het kleurenpalet en het veranderen ervan kan prachtig zijn, en je kunt nog steeds een plat ontwerp krijgen.

Als je dit artikel over gedempte kleuren leuk vond, moet je deze ook eens bekijken:

  • Fotografie Website: Ontwerp, ideeën, hoe er een te maken
  • Sport websites ontwerpen: Tips, inspiratie en best practices
  • Restaurant websites ontwerpen: Tips, Inspiratie, en Beste Praktijken

Onbeperkte Downloads: 1,000,000+ Fonts, InDesign Templates, Photoshop Actions, Mockups & Design Assets via logo

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.