Duotoon kleur: tips en voorbeelden voor deze levendige trend
De volgende grote afbeeldingstrend voor webdesign is hier en het is levendig, kleurrijk en mooi!
Dankzij Spotify groeit duotoon bijna dagelijks in populariteit. Het effect, dat een paar kleuren over een foto gebruikt, is opvallend, leuk en levendig. Het is ook behoorlijk trendy, met nieuwe sites die bijna dagelijks veranderen in een duotoonformaat. Hier zijn een paar manieren om het meeste uit deze hete ontwerptechniek te halen.
Wat is Duotone?
Eerst een beetje primer: Duotoon is het gebruik van twee kleuren.
De naam en techniek komt van drukpersen. Duotone prints worden gemaakt in twee tinten van dezelfde kleur of met zwart en één tint. Het proces maakt gebruik van twee kleurenplaten die zijn gemaakt met het scherm onder verschillende hoeken.
Het tweekleurenconcept is groot. Pantone noemde een paar als Kleur van het Jaar, minimalisme liet ontwerpers nadenken over beperkte paletten en duotonen zijn visueel interessant en vrij eenvoudig te maken. U kunt het effect creëren met Adobe Photoshop en een kleurverloop met twee kleuren of een tool zoals Colofilter.css om het in de code toe te passen.
Maar wat duotoon waarschijnlijk het meest heeft geholpen, is het gebruik door Spotify. Duotone-kleurenschema's worden gebruikt in de app voor het afspelen van muziek en voor verschillende promotionele microsites. Duotone voegt een uniek ontwerpelement toe aan afbeeldingen van artiesten die bekend zijn en veel worden gebruikt.
De techniek die ooit een printstapel was, heeft online een nieuw leven gevonden en is een trend waar we de komende maanden waarschijnlijk nog veel meer van zullen zien.
Als een dominant beeld
Gebruik duotoon om een dominant beeld te creëren.
Het belangrijkste beeld voor New Deal Design is opvallend dankzij een gedurfde kleurkeuze en eigenzinnig, dankzij de leuke beelden en kleuren. Wees niet bang om buiten je comfort te gaan als het gaat om het werken met duotoonbeelden; het is ok om tinten te combineren die mogelijk niet overeenkomen. Het doel is om een beeld te creëren dat aandacht vraagt en veel contrast bevat zodat het beeld zichtbaar is.
Hier volgen enkele tips voor maximale impact:
- Kies twee contrasterende kleuren of combineer merkkleuren.
- Selecteer een foto met een scherp afbeeldingsgebied. Een landschap kan moeilijk te gebruiken zijn.
- Begin met een afbeelding van hoge kwaliteit. Wazige of slechte afbeeldingen en duotoon gaan niet samen.
- Speel contrast.
- Overweeg spaties voor knoppen of typografie.
- Kies kleuren die de sfeer van de foto weerspiegelen.
- Zet een duotoonafbeelding af met een gekleurde rand of mix en match kleuropties met een schuifregelaar of parallax-effecten.
Als een eenvoudig kleurenpalet
Duotoon hoeft niet ingewikkeld te zijn. Soms zijn de meest opvallende tweekleurige projecten eenvoudig van aard.
Assurance Life Insurance gebruikt een paar rode en schone typografie. De scroll bevat ook een meer halftoonstijl. De kleuren zijn helder en aantrekkelijk. Rood is het soort kleur waardoor gebruikers er bijna naar kijken.
De truc hier is dat het eenvoudig genoeg is om effectief te zijn. De gebruiker wordt niet overweldigd door elementen. Het rood trekt je naar binnen zodat de woorden op het scherm de focus worden. Dit type duotooneffect is bijna gemaakt voor websites met een meer formele look en feel omdat het een trend mogelijk maakt zonder je gedwongen of overweldigend te voelen.
Als een manier om de leesbaarheid te vergroten
Gebruik duotoon als kleurstabilisator die de tekst veel ruimte en contrast geeft. Een duotoon-kleuroverlay kan helpen kleurvariaties in een afbeelding af te vlakken, zodat tekst bijna overal op de afbeelding met één kleur kan worden geplaatst en toch leesbaar is.
Duotone-kleurkeuzes zullen niet zo helder zijn voor dit gebruik en zullen waarschijnlijk meer gedempt lijken, maar kunnen een geweldig doel dienen. Holm Marcher & Co. doet dit met een koraal en blauwe duotoon die interessant is en een zeer leesbare achtergrond creëert voor belettering. Als extra bonus gebruiken navigatie-elementen blauwe tinten uit het kleurenpalet om het bewegen op de site te stimuleren.
Als accent
Hoewel duotooneffecten zich lenen voor grote afbeeldingen, kunnen ze ook op kleinere plaatsen werken. Overweeg een duotoonaccent in de navigatie, voor secundaire afbeeldingen of voor specifieke soorten inhoud.
Het leuke aan kleinere delen van duotoon is dat je wat meer vrijheid hebt om te spelen als je geïntimideerd bent door de techniek of niet helemaal zeker weet hoe je het voor je kunt laten werken. Bij gebruik in kleinere ruimtes kan het visueel interessant zijn om te spelen met meerdere kleurenparen voor verschillende elementen in het ontwerp.
Overweeg duotoonelementen voor kaartstijlelementen, als overlay voor links naar video of om calls-to-action te benadrukken. Duotoonaccenten kunnen ook effectieve hulpmiddelen zijn voor gebruik in een minimaal of zwart-wit kleurenschema vanwege het kleurcontrast dat ze creëren.
Als achtergrond
Er gaat niets boven een subtiel duotooneffect om een interessante achtergrondafbeelding of patroon te creëren. Dit is een ideaal gebruik voor merkkleuren of als een manier om een trendy tint of techniek in uw ontwerp op te nemen zonder een volledige revisie.
De afgestudeerde duotoonachtergrond voor Join Radio is perfectie. De kleurverandering is bijna onmerkbaar en past naadloos in andere gebruikersinterface-elementen in het ontwerp. Er is een eenvoudige animatie die door de kleuren beweegt, die rustgevend is en een waterachtige beweging heeft. De verschuiving van licht naar donker volgt natuurlijke oog- en leespatronen die van linksboven op de startpagina naar rechtsonder bewegen, waar de gebruiker verder wordt aangemoedigd om te scrollen en te klikken.
Gevolgtrekking
Het is moeilijk om een ontwerptechniek te vinden die leuker is om mee te spelen dan kleur. Duotones zijn even aantrekkelijk voor ontwerpers. Het effect kan een overgebruikt beeld opfleuren, een leuk element toevoegen wanneer er een ontbreekt en gewoon helpen om gebruikers visueel te betrekken.
Bovendien mag jij als ontwerper echt experimenteren met duotooneffecten. U kunt kleuren combineren die u zich niet had voorgesteld voor een grote impact of kleuren combineren met subtiele variaties voor een klein verrassingselement. Hoe dan ook, het creëren van dit kleureffect ziet er bijna altijd op maat uit en kan leuk zijn om mee te werken.
