De mogelijkheid om zwart-witfoto's met kleur te kleuren is al tientallen jaren een belangrijk onderdeel van fotografie en moderne beeldbewerkers maken afbeeldingen in grijstinten en koeling ineens eenvoudig.

Dit concept van een gestage progressie van tinten kan ook worden gebruikt om informatie te presenteren.

Deze techniek van het kleuren van digitale foto's werkt goed voor het presenteren van informatie en kan de bruikbaarheid verbeteren.

Net zoals een verloop een kleurengamma weergeeft, kan een monotoon of duotoon worden gebruikt om een ​​gegevensbereik weer te geven.

In dit artikel leren we hoe we kleur kunnen toepassen om infographics te verbeteren.

Tenzij ze de omzet berekenen, associëren de meeste mensen geen spreadsheets met kunstfotografie. Maar zelfs buiten de boekhoudwereld kunnen tabellen en duotones zich vermengen. De kunst is om te weten wanneer je kleuren moet gebruiken.

Tinting Verbetert een afbeelding in grijstinten

Digitaal sepiatinten zijn afbeeldingen in grijstinten waarvan de pixels enigszins gekleurd zijn, meestal met beige of blauw. Oranje of geel kunnen het effect van oude foto's repliceren, die soms zijn getint met sepia-pigment. Sepia-tonen (of, meer in het algemeen, monotones) kunnen een zwart-wit (grijsschaal) beeld "opwarmen" of "afkoelen" zonder afbreuk te doen aan de compositie.

kleurenfoto, grijsschaalfoto en sepiatint

Het verschil tussen een grijswaardenafbeelding en een sepia-tint is de tint van de sepia, zoals hierboven te zien is. Elke digitale foto kan in een sepiatint worden omgezet, hoewel sommige foto's beter werken dan andere. Afbeeldingen die meer afhankelijk zijn van kleur (met name tint) dan contrast, verzwakken vaak in de overgang naar tint.

voorbeeld van hoe sommige foto's kleuren vereisen

Het opvallende roze schittert in het originele beeld hierboven maar verdwijnt wanneer de tinten uniform worden. Zelfs als een afbeelding met een tint zou kunnen werken, kan de verkeerde tint de foto overbelasten.

voorbeeld van een monotoon te ver weg gegaan

Een tint kan een gimmick worden als de kleur te voor de hand liggend is. Hierboven krijgt de originele foto een psychedelische uitstraling wanneer te veel blauw wordt toegepast. Het doel is niet om kleur toe te voegen, maar om 'smaak' toe te voegen.

Meer dan één kleur in een tint gebruiken is mogelijk:

monsters van een monotoon, een duotoon en een triton

De drie soorten tinten hierboven hebben de passende naam. Monotones passen dezelfde tint toe op de hele afbeelding. Duotonen gebruiken één tint voor schaduwen en een andere voor hoogtepunten. Tritonen voegen een derde tint toe voor middentonen.

Duotonen bieden natuurlijke grenzen

Traditionele tabellen en staafdiagrammen werken in twee dimensies, maar niet alle gegevens passen in het rij-kolomformaat.

Een duotoon is geweldig voor het presenteren van een reeks gegevens omdat het zelf een reeks kleuren is. Esthetisch gesproken lijken mengsels van twee hoofdkleuren er uit alsof ze bij elkaar horen. Maar toegepast op gegevens hebben kleurenwa- pen nog andere voordelen. Ten eerste omdat niet iedereen kan kleuren goed zien , met behulp van een reeks donkere tot lichte kleuren helpen mensen met Gezichtsverlies om het effect te zien. Ten tweede zijn verschillende tinten nuttig voor het weergeven van verschillende gegevenssets.

De onderstaande grafieken tonen de verkoopvolumes van een fictief bedrijf gedurende meerdere jaren. Hoe kan kleur ze verbeteren?

voorbeeldgrafieken met toegepaste kleuren

Laten we de grafieken een voor een nemen:

  • 1998: dit standaard staafdiagram gebruikt ruimte om gegevens uit te leggen. De hoogte en de horizontale positie van elke balk vertellen ons hoe de verkoop in elk kwartaal van het jaar verliep. Het is functioneel en duidelijk.
  • 1999: Kleurcodering van de balken voegt stijl toe, maar vertelt ons niets nieuws. Kleuren kunnen worden gebruikt om de staven samen te groeperen, maar omdat elke staaf een andere kleur heeft, is niets verbeterd. We kunnen het verschil tussen elke balk net zo gemakkelijk onderscheiden zonder kleur.
  • 2000: verticaal gebruik van kleuren laat zien hoe de balken zich tot elkaar verhouden. Merk bijvoorbeeld op hoe Q4 nauwelijks het rode gebied bereikt, een feit dat gemakkelijk over het hoofd wordt gezien in de eerste twee grafieken.
  • 2001: deze laatste gebruikt een duotoon, maar het helpt niet. Het toevoegen van een effect zonder de gegevens informatiever te maken, komt de gebruiker niet ten goede. Dat is het verschil tussen een gimmick en een verbetering.
monsters van monotone staafdiagrammen

De bovenstaande grafieken gebruiken kleurvariaties in plaats van dichte balken. Beide versies hebben hetzelfde doel: om de omzet in stappen per kwartaal weer te geven. Color neemt de gegevens een stap verder.

  • 2002: Het break-evenpunt voegt wat nieuwe informatie toe: de verkoop moet deze regel doorgeven aan het bedrijf om winst te maken. De grafiek van 2002 laat zien dat het bedrijf slechts in een kwartaal verlies boekte.
  • 2003: een verschil in schakering geeft het breekpunt aan. Maar is het duidelijk genoeg?
  • 2004: De delen van de bars met winst worden hier nog duidelijker aangegeven, maar we zijn de stappen kwijtgeraakt.
  • 2005: het tegenovergestelde van de grafiek voor 2004, deze markeert incrementen boven het break-evenpunt, waarbij duidelijk de winst van het bedrijf (indien aanwezig) in elk kwartaal wordt aangegeven en de rest wordt genegeerd.

Kleur is een krachtig hulpmiddel voor non-verbale communicatie. Naast esthetiek, kan het worden gebruikt om te organiseren. Hoe kunnen we anders de kleuren gebruiken in de laatste reeks voorbeelden?

monsters van monotone staafdiagrammen
  • 2006: Verlopen geven aan waar elke balk de $ 20.000 en $ 40.000 markeert. Dit is handig, maar het break-even punt is $ 30.000.
  • 2007: Pure gradiënten worden donkerder om een ​​hogere omzet te vertonen, totdat we het break-evenpunt bereiken. Omdat de kleuren boven het $ 30.000-teken vergelijkbaar zijn met de achtergrondkleur, vervagen ze. Hoog contrast vestigt de aandacht op het feit dat het bedrijf in slechts drie kwartalen winst heeft gemaakt.
  • 2008: Het omkeren van de gradiënt halverwege de y-as is een ongewone benadering. Dit impliceert dat het blok van $ 20.000 tot $ 30.000 significant is maar niet het break-even punt van $ 30.000 zelf. In tegenstelling tot de zuivere gradiënten voor 2007, geeft deze grafiek duidelijk elke toename van $ 10.000 aan.
  • 2009: Ze zeggen dat sommige regels gebroken zijn, maar deze grafiek breekt ze zonder duidelijke reden. Geen van de tinten komt overeen met de dollarstappen en het break-evenpunt is moeilijk te zien. Schaduw werkt het beste als het de gebruiker iets vertelt. Schaduw voor zichzelf is slechts decoratie.

Meer voorbeelden

Deze techniek is niet beperkt tot staafdiagrammen.

voorbeeld van tekst in een tabel

De bovenstaande gegevens compileren de sterbeoordelingen van critici voor verschillende films. De onbewerkte gegevens aan de linkerkant zijn leesbaar maar niet nuttig; elke regel tekst scannen voor een enkel gegeven is mogelijk, maar het is moeilijk om het grote geheel te zien. Het presenteren van de gegevens in een tabel (rechts) geeft de kijker een gevoel van alles tegelijk. We kunnen op zijn minst duidelijk zeggen dat er vijf critici en zeven films zijn, en we krijgen een idee van wie wat leuk vond.

Het toewijzen van een kleur aan elke sterbeoordeling zou meer onthullen over hoe elke film het deed. Maar geen kleuren zullen doen.

verbeterde filmoverzichtstabellen

De tabel links volgt de regels, maar niet de geest van kleurcodering. Het in één oogopslag weergeven van de ratings is gemakkelijk omdat elke waarde een consistente kleur heeft, maar er is geen logica achter de kleurkeuzes.

De tabel rechts gebruikt doelgerichter de kleur. Donkere tinten worden toegewezen aan lagere waarderingen en lichte tinten worden toegewezen aan hogere tinten. Het werkt ook andersom, maar het effect is hetzelfde: een reeks tinten wordt toegewezen aan een bereik van waarden.

Niet alleen is dit meer visueel aantrekkelijk, het onthult ook trends in de data. Nu is het gemakkelijk om te zien dat film F over het algemeen goed scoorde, maar film B niet, dat criticus 2 moeilijker te behagen was dan criticus 4, dat alle critici van film F maar niet van film D hielden, en dat ze het oneens waren over film A. Verschillende tinten van dezelfde tint kan dan meer dan alleen de gegevens onthullen.

Monotones en duotones werken het beste wanneer informatie is gerangschikt in lagen, niveaus of een bereik. Bijvoorbeeld:

grafiek van gemiddelde hoge en lage temperaturen

Bron: Infoplease

een evenement apart schema

Bron: An Event Apart, Boston 2010


Exclusief geschreven voor Webdesigner Depot door Ben Gremillion . Ben is een freelance webdesigner die communicatieproblemen met beter ontwerp oplost.

Waar anders kan een monotoon of duotoon informatie helpen verklaren? Deel uw mening in de commentarensectie hieronder.