Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Listicle

Duotone-Design: 15 aufmerksamkeitsstarke Websites, die voll im Trend liegen

Wir schauen uns die Hintergründe und Best Practices zum Thema Duotone-Design an. (Screenshot: t3n)

Die Verwendung zweier Farben in Bildern hat sich zu einem massiven Trend entwickelt. Wir zeigen euch 15 Beispiele schicker Webseiten im Duotone-Design.

Duotone sollte ursprünglich Kosten sparen

Duotone, auch Duplex genannt, ist keine neue Erfindung. Die Technik wurde schon vor hundert Jahren eingesetzt, um Fotos interessanter wirken zu lassen. Später nutzte man den sogenannten Duplexdruck, um schlichtweg Kosten zu sparen.

Diejenigen unter euch, die im Printdesign tätig sind, wissen, dass die Druckkosten steigen, je mehr Farben involviert werden. Verwenden wir die volle CMYK-Palette mit ihren vier erforderlichen Druckplatten, ist der Druck am kostenintensivsten.

Da liegt doch die Idee nahe, nur die Farbe schwarz und eine weitere Farbe zu verwenden, um die Farbanzahl und die Zahl der Druckplatten zu halbieren. Lasst euch mal ein entsprechendes Angebot seitens einer Druckerei unterbreiten. Es wird günstiger als das Vierfarbangebot sein.

Anstelle des klassischen Duotones mit Schwarz und einer weiteren Farbe, können wir natürlich auch zwei andere Farben verwenden. Das können Varianten des gleichen Farbtons oder zwei völlig kontrastierende Farben sein.

Duotone im Webdesign

Im Webdesign müssen wir natürlich nicht auf die Kosten achten. Dem Monitor ist egal, wie viele Farben er darstellen muss. Dennoch setzt sich Duotone, wenn auch meist in abgewandelter Form auch hier immer mehr durch. Mindestens als Akzent findet ihr Duplex-Bilder auf vielen Websites. Achtet mal gezielt darauf.

Schuld an diesem Trend ist der Streamingservice Spotify, der seinen Jahresrückblick auf die beste Musik des Jahres mittels einer aufwändigen Website präsentierte, die komplett in Duotone gestaltet war. Auch für den Jahresrückblick 2016 setzt Spotify wieder auf Duotone-Effekte, wenn auch nicht so beeindruckend und konsequent wie im letzten Jahr.

Spotify-Jahresrückblick 2016: Duotone nur noch als Akzente. (Screenshot: t3n)

Duotone im Webdesign ergibt nicht bloß wegen der unbestreitbar coolen Optik Sinn. Weitere Trends der letzten Jahre legen die Verwendung nahe, etwa das Thema Flat oder Minimal Design. Wenn wir unsere Designs schon in jeder Hinsicht auf das notwendige reduzieren, dann können wir auch so wenige Farben wie möglich verwenden. Dabei muss es sich noch nicht einmal um entsprechend präparierte Bilder handeln. Wir könnten uns genauso gut generell für eine Farbpalette entscheiden, die nur zwei Farbtöne vorsieht.

Setzen wir Duotone-Bilder ein, so können wir das aus verschiedenen Gründen tun. Legitime Einsätze von Duplex-Bildern sind:

  • Dominante Hero-Bereiche, die die Aufmerksamkeit des Betrachters schnell binden sollen: Hier können wir gerne mit knalligen Farben arbeiten, die noch nicht einmal etwas mit den Ursprungsfarben des Bildes zu tun haben müssen. Warum soll die Gurke nicht mal rot sein?
  • Bilder als Website-Hintergrund: Hier müssen wir darauf achten, dass wir die Lesbarkeit des Textes nicht beeinträchtigen. Wir können Duotone sogar genau wegen der Lesbarkeit einsetzen. Der Hintergrund beruhigt sich stark. Entsprechende Farben und Transparenz tun ihr übriges.
  • Das Setzen von Akzenten als optischer Effekt: Der Duotone-Effekt kommt besonders gut, wenn wir ihn on Hover legen. Ein ganz normales Bild wandelt sich beim Überfahren mit der Maus in ein Duotone. Das sieht sehr schick aus und sorgt für Aufmerksamkeit. Umgekehrt eingesetzt gewinnen wir noch den Vorteil, dass alle Bilder zunächst homogen aussehen und sich erst beim Überfahren in das Bild verwandeln, dass dem Fotografen urspünglich in die Linse gefallen ist.
  • Homogene Darstellung unterschiedlicher Motive: Wenn wir eine größere Menge an Bildmaterial in eine Website integrieren müssen, kommt es eher häufiger als seltener vor, dass das Bildmaterial unter vielerlei Gesichtspunkten nicht als homogen bezeichnet werden kann. Wenn wir nun aber die gesamte Galerie mit dem gleichen Duotone-Effekt versehen, wirkt sie gleich viel homogener und die optischen Brüche reduzieren sich.
  • Aufpeppen weniger gelungener Bilder: Kunden liefern häufig genug Bilder, mit denen man an sich - jedenfalls mit gutem Gewissen - nichts anfangen kann. Mit drastischen Duotone-Effekten können wir aber selbst dem langweiligsten Foto frisches Leben einhauchen. Das hängt natürlich stark vom Foto ab, manche werden wir nicht retten können. Aber eine Chance, die haben wir mit Duotone.

Beispiele für den Duotone-Einsatz im Webdesign

Die folgenden Beispiele beschäftigen sich mit verschiedenen Varianten des Duotone-Einsatzes, manche loten auch die Grenzen aus. Beim Duplex-Einsatz im Webdesign gelten schließlich die starren Printregeln nicht, die es ja immerhin nur gab, um dem Kostenaspekt Rechnung zu tragen. Im Web können wir dagegen problemlos einen Duotone-Effekt mit einem anderen kombinieren und vieles mehr.

Duotone #1: Supersymmetry.Design

Supersymmetry ist ein Fotoblog, betrieben vom amerikanischen Webentwickler Matthew Pence. Technisch liegt AngularJS darunter, gecodet wurde mit Atom und designt mit Sketch. Pence nutzt Duotone durchgängig. Da er Innen- und Außenarchitektur zum Thema seines Blogs gemacht hat, ist davon auszugehen, dass er mit stark heterogenem Bildmaterial arbeiten muss, was den Einsatz des Duplex-Effekts nahelegt.

Supersymmetry: Fotoblog zu Architekturdesign. (Screenshot: t3n)

Website: Supersymmetry.design

Duotone #2: Sound in Color von HP

Das Projekt „Sound in Color” von HP vereint die Erzeugung von Malerei mit der Erzeugung von Geräuschen. Anders ausgedrückt entsteht eine Malerei in direkter Abhängigkeit der Art und Lautstärke der Geräusche, die du vor deinem Computer machst. Dafür benötigt die Website Zugriff auf eure Mikros. Die Landing Page in Duotone gibt einen Vorgeschmack auf die zu erwartenden Kunstwerke. Hier wurde Duotone rein zur Erzeugung von Aufmerksamkeit eingesetzt.

Sound in Color: Kunst aus Sound. (Screenshot: t3n)

Website: HP Sound in Color

Duotone #3: Nacache Design

Der Art Director und Interaktionsdesigner Alexandre Nacache präsentiert seine Referenzen in der Übersicht auf seiner Homepage durchgängig als Duotone-Bilder mit unterlegter Animation. Die dominante Farbe jedes Projekts ist anders gewählt, dennoch entsteht durch die einheitliche Duplex-Anwendung eine harmonische Homogenität der Darstellung.

Nacache Design: Kunst aus Sound. (Screenshot: t3n)

Website: Nacache Design

Duotone #4: Werth App

Diese Website ist eine Produkt-Landing-Page für eine App, mit deren Hilfe man sein Gehalt mit dem anderer Branchenteilnehmer vergleichen kann. Da gibt es dein Gehalt und das andere. Diesen potenziellen Zweiklang setzt die Website mit zwei Duotone-Effekten um.

Werth App: Duotone als Botschaft. (Screenshot: t3n)

Website: Werth App

Duotone #5: Build in Amsterdam

„Build in Amsterdam” ist eine Kreativagentur aus Amsterdam, die Referenzen auf einer vertikalen Präsentationsebene auf ihrer Website präsentiert. Dabei kommen Duotone-Effekte, aber auch Makroeffekte und andere Kreativtechniken zum Einsatz.

Build in Amsterdam: Duotone und andere kreative Bildtechniken. (Screenshot: t3n)

Website: Build in Amsterdam

Duotone #6: Australian Design Radio

Das „Australian Design Radio” ist ein Podcast aus Sydney in Australien. Hier dreht sich alles um Design, mit dem Fokus auf australisches Design. Die Website ist komplett im Duotone-Design gehalten, was nicht nur die verwendeten Fotos der jeweiligen Hosts betrifft. Wenn ich es interpretieren müsste, würde ich vermuten, dass damit die Uniformität der Steuerungselemente konventioneller Radios abgebildet werden sollte.

Australian Design Radio: Duotone als Homogenisierung des UI. (Screenshot: t3n)

Website: Australian Design Radio

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen

Finde einen Job, den du liebst