{"id":87908,"date":"2016-09-26T18:51:48","date_gmt":"2016-09-26T18:51:48","guid":{"rendered":"https:\/\/codewebbarcelona.com\/technics-and-skills-duotone\/"},"modified":"2026-06-11T06:24:24","modified_gmt":"2026-06-11T06:24:24","slug":"techniken-und-faehigkeiten-duotone","status":"publish","type":"post","link":"https:\/\/codewebbarcelona.com\/de\/techniken-und-faehigkeiten-duotone\/","title":{"rendered":"Duotone"},"content":{"rendered":"

Heute habe ich einen Wissensbeitrag f\u00fcr euch: Ich m\u00f6chte euch eine Technik vorstellen, die sich in letzter Zeit im Webdesign<\/strong> gro\u00dfer Beliebtheit erfreut \u2013 den Duotone-Effekt.<\/p>\n

Was ist Duotone?<\/h2>\n

Am einfachsten l\u00e4sst sich Duotone als eine Methode beschreiben, bei der Bilder so bearbeitet oder erstellt werden, dass sie keine Mittelt\u00f6ne mehr enthalten \u2013 das, was in der analogen Fotografie das mittlere Grau und die Lichter waren.<\/p>\n

Typischerweise werden bei dieser Stilrichtung vor allem Blau-, Braun-, Rot- und Gelbt\u00f6ne verwendet.<\/p>\n

Nat\u00fcrlich steht es uns als Gestalter frei, im Webdesign<\/strong> die Farben zu w\u00e4hlen, die am besten zum jeweiligen Projekt passen \u2013 und genau das wird heute auch gemacht.<\/p>\n

Im Folgenden zeige ich euch einige Websites<\/strong>, bei denen Bilder und Illustrationen klar vom Duotone-Stil gepr\u00e4gt sind.<\/p>\n

1. Adidas Football<\/h2>\n

\"diseno-web-barcelona-estudio-duotone-01\"<\/a><\/p>\n

Das zentrale Gestaltungselement der Website<\/strong>-Kampagne von Adidas basiert auf vollfl\u00e4chigen Duotone-Bildern.<\/p>\n

Das Bild wird durch einen farblich abgestimmten Hintergrund erg\u00e4nzt, was eine beeindruckende Atmosph\u00e4re schafft und der Sportmarke die gew\u00fcnschte Ausdrucksst\u00e4rke verleiht.<\/p>\n

2. Mirage Festival<\/h2>\n

\"diseno-web-barcelona-estudio-duotone-02\"<\/a><\/p>\n

Das Webdesign des Mirage Festival setzt auf ein sehr mutiges<\/strong> und unkonventionelles Konzept und hebt sich damit deutlich von anderen Websites<\/strong> ab.<\/p>\n

Die \u00c4sthetik der Seite lebt von der Kombination aus Rot und Blau, wodurch die Bilder in Duotone verwandelt werden.<\/p>\n

3. Fjord Trend<\/h2>\n

\"diseno-web-barcelona-estudio-duotone-03\"<\/a><\/p>\n

Dieses Beispiel zeigt, wie Duotone dezent eingesetzt werden kann \u2013 sowohl bei Bildern als auch bei Hintergr\u00fcnden.<\/p>\n

Die L\u00f6sung verleiht dem Webdesign einen frischen Impuls, unterstreicht die Markenphilosophie und sorgt f\u00fcr einen spannenden Kontrast zu den Details.<\/p>\n

4. Triple 9<\/h2>\n

\"diseno-web-barcelona-estudio-duotone-04\"<\/a><\/p>\n

Duotone findet auch in Filmen und Videos Anwendung \u2013 es intensiviert die Beziehung zwischen Bild und Zuschauer und verleiht der Szene Dramatik, H\u00e4rte und eine gewisse Brutalit\u00e4t.<\/p>\n

5. La Marine Nationale on Board Careers<\/h2>\n

\"diseno-web-barcelona-estudio-duotone-05\"<\/a><\/p>\n

Hier handelt es sich nicht um Fotos, sondern um Illustrationen. In diesem Webdesign<\/strong> setzt der Gestalter auf Duotone-Illustrationen. Verschiedene Rott\u00f6ne und Wei\u00df sorgen daf\u00fcr, dass der Charakter der Website<\/strong> besonders hervorgehoben wird.<\/p>\n

Letztlich gibt es beim Duotone viele Spielarten \u2013 er kann kraftvoll, aggressiv, dramatisch oder auch das genaue Gegenteil sein.<\/p>\n

Es lohnt sich, diese Technik zu kennen. Mit dem richtigen Know-how ergeben sich immer wieder neue M\u00f6glichkeiten, sie einzusetzen, zu verwerfen oder einfach daraus zu lernen.<\/p>\n","protected":false},"excerpt":{"rendered":"

Heute habe ich einen Wissensbeitrag f\u00fcr euch: Ich m\u00f6chte euch eine Technik vorstellen, die sich in letzter Zeit im Webdesign gro\u00dfer Beliebtheit erfreut \u2013 den Duotone-Effekt. Was ist Duotone? Am einfachsten l\u00e4sst sich Duotone als eine Methode beschreiben, bei der Bilder so bearbeitet oder erstellt werden, dass sie keine Mittelt\u00f6ne mehr enthalten \u2013 das, was […]<\/p>\n","protected":false},"author":1,"featured_media":4433,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[651],"class_list":["post-87908","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-grafikdesign"],"acf":[],"yoast_head":"\nDuotone - CODE<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codewebbarcelona.com\/de\/techniken-und-faehigkeiten-duotone\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Duotone - CODE\" \/>\n<meta property=\"og:description\" content=\"Heute habe ich einen Wissensbeitrag f\u00fcr euch: Ich m\u00f6chte euch eine Technik vorstellen, die sich in letzter Zeit im Webdesign gro\u00dfer Beliebtheit erfreut \u2013 den Duotone-Effekt. Was ist Duotone? Am einfachsten l\u00e4sst sich Duotone als eine Methode beschreiben, bei der Bilder so bearbeitet oder erstellt werden, dass sie keine Mittelt\u00f6ne mehr enthalten \u2013 das, was […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codewebbarcelona.com\/de\/techniken-und-faehigkeiten-duotone\/\" \/>\n<meta property=\"og:site_name\" content=\"CODE\" \/>\n<meta property=\"article:published_time\" content=\"2016-09-26T18:51:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-11T06:24:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2016\/09\/duotone-featured.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"301\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"cd26Bc\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"cd26Bc\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/techniken-und-faehigkeiten-duotone\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/techniken-und-faehigkeiten-duotone\\\/\"},\"author\":{\"name\":\"cd26Bc\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/#\\\/schema\\\/person\\\/3af5f44aaf0de2919e9225aa5ca32567\"},\"headline\":\"Duotone\",\"datePublished\":\"2016-09-26T18:51:48+00:00\",\"dateModified\":\"2026-06-11T06:24:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/techniken-und-faehigkeiten-duotone\\\/\"},\"wordCount\":368,\"image\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/techniken-und-faehigkeiten-duotone\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codewebbarcelona.com\\\/wp-content\\\/uploads\\\/2016\\\/09\\\/duotone-featured.jpg\",\"articleSection\":[\"Grafikdesign\"],\"inLanguage\":\"de-DE\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/techniken-und-faehigkeiten-duotone\\\/\",\"url\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/techniken-und-faehigkeiten-duotone\\\/\",\"name\":\"Duotone - CODE\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/techniken-und-faehigkeiten-duotone\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/techniken-und-faehigkeiten-duotone\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codewebbarcelona.com\\\/wp-content\\\/uploads\\\/2016\\\/09\\\/duotone-featured.jpg\",\"datePublished\":\"2016-09-26T18:51:48+00:00\",\"dateModified\":\"2026-06-11T06:24:24+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/#\\\/schema\\\/person\\\/3af5f44aaf0de2919e9225aa5ca32567\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/techniken-und-faehigkeiten-duotone\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/techniken-und-faehigkeiten-duotone\\\/#primaryimage\",\"url\":\"https:\\\/\\\/codewebbarcelona.com\\\/wp-content\\\/uploads\\\/2016\\\/09\\\/duotone-featured.jpg\",\"contentUrl\":\"https:\\\/\\\/codewebbarcelona.com\\\/wp-content\\\/uploads\\\/2016\\\/09\\\/duotone-featured.jpg\",\"width\":600,\"height\":301},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/#website\",\"url\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/\",\"name\":\"CODE\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de-DE\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/de\\\/#\\\/schema\\\/person\\\/3af5f44aaf0de2919e9225aa5ca32567\",\"name\":\"cd26Bc\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g\",\"caption\":\"cd26Bc\"},\"sameAs\":[\"https:\\\/\\\/codewebbarcelona.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Duotone - CODE","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codewebbarcelona.com\/de\/techniken-und-faehigkeiten-duotone\/","og_locale":"de_DE","og_type":"article","og_title":"Duotone - CODE","og_description":"Heute habe ich einen Wissensbeitrag f\u00fcr euch: Ich m\u00f6chte euch eine Technik vorstellen, die sich in letzter Zeit im Webdesign gro\u00dfer Beliebtheit erfreut \u2013 den Duotone-Effekt. Was ist Duotone? Am einfachsten l\u00e4sst sich Duotone als eine Methode beschreiben, bei der Bilder so bearbeitet oder erstellt werden, dass sie keine Mittelt\u00f6ne mehr enthalten \u2013 das, was […]","og_url":"https:\/\/codewebbarcelona.com\/de\/techniken-und-faehigkeiten-duotone\/","og_site_name":"CODE","article_published_time":"2016-09-26T18:51:48+00:00","article_modified_time":"2026-06-11T06:24:24+00:00","og_image":[{"width":600,"height":301,"url":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2016\/09\/duotone-featured.jpg","type":"image\/jpeg"}],"author":"cd26Bc","twitter_card":"summary_large_image","twitter_misc":{"Written by":"cd26Bc","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codewebbarcelona.com\/de\/techniken-und-faehigkeiten-duotone\/#article","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/de\/techniken-und-faehigkeiten-duotone\/"},"author":{"name":"cd26Bc","@id":"https:\/\/codewebbarcelona.com\/de\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567"},"headline":"Duotone","datePublished":"2016-09-26T18:51:48+00:00","dateModified":"2026-06-11T06:24:24+00:00","mainEntityOfPage":{"@id":"https:\/\/codewebbarcelona.com\/de\/techniken-und-faehigkeiten-duotone\/"},"wordCount":368,"image":{"@id":"https:\/\/codewebbarcelona.com\/de\/techniken-und-faehigkeiten-duotone\/#primaryimage"},"thumbnailUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2016\/09\/duotone-featured.jpg","articleSection":["Grafikdesign"],"inLanguage":"de-DE"},{"@type":"WebPage","@id":"https:\/\/codewebbarcelona.com\/de\/techniken-und-faehigkeiten-duotone\/","url":"https:\/\/codewebbarcelona.com\/de\/techniken-und-faehigkeiten-duotone\/","name":"Duotone - CODE","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codewebbarcelona.com\/de\/techniken-und-faehigkeiten-duotone\/#primaryimage"},"image":{"@id":"https:\/\/codewebbarcelona.com\/de\/techniken-und-faehigkeiten-duotone\/#primaryimage"},"thumbnailUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2016\/09\/duotone-featured.jpg","datePublished":"2016-09-26T18:51:48+00:00","dateModified":"2026-06-11T06:24:24+00:00","author":{"@id":"https:\/\/codewebbarcelona.com\/de\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567"},"inLanguage":"de-DE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codewebbarcelona.com\/de\/techniken-und-faehigkeiten-duotone\/"]}]},{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/codewebbarcelona.com\/de\/techniken-und-faehigkeiten-duotone\/#primaryimage","url":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2016\/09\/duotone-featured.jpg","contentUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2016\/09\/duotone-featured.jpg","width":600,"height":301},{"@type":"WebSite","@id":"https:\/\/codewebbarcelona.com\/de\/#website","url":"https:\/\/codewebbarcelona.com\/de\/","name":"CODE","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codewebbarcelona.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de-DE"},{"@type":"Person","@id":"https:\/\/codewebbarcelona.com\/de\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567","name":"cd26Bc","image":{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g","caption":"cd26Bc"},"sameAs":["https:\/\/codewebbarcelona.com"]}]}},"_links":{"self":[{"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/posts\/87908","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/comments?post=87908"}],"version-history":[{"count":2,"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/posts\/87908\/revisions"}],"predecessor-version":[{"id":87921,"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/posts\/87908\/revisions\/87921"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/media\/4433"}],"wp:attachment":[{"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/media?parent=87908"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codewebbarcelona.com\/de\/wp-json\/wp\/v2\/categories?post=87908"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}