<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Grundlagen Gestaltung &#8211; Torsten Stapelkamp &#8211; KI- und Design-Prof. &#8211; Design Business = Business Design</title>
	<atom:link href="https://www.torstenstapelkamp.de/category/design_basics/grundlagen_gestaltung/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.torstenstapelkamp.de</link>
	<description>Kreative Leistung Wert(e)-orientiert verkaufen - Life &#38; Business Design Community</description>
	<lastBuildDate>Mon, 02 Feb 2026 17:55:57 +0000</lastBuildDate>
	<language>de</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.1</generator>
	<item>
		<title>Form und Funktion – Bei Websites und für Hardware und Software</title>
		<link>https://www.torstenstapelkamp.de/form-und-funktion/</link>
		
		<dc:creator><![CDATA[torsten]]></dc:creator>
		<pubDate>Wed, 08 Nov 2017 11:33:18 +0000</pubDate>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[Design Basics]]></category>
		<category><![CDATA[Grundlagen Gestaltung]]></category>
		<category><![CDATA[Informationsdesign]]></category>
		<category><![CDATA[Interaction-/Interfacedesign]]></category>
		<category><![CDATA[Interactiondesign]]></category>
		<category><![CDATA[Informationdesign]]></category>
		<category><![CDATA[Interfacedesign]]></category>
		<category><![CDATA[Screendesign]]></category>
		<guid isPermaLink="false">https://designismakingsense.de/?p=864</guid>

					<description><![CDATA[<p>Erläuterung der Bezeichnungen Screendesign, Informationdesign, Interfacedesign und Interactiondesign. Sie stehen für die formale und funktionale Gestaltung.</p>]]></description>
										<content:encoded><![CDATA[<p class="wp-block-paragraph"><span style="font-size: 1.9rem;">Auch wenn die Bezeichnungen Screendesign, Information-, Interface- und Interactiondesign denselben Gestaltungsbezug bereits im Titel tragen, bestimmen die einen mehr die formale und die anderen mehr die funktionale Gestaltung. Dabei spielt es keine Rolle, ob es sich um die Gestaltung von Hardware oder Software handelt. Es gibt kein Produkt, das nicht interaktiv ist bzw. das keine Interaktion auslöst.</span></p>
<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p style="padding-left: 30px;">„Wo die Natur aufhört, neue Formen entstehen zu lassen, beginnt der Mensch, mit den natürlichen Dingen, mit Hilfe eben dieser Natur, eine unendliche Vielfalt der Formen zu erschaffen.“<br />Leonardo da Vinci</p>
</blockquote>
<p class="wp-block-paragraph">Mit Screen- und Informationsdesign wird die Form und mit Interface- und Interactiondesign die Funktion eines Produkts beschrieben und bestimmt. Obwohl Interaktion zunächst als rein funktionaler Aspekt erscheint, der sich in der Regel als das Ausüben einer Bedienfunktionen darstellt und sich seine Repräsentation in der Darstellung eines Interfaces, einer Bedienoberfläche, ausdrückt, so ist Interface und Interaktion nicht nur Teil einer funktionalen, sondern auch Teil einer formalen Gestaltung. Interaktion in seinen Ursprüngen ist mehr und für die Gestaltung interaktiver Produkte bedeutsamer als nur eine rein funktionale Absicht.</p>
<p class="wp-block-paragraph">Bei der Gestaltung von interaktiven Produkten gibt es sechs wesentliche Aspekte, insbesondere dann, wenn Auswahlmöglichkeiten bzw. Interaktivität berücksichtigt werden. Das Grundgestaltungskonzept wird mit einem Funktionslayout, mit einem Drehbuch, mit einem Flowchart und einem Styleguide beschrieben bzw. definiert (siehe Kapitel <a href="http://basics.designismakingsense.de/schlagwort/orientierung/">›Orientierung gestalten, planen und strukturieren‹</a> und dort unter <a href="http://basics.designismakingsense.de/schlagwort/funktionslayout/">›Funktionslayout‹</a>, <a href="http://basics.designismakingsense.de/schlagwort/drehbuch/">›Drehbuch‹</a> und <a href="http://basics.designismakingsense.de/schlagwort/flowchart/">›Flowchart‹</a> und siehe die Kapitel <a href="http://basics.designismakingsense.de/schlagwort/gestaltungslayout/">›Gestaltungslayout‹</a> und <a href="http://basics.designismakingsense.de/schlagwort/styleguide/">›Styleguide‹</a>).</p>
<p class="wp-block-paragraph">Es werden dadurch die Gestaltungsabsicht und das Zusammenwirken folgender Aspekte festgelegt:</p>
<figure class="wp-block-image"><img fetchpriority="high" decoding="async" width="896" height="445" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/02-form-und-funktion.png" alt="Liste als Bild zu Form und Funktion" class="wp-image-866" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/02-form-und-funktion.png 896w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/02-form-und-funktion-600x298.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/02-form-und-funktion-768x381.png 768w" sizes="(max-width: 896px) 100vw, 896px" /></figure>
<p class="wp-block-paragraph">Screendesign (a) umschreibt die Erstellung eines Layouts unter Berücksichtigung der Erzähl- und der Interaktionsabsicht. Dies setzt ein Grundgestaltungskonzept voraus, bestehend aus Drehbuch, Funktionslayout, Flowchart und Styleguide. Nicht selten werden bei der Gestaltung interaktiver Produkte die Aspekte (a) – (d) unter dem Begriff Screendesign zusammengefasst, wobei Interfacedesign (c) und Interactiondesign (d) als reine Funktion und Technik missverstanden werden. Diese Vereinfachung führt dazu, dass die zusätzlichen Gestaltungsmöglichkeiten, die sich durch die Berücksichtigung des Interface- und Interactiondesigns als Gestaltungsaspekte ergeben können, erst gar nicht erkannt und demnach nicht genutzt werden können.</p>
<p class="wp-block-paragraph">Es ist stets ratsam, sich bei der Gestaltung interaktiver Produkte nicht nur auf die äußere Erscheinung, das Layout, zu konzentrieren, sondern auch auf dessen interaktive Repräsentanz und Inszenierung mit Hilfe einer interaktiven und somit dynamischen Struktur. Ansonsten entgehen einem interessante Gestaltungs- und Dialogmöglichkeiten.</p>
<p class="wp-block-paragraph">Das Zusammenwirken der sechs Gestaltungsaspekte (a) – (f) wirkt sich wie folgt aus:</p>
<p class="wp-block-paragraph">Ein Thema bzw. ein vorgegebener Inhalt wird zu einer Funktions-, Informations- bzw. Erzählform oder einer Wissensvermittlung strukturiert. Daraus ergeben sich ein Drehbuch, ein Flowchart und ein Funktionslayout. Das Drehbuch und das Flowchart legen die Kapitel, die Reihenfolge und die Funktionsaspekte (Interfacedesign, (c)) fest und das Funktionslayout beschreibt deren Position und Inszenierung (Interactiondesign, (d)). Ansonsten gibt das Funktionslayout zudem Anregungen bzw. Vorgaben zum Layout, zur Standbildgestaltung (Screen- und Informationdesign (a), (b)), zur Bewegtbildgestaltung (Film-/Video-/Animationdesign, (e)) und zur Musik/Tongestaltung (Ton/Musik/Sounddesign, (f)).</p>
<figure class="wp-block-image"><img decoding="async" width="1280" height="858" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/09/03-form-funktion.png" alt="Diagramm zu Form und Funktion" class="wp-image-869" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/09/03-form-funktion.png 1280w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/09/03-form-funktion-600x402.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/09/03-form-funktion-768x515.png 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/09/03-form-funktion-900x603.png 900w" sizes="(max-width: 1280px) 100vw, 1280px" /></figure>
<p class="wp-block-paragraph">Das Screendesign bildet sich einerseits aus den Gestaltungsvorgaben für Bild und Ton, andererseits aber auch unter Einbeziehung des Interface- und des Interactiondesigns. Das Screendesign stellt zusammen mit dem Interfacedesign sicher, ob eine Interaktionsmöglichkeit erkannt wird und ob alle optischen und funktionalen Aspekte und Absichten in einem gemeinsamen Zusammenhang wahrgenommen werden. Das Screendesign kann dabei sowohl eine gestalterische als auch eine informationelle Absicht verfolgen. Die Absichten von Screendesign und Informationsdesign sind bisweilen sehr ähnlich. Dennoch stellt Informationdesign eine eigene Gestaltungsform dar und differenziert sich vom Screendesign in erster Linie dadurch, dass es weniger ästhetisierende als viel mehr strukturierende, ordnende Absichten verfolgt.</p>
<p class="wp-block-paragraph">Das Interactiondesign definiert die Inszenierung und Ausführung der Interaktion und beeinflusst, wie sie empfunden wird. Das Interfacedesign ist die visuelle Repräsentation der Funktionalität, wobei die Gestaltung dieser Repräsentation vom Screen-, Information- und Interactiondesign abhängig ist. Vorausgesetzt, man ist sich des Gestaltungspotenzials von Interface- und Interactiondesign bewusst, sollte man Screendesign als geschickte Verschmelzung von Layout, Bildgestaltung, Interface- und Interactionsdesign verstehen, um die Absicht eines Produktes, die Zielgruppenansprache (siehe Kapitel ›Zielgruppenanalyse und -ansprache‹, die Inhaltsvermittlung oder die gewünschte Form der Unterhaltung zu erreichen. Um die Möglichkeiten, das Differenzieren aber auch das Zusammenwirken von Screendesign, Informationdesign, Interfacedesign und Interactiondesign näher kennen zu lernen, wurden diesen Themen jeweils ein eigenes Kapitel gewidmet.<br />Die Kapitel zeigen, dass sich die Gestaltungsaspekte (a) – (f ) gegenseitig bedingen, weshalb die Kapitel ›Form‹ und ›Funktion‹ zwar getrennt voneinander vorgestellt, beides, die Form und die Funktion, aber als untrennbare Elemente der Gestaltung betrachtet werden. Zudem ist es sinnvoll, die auditive Gestaltung gleichberechtigt mit einzubeziehen, wenn Ton, Sound oder Musik Teil des Produkts sind. Der Einsatz von Ton, Musik und/oder Sounddesign kann sehr entscheidend zur Erfüllung der Absichten und somit zum Erfolg einer Produktion beitragen.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Wahrnehmung und Farbe – Basis für Sichtbarkeit – z.B. für Online Business</title>
		<link>https://www.torstenstapelkamp.de/sichtbarkeit-marke-branding-wahrnehmung-farbe/</link>
		
		<dc:creator><![CDATA[torsten]]></dc:creator>
		<pubDate>Mon, 30 Oct 2017 12:29:51 +0000</pubDate>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[Design Basics]]></category>
		<category><![CDATA[Grundlagen Gestaltung]]></category>
		<category><![CDATA[Online Business]]></category>
		<category><![CDATA[Online Marketing]]></category>
		<category><![CDATA[Branding]]></category>
		<category><![CDATA[CIE-Farbraum]]></category>
		<category><![CDATA[CMYK]]></category>
		<category><![CDATA[Farbe]]></category>
		<category><![CDATA[Farbräume]]></category>
		<category><![CDATA[Farbraumsystem]]></category>
		<category><![CDATA[marke]]></category>
		<category><![CDATA[Marketing]]></category>
		<category><![CDATA[RGB]]></category>
		<category><![CDATA[sichtbarkeit]]></category>
		<category><![CDATA[Wahrnehmung]]></category>
		<guid isPermaLink="false">https://designismakingsense.de/?p=877</guid>

					<description><![CDATA[<p class="p1"><span class="s1">Farb-Tools für Dein Branding. Verbessere mit Farbe die Sichtbarkeit Deines Online Business bzw. Online Kurs. Erreiche mit Farbe ein einheitliches Erscheinungsbild und stärke Deine Marke.</span></p>]]></description>
										<content:encoded><![CDATA[<div style="height:43px" aria-hidden="true" class="wp-block-spacer"></div>
<p class="wp-block-paragraph">Wenn Du Wiedererkennung willst, musst Du Farbe als System denken: eine Hauptfarbe oder ein Set aus 2–3 Farbtönen, die sich durch Logo, Unterlagen, Workbooks, Video-Calls und Kurskapitel ziehen. Der Artikel kündigt eine kurze Einführung an: Grundlagen der Wahrnehmung mit Farbe, Farbspektrum, Farbbedeutung in Situationen sowie Hinweise zu Farbkontrast und Lesbarkeit. Das ist besonders hilfreich, weil Sichtbarkeit nicht nur Reichweite ist, sondern Wiedererkennung unter Konkurrenzdruck.</p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<h2 class="wp-block-heading">Farbschema als Branding-Standard</h2>
<p class="wp-block-paragraph">Definiere ein kleines Farbsystem und halte es konsequent ein. Das reduziert visuelles Rauschen und erhöht Markenabruf.</p>
<h2 class="wp-block-heading">Farbbedeutung und Kontext</h2>
<p class="wp-block-paragraph">Farbe wirkt nicht isoliert, sondern situationsabhängig. Deshalb brauchst Du Regeln: Wo nutze ich Akzent, wo Fläche, wo Signal, wo Ruhe.</p>
<h2 class="wp-block-heading">Kontrast und Lesbarkeit als Qualitätskriterium</h2>
<p class="wp-block-paragraph">Kontrast ist nicht nur „schön“, sondern funktional: Lesbarkeit, Ermüdung, Aufmerksamkeit. Der Artikel verweist dafür auch auf den Kontrast-Artikel.</p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<p class="wp-block-paragraph">Hier findest Du eine kurze Einführung in das Thema Farbe. Für Dein <strong>Corporate Design</strong>, für das Bilden einer <strong>Marke</strong> ist es wichtig, Wiedererkennbarkeit zu schaffen. Dies geht am einfachsten, indem Du Dich mit dem Thema Farbe befasst und für Dich eine Farbe bzw. eine Reihe von 2-3 Farbtönen auswählst, die Du in all Deinen Unterlagen Deines <strong>Online Business</strong> nutzt – im <strong>Logo</strong>, bei den Hintergründen Deiner Video-Calls, im Design Deiner Workbooks und wenn Du die Kapitel Deiner <strong>Online Kurse erstellen</strong> möchtest.<br />Zu Anfang gehe ich nur kurz auf Wahrnehmung-Grundlagen mit Farbe und auf das Farbspektrum ein. Dann folgt bei „Farbbedeutung“ eine kurze Information zur Bedeutung von Farbe in unterschiedlichen Situationen und dann gebe ich noch Hinweise zu Farb-Kontrast und Lesbarkeit.<br />Als erstes folgt ein Text über Dein mögliches Farbschema und damit ein direkten Bezug zum Design Deines Business bzw. Deines Brandings. Nun beschreibe ich Dir, wie Du Farben auswählst und wie Du zueinander passende Farbtöne findest.</p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<p class="has-background wp-block-paragraph" style="background-color:#f6f6f6">Wenn Du gleich <strong>mehr Sichtbarkeit</strong> erreichen und <strong>Dein profitables Online Business aufbauen</strong> möchtest&#8230; </p>
<p class="has-background wp-block-paragraph" style="background-color:#f6f6f6"><mark style="background-color:rgba(0, 0, 0, 0);color:#283583" class="has-inline-color"><strong>Hol dir den Starter-Fahrplan und erfahre</strong>:</mark></p>
<p class="has-background wp-block-paragraph" style="background-color:#f6f6f6">✓ Wie Du Deine Marktnische findest<br />✓ Wie Du ein Kurs-Thema findest, das Deine Kunden lieben<br />✓ Wie Du Deine eigenen Potenziale erkennst<br />✓ Wie Du Dein profitables Online-Kurs-Thema findest<br />✓ 5 Wege, um das Markt-Potenzial Deines Themas zu prüfen</p>
<p class="has-background wp-block-paragraph" style="background-color:#f6f6f6">Hole Dir Dein<strong> kostenloses Starter-Kit</strong> (25-seitiges PDF): <br />Design Dein Leben &amp; Business mit Online Kurse erstellen.</p>
<div style="height:27px" aria-hidden="true" class="wp-block-spacer"></div>
<div class="wp-block-buttons is-horizontal is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-7d812b4c wp-block-buttons-is-layout-flex">
<div class="wp-block-button has-custom-width wp-block-button__width-50 is-style-fill"><a class="wp-block-button__link has-background has-custom-font-size wp-element-button" href="https://www.torstenstapelkamp.de/nische-finden-online-business-aufbauen-online-kurs-erstellen/" style="background-color:#283583;font-size:22px" target="_blank" rel="noreferrer noopener"><strong>Hol Dir Dein Starter-Kit</strong></a></div>
</div>
<div style="height:36px" aria-hidden="true" class="wp-block-spacer"></div>
<figure class="wp-block-image size-large"><img decoding="async" width="900" height="470" src="https://www.torstenstapelkamp.de/wp-content/uploads/2021/12/2026-Hole-Dir-das-Starter-Kit-00-Ausschnitt-900x470.png" alt="" class="wp-image-13411" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2021/12/2026-Hole-Dir-das-Starter-Kit-00-Ausschnitt-900x470.png 900w, https://www.torstenstapelkamp.de/wp-content/uploads/2021/12/2026-Hole-Dir-das-Starter-Kit-00-Ausschnitt-600x314.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2021/12/2026-Hole-Dir-das-Starter-Kit-00-Ausschnitt-768x401.png 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2021/12/2026-Hole-Dir-das-Starter-Kit-00-Ausschnitt.png 1016w" sizes="(max-width: 900px) 100vw, 900px" /></figure>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<p class="has-background wp-block-paragraph" style="background-color:#f3f6f8">Der Austausch mit Gleichgesinnten hilft in jedem Fall.</p>
<p class="has-background wp-block-paragraph" style="background-color:#f3f6f8"><strong>Komme gerne in unsere Facebook-Gruppe</strong> <a href="https://www.facebook.com/groups/1445489612201579"><strong>Life &amp; Business Design Community</strong></a>.</p>
<p class="has-background wp-block-paragraph" style="background-color:#f3f6f8">In der Life &amp; Business Design &#8211; Facebook-Gruppe findest Du Gleichgesinnte, mit denen Du Dich in einer gesicherten Umgebung über den Aufbau Deines&nbsp;Online Business und über Online Kurse erstellen austauschen kannst.</p>
<div style="height:236px" aria-hidden="true" class="wp-block-spacer"></div>
<h2 class="wp-block-heading">„Farbschema &amp; Moodboard – Farbe als Teil des Brandings und der Marken-Bildung“</h2>
<p class="wp-block-paragraph">Zunächst ist es wichtig, dass Du klärst, wen Du mit den Produkten Deines Online Business bzw. mit dem Online Kurs erstellen erreichen möchtest. In Abhängigkeit davon kannst Du dann ein <strong>Moodboard</strong> erstellen, durch das Du darstellst, welches Image Du mit Deinem Online Business bzw. mit Deinen Produkten und Dienstleistung repräsentieren möchtest. Ob es eher modisch ist oder reduziert oder ob es bewusst bunt sein soll etc.<br />Mit dem Moodboard stellst Du auch dar, was Deine Zielgruppe ausmacht, welche Werte und Ziele sie haben. Ob es z.B. Digitale Nomaden sind, ob es Trainer für Fitness oder Berater für Finanzen sind etc.<br />Beispiele für Moodboards:</p>
<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="900" height="616" src="https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/01-Moodboards-1-900x616.jpg" alt="" class="wp-image-8096" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/01-Moodboards-1-900x616.jpg 900w, https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/01-Moodboards-1-600x410.jpg 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/01-Moodboards-1-768x525.jpg 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/01-Moodboards-1.jpg 1000w" sizes="auto, (max-width: 900px) 100vw, 900px" /></figure>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="900" height="673" src="https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/01-Moodboards-2-900x673.jpg" alt="" class="wp-image-8098" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/01-Moodboards-2-900x673.jpg 900w, https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/01-Moodboards-2-600x449.jpg 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/01-Moodboards-2-768x574.jpg 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/01-Moodboards-2.jpg 1000w" sizes="auto, (max-width: 900px) 100vw, 900px" /></figure>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<p class="wp-block-paragraph">Sobald ein Benutzerprofil und ein Moodboard erstellt wurden, hast Du die erforderlichen Anhaltspunkte, um ein geeignetes individuelles Farbschema erstellen zu können. Für ein Farbschema sollten pro Internetseite nicht mehr als 7 Farben verwendet werden (eher weniger). Die Farben sollten einer Logik folgen, so dass im Idealfall die Absicht der jeweiligen Farbe vom Anwender erkannt und behalten werden kann. Soll der Einsatz von Farbe ein Konzept repräsentieren, so dient die Farbe zum Auszeichnen von Form und Funktion. Das heißt, mit der Farbe werden Hintergrund, Schrift und Gestaltungselemente unterschieden und funktionale Zustände der Bedienelemente abgebildet. Je nach gestalterischer Absicht und Zielgruppe können die in meinem <strong><a rel="noreferrer noopener" href="https://www.torstenstapelkamp.de/kontrast-farbe-branding-marke-online-kurse-erstellen/" target="_blank">Artikel „Kontrast und Farbe für Branding, Marke und Marketing Deines Online Business“</a></strong> vorgestellten Farbkontraste und die dort gezeigten Beispiele als Anregung herangezogen werden. Die Suche nach einem geeigneten Farbschema kann mit bereits bestehenden Farbschemata ergänzt werden. Im Internet sind zahlreiche Internetseiten zu finden, auf denen man sich endlos viele Farbschemata anzeigen lassen kann. Diese kann man dort auch selbst anlegen und mit anderen Anwendern im Internet austauschen. So bilden sich unterschiedliche Toplisten, durch die man Vermutungen anstellen kann, welche Farbkombinationen für die eigene Absicht am besten geeignet ist.<br />Ist die mögliche Farbwahl eingeschränkt, weil durch Grafiken oder Bilder bereits ein bestimmtes Farbklima vorgegeben ist, so lässt sich auf Basis von Fotos über die Internetseite <strong><a rel="noreferrer noopener" href="https://www.degraeve.com/color-palette/" target="_blank">von Degraeve</a></strong> eine passende Farbpalette erstellen.</p>
<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="900" height="698" src="https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/02a-Farbschema1-900x698.jpg" alt="" class="wp-image-8110" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/02a-Farbschema1-900x698.jpg 900w, https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/02a-Farbschema1-600x465.jpg 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/02a-Farbschema1-768x595.jpg 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/02a-Farbschema1.jpg 1424w" sizes="auto, (max-width: 900px) 100vw, 900px" /></figure>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<p class="wp-block-paragraph">Mit <strong><a href="https://www.colorhexa.com" target="_blank" rel="noreferrer noopener">ColorHex</a></strong> lässt sich eine Palette von 3-4 zueinander passenden Farben aus einer einzigen Basisfarbe erstellen. Die Farben der Palette harmonisieren z. B. in der Kombination von Text, Hintergrund, Links und Rahmen.</p>
<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="745" height="1024" src="https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/02-ColorHex-screencapture-colorhexa-745x1024.png" alt="" class="wp-image-8107" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/02-ColorHex-screencapture-colorhexa-745x1024.png 745w, https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/02-ColorHex-screencapture-colorhexa-600x825.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/02-ColorHex-screencapture-colorhexa-768x1056.png 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/02-ColorHex-screencapture-colorhexa.png 1000w" sizes="auto, (max-width: 745px) 100vw, 745px" /></figure>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<p class="wp-block-paragraph">Mit <strong><a rel="noreferrer noopener" href="https://labs.tineye.com/multicolr" target="_blank">Colorblender von TinEye</a></strong> lassen sich Bilder gezielt nach bestimmten Farben bzw. Farbkombinationen bei Flickr.com finden. Es können bis zu zehn Farben angewählt werden.</p>
<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="900" height="688" src="https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/02a-Farbschema2-900x688.jpg" alt="" class="wp-image-8111" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/02a-Farbschema2-900x688.jpg 900w, https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/02a-Farbschema2-600x459.jpg 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/02a-Farbschema2-768x587.jpg 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/02a-Farbschema2.jpg 1424w" sizes="auto, (max-width: 900px) 100vw, 900px" /></figure>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<p class="wp-block-paragraph">Mit dem <strong><a rel="noreferrer noopener" href="https://color.adobe.com/de/create/color-wheel" target="_blank">Adobe Color Wheel</a></strong> lässt sich online eine Palette von 5 zueinander passenden Farben erstellen – Auf Basis vieler Kriterien. Die Farben der Palette harmonisieren dann z. B. in der Kombination von Text, Hintergrund, Links und Rahmen bzw. Du erstellst eine harmonische Farb-Schema für Deine Marke bzw. Branding, damit Dein Online Business bzw. Dein Online Kurs ein homogenes, aber auch auffallendes Erscheinungsbild erhält.</p>
<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="900" height="614" src="https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/02-Farbschema-Adobe-kl-1-900x614.jpg" alt="" class="wp-image-8117" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/02-Farbschema-Adobe-kl-1-900x614.jpg 900w, https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/02-Farbschema-Adobe-kl-1-600x409.jpg 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/02-Farbschema-Adobe-kl-1-768x524.jpg 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/02-Farbschema-Adobe-kl-1.jpg 1288w" sizes="auto, (max-width: 900px) 100vw, 900px" /></figure>
<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="900" height="620" src="https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/02-Farbschema-Adobe-kl-900x620.jpg" alt="" class="wp-image-8114" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/02-Farbschema-Adobe-kl-900x620.jpg 900w, https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/02-Farbschema-Adobe-kl-600x413.jpg 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/02-Farbschema-Adobe-kl-768x529.jpg 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/02-Farbschema-Adobe-kl.jpg 1297w" sizes="auto, (max-width: 900px) 100vw, 900px" /></figure>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<p class="wp-block-paragraph">Eine konkrete Fortsetzung – insbesondere hinsichtlich das Thema Online Kurse erstellen für Dein Online Business – findest Du in meinem <strong><a rel="noreferrer noopener" href="https://www.torstenstapelkamp.de/kontrast-farbe-branding-marke-online-kurse-erstellen/" target="_blank">Artikel „Kontrast und Farbe für Branding, Marke und Marketing Deines Online Business“</a></strong>.</p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<h2 class="wp-block-heading">Farbtöne des Spektrums</h2>
<p class="wp-block-paragraph">Sinneszellen, die auch Zapfen genannt werden, ermöglichen es, auf der Netzhaut des Auges Farbunterscheidungen zu treffen. Das menschliche Auge kann von den einfallenden Lichtstrahlen Farben im Wellenlängenbereich zwischen etwa 760 nm (rot) und 380 nm (blau) wahrnehmen und dadurch ca. 7 Millionen Farbvarianten und 200 Farbtöne unterscheiden. Drei verschiedene Sehsubstanzen der Zapfen ermöglichen die Unterscheidung der Grundfarben Rot, Grün und Blau. Deren Wahrnehmung und Mischung erfolgt auf Grund der Sinnesreize, die an das Gehirn weitergeleitet und erst dort in sämtliche Farbtöne des Spektrums interpretiert werden. Mit den so genannten Stäbchen erfolgt das Schwarz-Weiss-Sehen.</p>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="843" height="365" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/1lichtwellenspektrum.png" alt="Bild eines Llichtwellenspektrums für den Artikel Wahrnehmung und Farbe." class="wp-image-878" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/1lichtwellenspektrum.png 843w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/1lichtwellenspektrum-600x260.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/1lichtwellenspektrum-768x333.png 768w" sizes="auto, (max-width: 843px) 100vw, 843px" /></figure>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<p class="wp-block-paragraph"><span class="smaller">Der vom menschlichen Auge sichtbare Bereich im gesamten Lichtwellenspektrum. Die Farbe Magenta ist nicht hier, aber im Farbkreis zu sehen, da sie sich erst durch Über- lagerung von Rot und Violett ergibt. Die Spektralfarben ergeben sich, wenn man Sonnenlicht durch ein Prisma schickt. Sir Isaac Newton (1642–1727) beschrieb als erster diesen Vorgang und wandte die daraus resul- tierenden Farben auch als Erster für die Erstellung eines Farbkreises an.</span></p>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="640" height="640" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/2farbkreis.jpg" alt="Bild eines Farbkreises für den Artikel Wahrnehmung und Farbe." class="wp-image-879" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/2farbkreis.jpg 640w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/2farbkreis-300x300.jpg 300w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/2farbkreis-600x600.jpg 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/2farbkreis-140x140.jpg 140w" sizes="auto, (max-width: 640px) 100vw, 640px" /></figure>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<p class="wp-block-paragraph"><span class="smaller">Der symmetrische Farbkreis basiert auf physikalischer Logik und ergibt sich aus dem Band der Spektralfarben, wobei die Enden vom roten und vom violetten Rand des Farbspektrums überlagert werden, um Magenta zu erhalten.&nbsp;</span><span class="smaller">&nbsp;</span></p>
<p class="wp-block-paragraph">Der Farbkreis nach Harald Küppers weicht vom symmetrischen Farbkreis ab, indem er die Nachbilder der Farbenpaare Rot und Türkis, Gelb und Violett, Magenta und Grün als jeweilige Komplementärfarbenpaare berücksichtigt. Beim symmetrischen Farbkreis ist die Komplementärfarbe von Rot die Farbe Cyan, von Gelb ist es Blau und von Orange ist es eine Sekundärfarbe, die zwischen Cyan und Blau liegt.</p>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="625" height="628" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/3farbkreis-harald-kueppers.png" alt="Bild eines Komplementär Farbkreises für den Artikel Wahrnehmung und Farbe." class="wp-image-880" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/3farbkreis-harald-kueppers.png 625w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/3farbkreis-harald-kueppers-300x300.png 300w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/3farbkreis-harald-kueppers-600x603.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/3farbkreis-harald-kueppers-140x140.png 140w" sizes="auto, (max-width: 625px) 100vw, 625px" /></figure>
<p class="wp-block-paragraph"><span class="smaller">Farbkreis nach Harald Küppers</span></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<p class="wp-block-paragraph">Da der symmetrische Farbkreis nur auf physikalischer Logik basiert, der Farbkreis nach Harald Küppers allerdings die optischen Phänomene des menschlichen Auges bzw. der Wahrnehmung und Interpretation des Gehirns in Form der Nachbilder berücksichtigt, ist der Farbkreis nach Harald Küppers als Vorgabe bzw. als Hilfestellung zur Farbwahl für gestalterische Entscheidungen besser geeignet. Informationen zu Harald Küppers’ Farbenlehre findet man unter: Küppers Farbenlehre</p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<h2 class="wp-block-heading">Additive Farbmischung</h2>
<p class="wp-block-paragraph">Mit einer additiven Farbmischung ist das Mischen von farbigem Licht gemeint, das entweder durch Reflexion oder mittels direkter Bestrahlung zum Auge gelangt. Eine additive Farbmischung ergibt sich über Reflexion, indem Licht z. B. über farbige Druckerzeugnisse abgelenkt ins Auge des Betrachters leuchtet und die Farbpunkte des farbigen Druckrasters als additive Farbmischung neue Farbwahrnehmungen entstehen lassen. Am besten ist dies bei Plakaten zu erkennen, da deren Raster sehr grob ist. Sobald man sich ihnen nähert, sind selbst mit bloßem Auge die einzelnen Bildpunkte zu erkennen, die sich erst bei entsprechender Distanz zur Mischfarbe addieren. Interessant ist, dass die einzelnen Bildpunkte eines solchen Plakates nach subtraktiver Farbmischung gemischt sind. Das optische farbliche Zusammenwirken dieser einzelnen Punkte erfolgt allerdings nach der additiven Farbmischung. Eine Farbfläche, deren Farbe sich z. B. aus der subtraktiven Farbmischung von Blau und Gelb zu einem satten Grün ergab, wird in Kombination mit gelben Punkten in additiver Farbmischung optisch als eine hellgrüne Fläche wahrgenommen.<br />Eine direkte Bestrahlung von Licht ins Auge des Betrachters erfolgt bei selbstleuchtenden Medien, wie z. B. durch Projektoren, Fernseher, Computerröhrenmonitore, Flach-bildschirme oder Displays von mobilen Endgeräten (Mobiltelefon, PDA, etc.). Die additive Farbmischung kann sowohl außerhalb als auch erst im Auge stattfinden, wenn z. B. unterschiedliche Farbbereiche so eng beieinander liegen, dass sie auf Grund von Distanz oder der geringen Größe vom bloßen Auge nicht mehr differenziert werden können und daher direkt als Mischung dieser Farbbereiche wahrgenommen werden.<br />Die Grundfarben der additiven Farbmischung sind die RGB-Farben Rot, Grün und Blau. Sie werden auch Lichtfarben genannt. Bei einem Röhrenmonitor bzw. bei Flachbildschirmen oder anderen selbstleuchtenden Medien erfolgt die Farbmischung ausschließlich additiv. Es stehen dabei tatsächlich nur die drei Farben Rot, Grün und Blau zur Verfügung, aus denen durch Addition alle weiteren Farben gebildet werden, indem sie sich optisch vermischen, sobald das Auge die einzelnen Punkte nicht mehr auflösen kann. Dies setzt natürlich voraus, dass die einzelnen Farbpunkte entsprechend klein sind. Drei Farbpunkte (Rot, Grün, Blau) bilden einen Bildpunkt. Je nach Mischverhältnis bzw. Anzahl der jeweils leuchtenden Bildpunkte kann so z. B. aus roten und grünen Farbpunkten Gelb oder Orange wahrgenommen werden. Und aus der Mischung von blauen und grünen Farbpunkten kann sich Türkis ergeben. Weiß bildet sich aus der optischen Vermischung der drei Farbpunkte Rot, Grün und Blau.<br />Wenn man sich einem Röhrenmonitor oder einem Flachbildschirm mit einer Lupe nähert, werden die drei einzelnen Farbpunkte Rot, Grün und Blau sichtbar.</p>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="567" height="504" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/4raster-roehrenmonitor.png" alt="Bild des RGB-Farb-Rasters Eines Raster-Roehrenmonitors für den Artikel Wahrnehmung und Farbe." class="wp-image-881"/></figure>
<p class="wp-block-paragraph"><span class="smaller">Rasterung bei einem Röhrenmonitor für Computer &#8211; allerdings auch bei LED-Monitoren.</span></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="704" height="1294" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/08/Raster-für-TFT-und-LCD-Monitore_.jpg" alt="Bild über Raster von LCD-Monitore für den Artikel Wahrnehmung und Farbe." class="wp-image-895" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/08/Raster-für-TFT-und-LCD-Monitore_.jpg 704w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/08/Raster-für-TFT-und-LCD-Monitore_-490x900.jpg 490w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/08/Raster-für-TFT-und-LCD-Monitore_-557x1024.jpg 557w" sizes="auto, (max-width: 704px) 100vw, 704px" /></figure>
<p class="wp-block-paragraph"><span class="smaller">Bei LED-Monitore sind die 3 Farben pro Pixel oft im Dreieck angeordnet.</span></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="412" height="169" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/5rgb.png" alt="Bild der RGB-Buchstaben für den Artikel Wahrnehmung und Farbe." class="wp-image-882"/></figure>
<p class="wp-block-paragraph"><span class="smaller">Die Grundfarben der additiven Farbmischung sind die RGB-Farben Rot, Grün und Blau. Sie werden auch Lichtfarben genannt.</span></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="411" height="409" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/6lichtfarben.png" alt="Bild der Lichtfarben für den Artikel Wahrnehmung und Farbe." class="wp-image-883" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/6lichtfarben.png 411w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/6lichtfarben-300x300.png 300w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/6lichtfarben-140x140.png 140w" sizes="auto, (max-width: 411px) 100vw, 411px" /></figure>
<p class="wp-block-paragraph"><span class="smaller">Werden die Grundfarben der additiven Farbmischung (Rot, Grün, Blau) in identischer Farbintensität als Licht übereinander projiziert, ergeben diese drei Farben in ihrer Vermischung Weiß. Aus den übereinander projizierten Farben Blau und Rot bildet sich Purpur (Magenta), aus Blau und Grün Türkis (Cyan) und aus Rot und Grün ergibt sich Gelb.</span></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="566" height="502" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/7raster-vierfarbendruck.png" alt="Bild des Raster-Vierfarbendrucks für den Artikel Wahrnehmung und Farbe." class="wp-image-884"/></figure>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<p class="wp-block-paragraph"><span class="smaller">Punktrasterung eines Vierfarbendrucks. Eine additive Farbmischung erfolgt in der Regel durch selbstleuchtende Medien wie z. B. Displays oder Monitore, aber auch durch Lichtprojektion, die sich durch Reflexion ergeben kann. Es können z. B. die farbigen Rasterpunkte eines Druckerzeugnisses durch Reflexion ins Auge projiziert werden und sich dort additiv zu neuen Farbwahrnehmungen vermischen bzw. sie werden vom Gehirn entsprechend interpretiert. Die für den Druck aufbereiteten Farben wurden allerdings nach der subtraktiven Farbmischung gemischt.</span></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="2120" height="674" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/08/Raster-für-TFT-LCD-und-Röhren-Monuitore.jpg" alt="Bild über Raster von TFT- LCD- und Röhren-Monitore für den Artikel Wahrnehmung und Farbe." class="wp-image-892" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/08/Raster-für-TFT-LCD-und-Röhren-Monuitore.jpg 2120w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/08/Raster-für-TFT-LCD-und-Röhren-Monuitore-600x191.jpg 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/08/Raster-für-TFT-LCD-und-Röhren-Monuitore-768x244.jpg 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/08/Raster-für-TFT-LCD-und-Röhren-Monuitore-900x286.jpg 900w" sizes="auto, (max-width: 2120px) 100vw, 2120px" /></figure>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<p class="wp-block-paragraph"><span class="smaller">Je nachdem, welche der drei Farbpunkte innerhalb des Farbtripels (RGB) leuchten, ergibt sich ein so genannter Pixel-Farbpunkt, der vom Betrachter als entsprechende additive Farbmischung&nbsp;wahrgenommen wird. Wenn z. B. alle drei Farben (Rot, Grün, Blau) gemeinsam leuchten, ergibt sich Weiß, wenn Rot und Grün leuchten, ergibt sich Gelb, wenn Grün und Blau leuchten, ergibt sich Cyan und wenn keine der drei Farben innerhalb des Farbtripels leuchten, ergibt sich Schwarz. Bei Röhrenmonitoren mit Lochmaske sind die Farbtripel im Dreieck angeordnet und bei Röhrenmonitoren mit Streifenmaske horizontal, also nebeneinander. Röhrenmonitoren finden aber kaum mehr Anwendung. Zum Glück gibt es seit langem hochauflösende LCD-, LED- und OLED-Monitore. Bei diesen sind die 3 Farben pro Pixel aber ähnlich angeordnet.</span></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<h2 class="wp-block-heading">Subtraktive Farbmischung</h2>
<p class="wp-block-paragraph">Eine subtraktive Farbmischung ergibt sich aus dem Vermischen von Farbstoffen, wie z. B. Farbpulver bzw. flüssigen Farben, oder aus dem Überlagern von Farbfiltern, die im Bereich der Überlagerung dann nur entsprechende Wellenlängen bzw. entsprechend farblich gemischtes Licht passieren lassen.<br />Die Grundfarben der subtraktiven Farbmischung sind die CMY­Farben Türkis (Cyan), Purpur (Magenta) und Gelb (Yellow), die auch Körper­farben genannt werden. Bei Druckerzeugnissen kommt noch die Farbe Schwarz (blacK) dazu, da die CMY-Farben beim überlagerten Drucken kein tiefes Schwarz ergeben. Man spricht dann vom CMYK­Modell.</p>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="549" height="173" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/8cmyk.png" alt="Bild der CMYK-Buchstaben für den Artikel Wahrnehmung und Farbe." class="wp-image-885"/></figure>
<p class="wp-block-paragraph"><span class="smaller">Die Grundfarben der subtraktiven Farbmischung sind die CMY-Farben Türkis (Cyan), Purpur (Magenta) und Gelb (Yellow). Zusammen mit Schwarz (blacK) ergibt sich das CMYK-Modell.</span></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="615" height="613" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/9grundfarben.png" alt="Bild der Grundfarben im Druck für den Artikel Wahrnehmung und Farbe." class="wp-image-886" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/9grundfarben.png 615w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/9grundfarben-300x300.png 300w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/9grundfarben-600x598.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/9grundfarben-140x140.png 140w" sizes="auto, (max-width: 615px) 100vw, 615px" /></figure>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<p class="wp-block-paragraph"><span class="smaller">Werden die Grundfarben der subtraktiven Farbmischung mit identischer Farbintensität als Farbfilter übereinander gelegt, kann in der Schnittmenge kein Licht mehr passieren und es ergibt sich in der Überlagerungsfläche dieser Farbfilter Dunkelheit bzw. Schwarz. Aus den übereinander gelegten Farbfiltern Türkis (Cyan) und Gelb (Yellow) bildet sich Grün, aus Blau und Purpur (Magenta) ergibt sich Violett und aus Purpur (Magenta) und Gelb (Yellow) ergibt sich Orange. Dieselben Mischfarben würden sich durch Vermischen von entsprechenden Farb- pulvern bzw. flüssigen Farben ergeben.</span></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<h2 class="wp-block-heading">Farbraumsysteme</h2>
<p class="wp-block-paragraph">Um Farben genau bestimmen und miteinander vergleichen und abgleichen zu können, wurden Farbsysteme definiert. Am Computer werden Farben mit RGB- (Rot, Grün, Blau) bzw. HSV-Werten bestimmt (Hue (Farbwert), Saturation (Sättigung), Value (Helligkeitswert)).<br />Mit dem Farbwert wird die Variation eines Farbtons des Farbkreises bestimmt (siehe ›Farbkreis nach Harald Küppers‹) und die Prozentzahl der Sättigung einer Farbe variiert je nach Grad des Buntanteils einer Farbe. Die Sättigung der Farben im Farbkreis betragen jeweils 100 %. Der Hellig­keitswert liegt entweder an der Farbe selbst – das Gelb im Farbkreis ist z. B. heller als das Blau – oder er kann durch Zugabe von Weiß erhöht oder durch Zugabe von Schwarz gesenkt werden.</p>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="752" height="736" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/10cie-farbsystem.png" alt="Bild des CIE Farbsystems für den Artikel Wahrnehmung und Farbe." class="wp-image-887" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/10cie-farbsystem.png 752w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/10cie-farbsystem-600x587.png 600w" sizes="auto, (max-width: 752px) 100vw, 752px" /></figure>
<p class="wp-block-paragraph"><span class="smaller">CIE-Farbsystem.</span></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<p class="wp-block-paragraph">Mit dem CIE-Farbsystem (Normfarbtafel der Commission Internationale de l’Eclairage; <a title="www.cie.co.at" href="http://www.cie.co.at">www.cie.co.at</a>) werden seit 1931 die jeweiligen Farbanteile der Grundfarben Rot, Grün, Blau des RGB-Farbsystems zum Zwecke der Normierung in drei Normfarbwerten ablesbar dargestellt. Mit x und y wird eine Farbebene aufgespannt, deren Koordinaten einen Farbton definieren. Der Wert Y beschreibt den Helligkeitswert, der in der dritten Dimension dargestellt wird. Deshalb wird ein solches Farbmodel auch Farbraum genannt. 1976 wurde von CIE eine neue Metrik mit der Bezeichnung CIELab für nicht selbstleuchtende Objekte empfohlen (L = Helligkeit, a = Rot- Grün-Farbinformation, b = Gelb-Blau-Information). Gemeint sind damit Körperfarben, z. B. CMY-Farben von Druckerzeugnissen. Mit dem CIELuv- Farbsystem (L = Helligkeit, u = Rot-Grün-Farbinformation, v = Gelb-Blau- Information) werden die Farben von selbstleuchtenden Objekten beschrieben, z. B. von Computer-Monitoren bzw. Fernsehern. Im Gegensatz zum CIE-Farbraum, der in der zweidimensionalen Ansicht einer Schuhsohle nicht unähnlich ist, sind die CIELab- und CIELuv-Farbräume als Kugeln dargestellt, damit im Gegensatz zur Darstellung des CIE-Farbsystems gleiche Abstände im Farbraum auch als solche wahrgenommen werden können. CIELab und CIELuv unterscheiden sich nur darin, dass beim CIELuv-Farbsystem der Grünbereich verkleinert und der Blaubereich vergrößert ist. Der CIE-Farbraum beinhaltet alle Farben, die mit dem menschlichen Auge sichtbar sind. Der eigentlich dreidimensionale Farbraum ist hier in der Abbildung als zweidimensionaler Schnitt dargestellt. Aus den beiden abgebildeten Farbanteilen kann der dritte ermitteln werden. So ergeben z. B. die drei Farbanteile Rot, Grün, Blau in der Summe stets den Wert 1. Daher genügen zwei Zahlenwerte zur Beschreibung von Farbton und Sättigung. Der Farbraum der Körperfarben (CMY) ist kleiner, als der der Lichtfarben (RGB), deckt aber auch Farbbereiche ab, die über den Farbraum der Lichtfarben hinausgeht. Mit dem CMYK-Modell lassen sich also Farben abbilden, die mit dem RGB-Modell nicht darstellbar sind. Somit gibt es bestimmte Farben, die sich drucken, aber nicht über einen Monitor darstellen lassen. Ansonsten ist noch festzustellen, dass Lichtfarben im Gegensatz zu Körperfarben eine höhere Intensität haben.</p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<h2 class="wp-block-heading">Farbbedeutung</h2>
<p class="wp-block-paragraph">Je nach kultureller Herkunft werden Farben unterschiedlich interpretiert. Dies ist insbesondere bei Produkten zu berücksichtigen, die international vertrieben bzw. betrieben werden, wie z. B. die Dienstleistung eines Online Business oder wenn Du einen Online Kurs erstellen möchtest, der international auf Englisch oder mehrsprachig angeboten wird. Aber selbst wenn ein Produkt nur regionale Verbreitung findet, sollte darüber nachgedacht werden, kulturelle Missverständnisse zu vermeiden. </p>
<p class="wp-block-paragraph">Es geht aber nicht nur um die Vermeidung von Missverständnissen, sondern auch um die Beachtung von Wertigkeiten. In klimatisch gemäßigten Breiten gilt z. B. die Farbe Grün eher als eine alltägliche Farbe. Dass sie in klimatisch heißeren Regionen als Seltenheit oder gar als existenzielles Symbol des Wohlstandes und der Fruchtbarkeit gesehen werden kann, erscheint plausibel. Dies zeigt aber auch, dass eine Farbe bereits innerhalb eines Landes bzw. innerhalb desselben kulturellen Gebiets in seiner Bedeutung unterschiedlich gesehen werden kann, sofern dort unterschiedliche Klimazonen auftreten. </p>
<p class="wp-block-paragraph">Auch ungeachtet der kulturellen und klimatischen Unterschiede ist die Bedeutung einer Farbe nicht immer gleich. Das Grün eines unreifen Pfirsichs wird schließlich anders interpretiert als das Grün eines Parks im sommerlichen Licht. Es ist eben nicht nur die Farbe an sich zu berücksichtigen, sondern auch der Kontext, in dem sie eingesetzt oder wahrgenommen wird.</p>
<p class="wp-block-paragraph">Farben lösen Emotionen aus und werden auch dazu genutzt, Emotionen zu symbolisieren,<br />sei es als Farbe in einem Bild oder als Wort in einem Satz.</p>
<ul class="wp-block-list">
<li>Grün hinter den Ohren</li>
<li>Ins Blaue fahren</li>
<li>blauäugig</li>
<li>Gelb vor Neid</li>
<li>Rot sehen</li>
<li>Weiße Weste</li>
<li>Grauer Alltag</li>
<li>Schwarz ärgern</li>
</ul>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="636" height="1024" src="https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/03-Farbe-1-kl-636x1024.jpg" alt="" class="wp-image-8100" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/03-Farbe-1-kl-636x1024.jpg 636w, https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/03-Farbe-1-kl-559x900.jpg 559w, https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/03-Farbe-1-kl.jpg 700w" sizes="auto, (max-width: 636px) 100vw, 636px" /></figure>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<h2 class="wp-block-heading">Farb-Kontrast und Lesbarkeit – Text und Hintergrund</h2>
<p class="wp-block-paragraph">Texte haben je nach eigener Farbe und der Farbe des Hintergrunds, auf dem sie stehen, unterschiedliche Farbwirkungen oder sind auf Grund des Zusammenwirkens der beiden Farbelemente gut oder schlecht lesbar. In diesem Zusammenhang wirken die Farbkontraste, die in diesem Kapitel bereits beschrieben wurden. Zudem kann die Wirkung eines Textes entscheidend von den verwendeten Farben abhängen. </p>
<p class="wp-block-paragraph">So wird ein roter Text auf weißem Grund eher als Werbung und nicht als relevante Information wahrgenommen. Schwarzer Text auf weißem Grund wird noch am seriösesten angenommen und ist sowohl nah als auch fern gut lesbar. Für die Darstellung auf einem selbstleuchtenden Medium, wie z. B. einem Computermonitor, sollte ein hell strahlender, weißer Hintergrund zu Gunsten eines hellen, gedämpften Farbtons vermieden werden. Nimmt der Helligkeitskontrast ab, so wird die Schrift allerdings unleserlicher. Hier gilt es, Farbe und Kontrast sensibel zu wählen. Zum Testen, ob die Kontraste von Schrift und Hintergrund nach W3C-Anforderung hinreichend sind, ist folgende Internetseite zu empfehlen: <a rel="noreferrer noopener" href="http://snook.ca/technical/colour_contrast/colour.html" target="_blank">http://snook.ca/technical/colour_contrast/colour.html</a></p>
<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="900" height="1016" src="https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/03-Farbe-2-900x1016.png" alt="" class="wp-image-8102" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/03-Farbe-2-900x1016.png 900w, https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/03-Farbe-2-600x678.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/03-Farbe-2-768x867.png 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/03-Farbe-2-1360x1536.png 1360w, https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/03-Farbe-2-1813x2048.png 1813w, https://www.torstenstapelkamp.de/wp-content/uploads/2021/07/03-Farbe-2.png 1909w" sizes="auto, (max-width: 900px) 100vw, 900px" /></figure>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<h2 class="wp-block-heading">Regeln und Tipps zum Gebrauch von Farbe beim  Interfacedesign und z.B. für Online Kurse erstellen als Online Business</h2>
<ol class="wp-block-list">
<li>Farben sollten besonnen und wenn möglich sparsam eingesetzt werden. Buntheit könnte die Farbwahl beliebig erscheinen lassen. Mit dem Farbklima zweier Grundfarben lassen sich Produkt- oder Dienstleistungseigenschaften und die Orientierung innerhalb eines interaktiven Systems ausreichend darstellen. Die Farben sollten aufeinander abgestimmt sein und es sollten nicht mehr als 4 Grundfarben verwendet werden.</li>
<li>Ein kontrastreicher Einsatz von Farben sichert eine konturenscharfe Darstellung und z. B. eine gute Lesbarkeit.</li>
<li>Die Vordergrundfarbe sollte sich ausreichend vom Hintergrund abheben.</li>
<li>Nimmt der Helligkeitskontrast ab, wird die Schrift unleserlicher.</li>
<li>Ein Hell-Dunkel-Kontrast ermöglicht insbesondere für Sehschwache eine gute Lesbarkeit von Schrift, Bild und Funktion.</li>
<li>Je farbiger ein Text, umso unleserlicher wird er.</li>
<li>Text sollte nicht mit Blau dargestellt werden. Da Blau ein relativ kurzwelliges Licht ist und Licht unschärfer gesehen wird, je kurzwelliger es ist, wirkt Blau unschärfer als andere Farben (siehe ›Farbspektrum‹).</li>
<li>Um das ›Flimmern‹ von Farben zu vermeiden, sollten RGB-Primärfarben nicht gemeinsam z. B. bei Text- und Hintergrundkombinationen verwendet werden, da deren Wellenlängen so nah beieinander liegen, dass sie im Auge als farbliches Flimmern wahrgenommen werden.</li>
<li>Rot und Grün sollte nicht parallel verwendet werden, da immerhin, je nach Region, 4 – 9 % der Bevölkerung Rot-Grün-farbenfehlsichtig sind (Nordamerika: 8 %; Europa: 8,76 %; Osteuropa: 9,31 %; Asien: 6 %; Afrika: 4 %)</li>
<li>Gelbfarbtonabstufungen sollten nicht gleichzeitig und nebeneinander verwendet werden, wenn die Differenzierbarkeit dieser Farbtonabstufungen zwingend gewährleistet sein muss. Dasselbe gilt für Blaufarbtonabstufungen. Mit zunehmendem Alter vergilbt die Augenlinse, weshalb sich gelbe aber auch blaue Farbtonabstufungen dann nicht mehr so gut differenzieren lassen.</li>
<li>Für Informationen, die über einen Computermonitor oder mittels Displays betrachtet werden, sollten die Farben stets kräftig und kontrastreich sein, insbesondere beim Einsatz unter freiem Himmel z. B. bei Verkehrsleitsystemen oder bei Displays öffentlicher Verkehrsmittel, da nie ausgeschlossen werden kann, dass störendes Umgebungslicht die Kontraststärke beeinträchtigt.</li>
<li>Je nach Darstellungsmedium und Intension sollte bedacht werden, ob die Farben auch für einen Schwarz-Weiss-Ausdruck optimiert sein sollten.</li>
<li>Farbstandards, kulturell oder geografisch bedingte Definitionen und verschiedene Bedeutungsinterpretationen bestimmter Farben sollten beachtet und respektiert werden.</li>
<li>Wurde eine Farbe mit einer Bedeutung oder Funktion belegt, so sollte diese Farbe innerhalb einer Produktion bzw. innerhalb eines Produktes auch nur noch zum Zwecke dieser Bedeutung oder Funktion einheitlich genutzt werden. Doppelbelegungen müssen zwar vermieden werden, aber dennoch kann mit Abstufungen einer Farbe gearbeitet werden.</li>
<li>Unterschiede können durch klar unterscheidbare Farben entsprechend betont werden.</li>
<li>Es ist zu beachten, dass Farben sowohl die Aussage als auch die Funktion eines Produkts unterstützen können. Es können Zustände an sich, Zustandsübergänge und Unterscheidungen von Zuständen mittels Farbe visualisiert und verdeutlicht werden.</li>
<li>Im Sinne von Leiten und Informieren kann mit und durch Farbe die Aufmerksamkeit auf bestimmte Inhalte oder Funktionen gelenkt und fokussiert werden und/ oder es können Sach- bzw. Bezugszusammenhänge visualisiert werden. Durch Farbe kann fokussierend, differenzierend und verbindend visualisiert werden.</li>
</ol>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<p class="wp-block-paragraph">Die Fortsetzung – insbesondere hinsichtlich der Themen <strong>Online Business</strong> und <strong>Online Kurse erstellen</strong> für Dein <strong>Online Business</strong> – findest Du in meinem <strong><a rel="noreferrer noopener" href="https://www.torstenstapelkamp.de/kontrast-farbe-branding-marke-online-kurse-erstellen/" target="_blank">Artikel „Kontrast und Farbe für Branding, Marke und Marketing Deines Online Business“</a></strong>.</p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<p class="has-background wp-block-paragraph" style="background-color:#f6f6f6">Wenn Du gleich <strong>mehr Sichtbarkeit</strong> erreichen und <strong>Dein profitables Online Business aufbauen</strong> möchtest&#8230; </p>
<p class="has-background wp-block-paragraph" style="background-color:#f6f6f6"><mark style="background-color:rgba(0, 0, 0, 0);color:#283583" class="has-inline-color"><strong>Hol dir den Starter-Fahrplan und erfahre</strong>:</mark></p>
<p class="has-background wp-block-paragraph" style="background-color:#f6f6f6">✓ Wie Du Deine Marktnische findest<br />✓ Wie Du ein Kurs-Thema findest, das Deine Kunden lieben<br />✓ Wie Du Deine eigenen Potenziale erkennst<br />✓ Wie Du Dein profitables Online-Kurs-Thema findest<br />✓ 5 Wege, um das Markt-Potenzial Deines Themas zu prüfen</p>
<p class="has-background wp-block-paragraph" style="background-color:#f6f6f6">Hole Dir Dein<strong> kostenloses Starter-Kit</strong> (25-seitiges PDF): <br />Design Dein Leben &amp; Business mit Online Kurse erstellen.</p>
<div style="height:27px" aria-hidden="true" class="wp-block-spacer"></div>
<div class="wp-block-buttons is-horizontal is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-7d812b4c wp-block-buttons-is-layout-flex">
<div class="wp-block-button has-custom-width wp-block-button__width-50 is-style-fill"><a class="wp-block-button__link has-background has-custom-font-size wp-element-button" href="https://www.torstenstapelkamp.de/nische-finden-online-business-aufbauen-online-kurs-erstellen/" style="background-color:#283583;font-size:22px" target="_blank" rel="noreferrer noopener"><strong>Hol Dir Dein Starter-Kit</strong></a></div>
</div>
<div style="height:36px" aria-hidden="true" class="wp-block-spacer"></div>
<figure class="wp-block-image size-large"><img decoding="async" width="900" height="470" src="https://www.torstenstapelkamp.de/wp-content/uploads/2021/12/2026-Hole-Dir-das-Starter-Kit-00-Ausschnitt-900x470.png" alt="" class="wp-image-13411" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2021/12/2026-Hole-Dir-das-Starter-Kit-00-Ausschnitt-900x470.png 900w, https://www.torstenstapelkamp.de/wp-content/uploads/2021/12/2026-Hole-Dir-das-Starter-Kit-00-Ausschnitt-600x314.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2021/12/2026-Hole-Dir-das-Starter-Kit-00-Ausschnitt-768x401.png 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2021/12/2026-Hole-Dir-das-Starter-Kit-00-Ausschnitt.png 1016w" sizes="(max-width: 900px) 100vw, 900px" /></figure>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<p class="has-background wp-block-paragraph" style="background-color:#f3f6f8">Der Austausch mit Gleichgesinnten hilft in jedem Fall.</p>
<p class="has-background wp-block-paragraph" style="background-color:#f3f6f8"><strong>Komme gerne in unsere Facebook-Gruppe</strong> <a href="https://www.facebook.com/groups/1445489612201579"><strong>Life &amp; Business Design Community</strong></a>.</p>
<p class="has-background wp-block-paragraph" style="background-color:#f3f6f8">In der Life &amp; Business Design &#8211; Facebook-Gruppe findest Du Gleichgesinnte, mit denen Du Dich in einer gesicherten Umgebung über den Aufbau Deines&nbsp;Online Business und über Online Kurse erstellen austauschen kannst.</p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<h2 class="wp-block-heading">Warum reichen 2–3 Farben oft aus?</h2>
<p class="wp-block-paragraph">Weil Konsistenz wichtiger ist als Vielfalt für Wiedererkennung.</p>
<h2 class="wp-block-heading">Wo sollten Markenfarben sichtbar sein?</h2>
<p class="wp-block-paragraph">Logo, Unterlagen, Workbooks, Hintergründe, Kursmaterial.</p>
<h2 class="wp-block-heading">Was ist der häufigste Fehler?</h2>
<p class="wp-block-paragraph">Zu viele Stile und Farblogiken, dadurch keine klare Marke.</p>
<h2 class="wp-block-heading">Warum ist Kontrast wichtig?</h2>
<p class="wp-block-paragraph">Für Lesbarkeit, Aufmerksamkeit und ergonomische Qualität.</p>
<h2 class="wp-block-heading">Was ist der nächste Schritt nach der Farbwahl?</h2>
<p class="wp-block-paragraph">Vorlagen bauen (Social, Slides, Workbooks) und konsequent anwenden.</p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<figure class="wp-block-image size-large is-resized"><img loading="lazy" decoding="async" width="150" height="150" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/Instagram-Icon-kl.jpg" alt="Instagram-Icon" class="wp-image-7090" style="width:38px;height:38px" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/Instagram-Icon-kl.jpg 150w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/Instagram-Icon-kl-140x140.jpg 140w" sizes="auto, (max-width: 150px) 100vw, 150px" /></figure>
<p class="wp-block-paragraph">Folge mir auf <a rel="noreferrer noopener" href="https://www.instagram.com/life.business.design/" target="_blank"><strong>Instagram</strong> @life.business.design</a></p>
<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" width="512" height="512" src="https://www.torstenstapelkamp.de/wp-content/uploads/2022/06/LinkedIn-Logo-fuer-ueber-mich-torsten-stapelkamp.png" alt="" class="wp-image-10860" style="width:38px;height:38px" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2022/06/LinkedIn-Logo-fuer-ueber-mich-torsten-stapelkamp.png 512w, https://www.torstenstapelkamp.de/wp-content/uploads/2022/06/LinkedIn-Logo-fuer-ueber-mich-torsten-stapelkamp-300x300.png 300w, https://www.torstenstapelkamp.de/wp-content/uploads/2022/06/LinkedIn-Logo-fuer-ueber-mich-torsten-stapelkamp-140x140.png 140w" sizes="auto, (max-width: 512px) 100vw, 512px" /></figure>
<p class="wp-block-paragraph">Folge mir auf <strong><a href="https://www.linkedin.com/in/torsten-stapelkamp/" target="_blank" rel="noreferrer noopener">LinkedIn</a></strong></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<p class="wp-block-paragraph"><strong>Nutzt Du bereits Farbe als Unterscheidungsmerkmal?<br />Wie wichtig ist Dir Farbe für Dein Branding und Dein Marketing?</strong></p>
<p class="wp-block-paragraph">Schreib mir in den Kommentaren.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Kontrast und Farbe für Branding, Marke und Marketing Deines Online Business mit Online Kurse</title>
		<link>https://www.torstenstapelkamp.de/kontrast-farbe-branding-marke-online-kurse-erstellen/</link>
		
		<dc:creator><![CDATA[torsten]]></dc:creator>
		<pubDate>Sun, 29 Oct 2017 14:08:22 +0000</pubDate>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[Design Basics]]></category>
		<category><![CDATA[Grundlagen Gestaltung]]></category>
		<category><![CDATA[Online Marketing]]></category>
		<category><![CDATA[Branding]]></category>
		<category><![CDATA[Farbe]]></category>
		<category><![CDATA[Kontrast]]></category>
		<category><![CDATA[marke]]></category>
		<category><![CDATA[Marketing]]></category>
		<category><![CDATA[Simultankontrast]]></category>
		<guid isPermaLink="false">https://designismakingsense.de/?p=917</guid>

					<description><![CDATA[<p>Durch Verstärkung des Kontrastes kann die Wahrnehmung des Betrachters bewusst gelenkt werden. Auch damit wird es möglich, in Erinnerung zu bleiben und als die richtige Marke wiedererkannt zu werden.</p>]]></description>
										<content:encoded><![CDATA[<p class="wp-block-paragraph">Der Artikel listet acht zentrale Farbkontraste und verbindet sie explizit mit Branding und Marketing: Farbe und Farbkombinationen machen den Unterschied, weil Marketing auch Aufmerksamkeit und Wiedererkennung bedeutet. Besonders wertvoll ist die Perspektive, dass Kontrast nicht nur ästhetisch ist, sondern Wahrnehmung steuert, das Auge entlasten oder anregen kann und bei Screens/Bedienfeldern unter variierenden Lichtbedingungen eine ergonomische Rolle spielt. Zusätzlich wird auf den Artikel zur Wahrnehmung und Farbe verwiesen, um das Thema Sichtbarkeit systemisch zu denken.</p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<h2 class="wp-block-heading">Simultankontrast: Aufmerksamkeit gezielt lenken</h2>
<p class="wp-block-paragraph">Simultankontrast kann Wahrnehmung verstärken oder schonen. Bei Flächen mit hoher Aufmerksamkeit wie Texten, Hinweisschildern oder Bedienfeldern ist wichtig, dass das Auge nicht überanstrengt wird. Für digitale Interfaces ist das besonders relevant, weil Umgebungslicht die Lesbarkeit verändert.</p>
<h2 class="wp-block-heading">Komplementärkontrast: Spannung, Nachbilder, klare Differenzierung</h2>
<p class="wp-block-paragraph">Komplementärfarben liegen im Farbkreis gegenüber; der Artikel betont, dass Farbmodelle variieren können und nennt den Farbkreis nach Küppers als Bezug. Der Nutzen liegt in vorhersehbarer, starker Kontrastwirkung und damit in klarer Differenzierung.</p>
<h2 class="wp-block-heading">Hell-Dunkel, Bunt-Unbunt, Quantität: Ergonomie im Screen Design</h2>
<p class="wp-block-paragraph">Hell-Dunkel ist ein ergonomischer Faktor: Ohne ausreichenden Kontrast werden Details unlesbar; zu starker Kontrast kann ermüden. Bunt-Unbunt und Quantitätskontrast eignen sich laut Artikel besonders für Screen- und Interfacedesign.</p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<p class="wp-block-paragraph"><a name="top"></a><a name="simultan"></a>Im folgenden werden Kontraste mit Farbe vorgestellt: Simultankontrast, Komplementärkontrast, Farbe-an-sich-Kontrast, Quantitätskontrast, Bunt-Unbunt-Kontrast, Hell-Dunkel-Kontrast, Kalt-Warm-Kontrast und Qualitätskontrast.<br />Du wirst Dich fragen, was das mit Deinem Branding oder Deinem Marketing für Dein Online Business zu tun hat. Die richtige Farbe und die richtige Farb-Kombination zu wählen macht den Unterschied. Marketing hat immer auch etwas mit Auffallen zu tun und damit, einen Unterschied zu machen, um in Erinnerung zu bleiben und um neben den Konkurrenten als die richtige Marke erkannt zu werden.</p>
<p class="wp-block-paragraph">Dazu empfehle ich die Bücher <a rel="noreferrer noopener" href="https://amzn.to/3qZeBxM" target="_blank"><strong>„Marketing mit Farben“</strong> von Erich Küthe</a> und <a href="https://amzn.to/3ANz0dG" target="_blank" rel="noreferrer noopener"><strong>„Wie Farben wirken“</strong> von Eva Heller.</a></p>
<p class="wp-block-paragraph">Insbesondere, wenn Du beabsichtigst Online Kurse erstellen zu wollen, ergibt es Sinn, sich mit Farbe zu befassen. Nutze die Beispiele als Anregung für das Design Deines Online Business und einer Online Kurse. Du wirst feststellen, das bestimmte Farbkombinationen besser miteinander harmonieren.</p>
<p class="wp-block-paragraph">Schaue Die auch meinen Artikel <a rel="noreferrer noopener" href="https://www.torstenstapelkamp.de/sichtbarkeit-marke-branding-wahrnehmung-farbe/" target="_blank"><strong>„Wahrnehmung und Farbe – Basis für Sichtbarkeit – z.B. für Online Business“</strong></a> an. Er befasst sich damit, was der Titel vermuten lässt. Die richtigen Farben bzw. Farb-Kombinationen zu wählen wirkt sich deutlich auf Deine den Wiedererkennungswert aus und unterstützt damit auch Deine Sichtbarkeit.</p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<h2 class="wp-block-heading">Simultankontrast</h2>
<p class="wp-block-paragraph">Informationen über den Simultankontrast können genutzt werden, um durch Verstärkung des Kontrastes die Wahrnehmung des Betrachters bewusst zu lenken, zu strapazieren, anzuregen oder durch eine gezielte Verringerung des Kontrastes zu schonen. So ist bei Flächen, die eine hohe Aufmerksamkeit auf sich ziehen bzw. erforderlich machen, wie z. B. Texte, Hinweisschilder oder Bedienfelder, darauf zu achten, dass das Auge des Betrachters nicht überanstrengt wird. Insbesondere bei Displays, Monitoren und Bedienfeldern, die unterschiedlichen Licht- und Beleuchtungsverhältnissen ausgesetzt sind, wird der Einsatz von Kontrasten erforderlich. Kontraste können aber auch gezielt für die Lenkung von Aufmerksamkeit genutzt werden und sind daher hilfreich bei der Absicht Online Kurse erstellen zu wollen bzw. ein markantes Branding zu gestalten.</p>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="998" height="448" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/09/1bunt-unbunt-simultankontrast.png" alt="Bunt-unbunt-Simultankontrast im Kapitel &quot;Kontrast mit Farbe&quot;." class="wp-image-900" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/09/1bunt-unbunt-simultankontrast.png 998w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/09/1bunt-unbunt-simultankontrast-600x269.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/09/1bunt-unbunt-simultankontrast-768x345.png 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/09/1bunt-unbunt-simultankontrast-900x404.png 900w" sizes="auto, (max-width: 998px) 100vw, 998px" /></figure>
<p class="wp-block-paragraph"><span class="smaller">Der Farbton der kleinen Quadrate ist in allen großen Quadraten identisch (siehe auch ›Bunt-Unbunt-Kontrast‹)</span></p>
<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="998" height="447" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/09/2hell-dunkel-simultankontrast.png" alt="Bunt-unbunt-Simultankontrast im Kapitel &quot;Kontrast mit Farbe&quot;." class="wp-image-901" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/09/2hell-dunkel-simultankontrast.png 998w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/09/2hell-dunkel-simultankontrast-600x269.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/09/2hell-dunkel-simultankontrast-768x344.png 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/09/2hell-dunkel-simultankontrast-900x403.png 900w" sizes="auto, (max-width: 998px) 100vw, 998px" /></figure>
<p class="wp-block-paragraph"><span class="smaller">Hell-Dunkel Simultankontrast.</span></p>
<div style="height:44px" aria-hidden="true" class="wp-block-spacer"></div>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="997" height="446" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/3unterschiedlicher-simultankontrast.png" alt="unterschiedlicher-Simultankontrast im Kapitel &quot;Kontrast mit Farbe&quot;." class="wp-image-922" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/3unterschiedlicher-simultankontrast.png 997w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/3unterschiedlicher-simultankontrast-600x268.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/3unterschiedlicher-simultankontrast-768x344.png 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/3unterschiedlicher-simultankontrast-900x403.png 900w" sizes="auto, (max-width: 997px) 100vw, 997px" /></figure>
<p class="wp-block-paragraph"><span class="smaller">Simultankontrast mit unterschiedlichen Farbwerten.</span></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="971" height="826" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/4koeln-airport-kontraste_01.jpg" alt="Screenshot der Website des Kölner Flughafens. Erstes Bild." class="wp-image-923" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/4koeln-airport-kontraste_01.jpg 971w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/4koeln-airport-kontraste_01-600x510.jpg 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/4koeln-airport-kontraste_01-768x653.jpg 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/4koeln-airport-kontraste_01-900x766.jpg 900w" sizes="auto, (max-width: 971px) 100vw, 971px" /></figure>
<div style="height:43px" aria-hidden="true" class="wp-block-spacer"></div>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="971" height="826" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/5koeln-airport-kontraste_02.jpg" alt="Screenshot der Website des Kölner Flughafens. Zweites Bild." class="wp-image-924" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/5koeln-airport-kontraste_02.jpg 971w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/5koeln-airport-kontraste_02-600x510.jpg 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/5koeln-airport-kontraste_02-768x653.jpg 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/5koeln-airport-kontraste_02-900x766.jpg 900w" sizes="auto, (max-width: 971px) 100vw, 971px" /></figure>
<div style="height:34px" aria-hidden="true" class="wp-block-spacer"></div>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="911" height="775" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/6koeln-airport-kontraste_03.png" alt="Screenshot der Website des Kölner Flughafens. Drittes Bild." class="wp-image-925" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/6koeln-airport-kontraste_03.png 911w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/6koeln-airport-kontraste_03-600x510.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/6koeln-airport-kontraste_03-768x653.png 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/6koeln-airport-kontraste_03-900x766.png 900w" sizes="auto, (max-width: 911px) 100vw, 911px" /></figure>
<p class="wp-block-paragraph"><a rel="noopener noreferrer" href="http://www.koeln-bonn-airport.de" target="_blank"><span class="smaller">www.koeln-bonn-airport.de</span></a><a name="komplementaer"></a></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<h2 class="wp-block-heading">Komplementärkontrast</h2>
<p class="wp-block-paragraph">Mit Komplementärkontrast sind jene Farben gemeint, die sich im Farbkreis gegenüber liegen. Da sich Farbkreise je nach Farbmodell unterscheiden und sich dadurch unterschiedliche Farbpaare ergeben, die sich als Komplementärfarben bezeichnen ließen, ist eine Festlegung bzw. die Benennung konkreter Komplementärfarben nicht möglich. Aufgrund des Phänomens der Nachbilder kann allerdings der Farbkreises nach Harald Küppers (siehe ›Farbkreis nach Harald Küppers‹) als geeignet empfohlen werden. Gerade weil die Nachbilder ein zwar wissenschaftlich noch nicht ganz geklärtes aber bei jedem Menschen gleichermaßen stattfindendes Phänomen darstellen und somit objektive Erwartungen voraussehbar machen, eignen sich die Komplementärkontraste des Farbkreises nach Harald Küppers besonders für Gestaltungsüberlegungen, sowohl nach ästhetischen als auch nach ergonomischen Kriterien.</p>
<p class="wp-block-paragraph"><a name="farbkreis"></a></p>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1005" height="78" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/7kueppers-kontraste.png" alt="Kueppers-Kontraste für das Kapitel &quot;Kontraste mit Farbe&quot;." class="wp-image-926" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/7kueppers-kontraste.png 1005w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/7kueppers-kontraste-600x47.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/7kueppers-kontraste-768x60.png 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/7kueppers-kontraste-900x70.png 900w" sizes="auto, (max-width: 1005px) 100vw, 1005px" /></figure>
<p class="wp-block-paragraph"><span class="smaller">Im Farbkreis nach Harald Küppers gegenüberliegende Komplementärfarben.</span></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="952" height="752" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/8gilette-fusion-kontraste.png" alt="Screenshot der Website von Fusion Klingen." class="wp-image-927" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/8gilette-fusion-kontraste.png 952w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/8gilette-fusion-kontraste-600x474.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/8gilette-fusion-kontraste-768x607.png 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/8gilette-fusion-kontraste-900x711.png 900w" sizes="auto, (max-width: 952px) 100vw, 952px" /></figure>
<p class="wp-block-paragraph"><span class="smaller">www.gilette.com/men/fusion</span></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="888" height="792" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/9smartmoney-kontraste.png" alt="Screenshot der Website von SmartMoney." class="wp-image-928" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/9smartmoney-kontraste.png 888w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/9smartmoney-kontraste-600x535.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/9smartmoney-kontraste-768x685.png 768w" sizes="auto, (max-width: 888px) 100vw, 888px" /></figure>
<p class="wp-block-paragraph"><a rel="noopener noreferrer" href="http://www.smartmoney.com" target="_blank"><span class="smaller">www.smartmoney.com</span></a><a name="farbeansich"></a></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<h2 class="wp-block-heading">Farbe-an-sich-Kontrast</h2>
<p class="wp-block-paragraph">Die Bezeichnung dieses Kontrastes mag etwas eigenwillig klingen, beschreibt aber dafür umso nachvollziehbarer, worin die Qualität dieses Kontrastes liegt. Durch die Kombination mehrerer Farbtöne wird eine kontrastreiche Wirkung erzielt, die für Lebhaftigkeit, aber auch Vielseitigkeit stehen kann, weshalb dieser Kontrast sowohl dann zum Einsatz kommt, wenn Kinder mit bunter Farbenvielfalt als Zielgruppe angesprochen werden sollen, als auch dann, wenn Kreativität zum Ausdruck gebracht werden soll.</p>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1085" height="144" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/11farbe-an-sich-kontrast.png" alt="Farbe-an-sich-Kontrast im Kapitel &quot;Kontrast mit Farbe&quot;." class="wp-image-930" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/11farbe-an-sich-kontrast.png 1085w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/11farbe-an-sich-kontrast-600x80.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/11farbe-an-sich-kontrast-768x102.png 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/11farbe-an-sich-kontrast-900x119.png 900w" sizes="auto, (max-width: 1085px) 100vw, 1085px" /></figure>
<p class="wp-block-paragraph"><span class="smaller">Farbe-an-sich-Kontrast</span></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="879" height="616" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/12vtexh-kontraste.png" alt="Spielzeug in den Farben Orange und Blau." class="wp-image-931" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/12vtexh-kontraste.png 879w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/12vtexh-kontraste-600x420.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/12vtexh-kontraste-768x538.png 768w" sizes="auto, (max-width: 879px) 100vw, 879px" /></figure>
<p class="wp-block-paragraph"><span class="smaller">Joystick der Lernkonsole V.Smile, © www.vtech.de</span></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="936" height="639" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/14leappad-kontraste.png" alt="Digitales, interaktives Spielzeug aus Kinderbuch und Kunstoffgehäuse." class="wp-image-933" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/14leappad-kontraste.png 936w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/14leappad-kontraste-600x410.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/14leappad-kontraste-768x524.png 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/14leappad-kontraste-900x614.png 900w" sizes="auto, (max-width: 936px) 100vw, 936px" /></figure>
<p class="wp-block-paragraph"><span class="smaller">LeapPad-Lernsystem, © www.leapfrog.com</span></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="874" height="840" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/15happy-tree-friends-kontraste.png" alt="Screenshot der Website Happy Tree Friends." class="wp-image-979" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/15happy-tree-friends-kontraste.png 874w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/15happy-tree-friends-kontraste-600x577.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/15happy-tree-friends-kontraste-768x738.png 768w" sizes="auto, (max-width: 874px) 100vw, 874px" /></figure>
<p class="wp-block-paragraph"><span class="smaller">mondo.happytreefriends.com</span></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="959" height="1122" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/17milliondollarhomepage.png" alt="" class="wp-image-935" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/17milliondollarhomepage.png 959w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/17milliondollarhomepage-600x702.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/17milliondollarhomepage-768x899.png 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/17milliondollarhomepage-875x1024.png 875w" sizes="auto, (max-width: 959px) 100vw, 959px" /></figure>
<p class="wp-block-paragraph"><span class="smaller">Ein Farbe-an-sich-Kontrast kann sich auch zufällig ergeben. Die einzelnen Werbeflächen wurden ohne System und nur in der Reihenfolge des Eingangs sortiert. Dadurch und durch die intensiven und unterschiedlichen Farben ergibt sich ein farblich chaotisches Bild (www.milliondollarhomepage.com).</span></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<h2 class="wp-block-heading">Quantitätskontrast</h2>
<p class="wp-block-paragraph">Wenn der Kontrast durch ein Ungleichgewicht an Farbmengenverteilung zum Ausdruck kommt, spricht man von Quantitätskontrast. Gibt es eine gleichmäßige Verteilung der Farben in Menge und Intensität kann die Gestaltung ausgewogen, aber auch langweilig erscheinen. Der Quantitäts- aber auch der Bunt-Unbunt-Kontrast eignen sich hervorragend für die Gestaltung von Informations- und Funktionssoftware und überhaupt für jede Art von Hard- oder Software-Bedienfelder. Inhalte wie auch funktionale Aspekte lassen sich mit diesen Kontrasten gut differenziert darstellen.</p>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1171" height="95" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/18quantitaetskontrast.png" alt="Farbreihe zu Quantitaetskontrast." class="wp-image-936" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/18quantitaetskontrast.png 1171w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/18quantitaetskontrast-600x49.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/18quantitaetskontrast-768x62.png 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/18quantitaetskontrast-900x73.png 900w" sizes="auto, (max-width: 1171px) 100vw, 1171px" /></figure>
<p class="wp-block-paragraph"><span class="smaller">Quantitätskontrast</span></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1059" height="755" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/21bloomberg-terminal.png" alt="Abbildung eines Bloomberg-Terminal mit Doppel-Monitor und Tastatur." class="wp-image-939" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/21bloomberg-terminal.png 1059w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/21bloomberg-terminal-600x428.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/21bloomberg-terminal-768x548.png 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/21bloomberg-terminal-900x642.png 900w" sizes="auto, (max-width: 1059px) 100vw, 1059px" /></figure>
<p class="wp-block-paragraph"><span class="smaller">Bloomberg Terminal (Industrial Design: Masamichi Udagawa, Sigi Moeslinger; Antenna Design New York Inc. Screen Interface Design: Bloomberg Team. Foto: Ryuzo Masunaga).</span></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1062" height="818" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/22post-kontraste.png" alt="Screenshot der Website von der Deutschen Post." class="wp-image-941" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/22post-kontraste.png 1062w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/22post-kontraste-600x462.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/22post-kontraste-768x592.png 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/22post-kontraste-900x693.png 900w" sizes="auto, (max-width: 1062px) 100vw, 1062px" /></figure>
<p class="wp-block-paragraph"><span class="smaller">www.deutschepost.de</span><a name="buntunbunt"></a></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<h2 class="wp-block-heading">Bunt-Unbunt-Kontrast</h2>
<p class="wp-block-paragraph">Wie die Bezeichnung bereits vermuten lässt, bildet sich dieser Kontrast durch die Kombination von satten, bunten mit entfärbten, unbunten Farbtönen, wobei die entfärbten Farbtöne durch eingefärbte Grauabstufungen gebildet sind. Der Bunt-Unbunt- und der Quantitätskontrast (siehe <a href="https://www.torstenstapelkamp.de/design_basics/917/#quantitaet">›Quantitätskontrast‹</a>) sind sehr geeignete Farbkontraste für die Gestaltung von Screen- und Interfacedesign. Sie lassen sich auch hervorragend miteinander kombinieren. Die reduzierte Anwendung von Farbe, die gedämpften grauen Farbabstufungen und auch große Flächen bieten nicht nur Freiraum für Gestaltung, sondern auch die Möglichkeit, ergonomische mit formalen Aspekten in Einklang zu bringen.</p>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1171" height="94" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/24bunt-unbunt-kontrast.png" alt="Bild über Bunt-Unbunt-Kontrast." class="wp-image-943" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/24bunt-unbunt-kontrast.png 1171w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/24bunt-unbunt-kontrast-600x48.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/24bunt-unbunt-kontrast-768x62.png 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/24bunt-unbunt-kontrast-900x72.png 900w" sizes="auto, (max-width: 1171px) 100vw, 1171px" /></figure>
<p class="wp-block-paragraph"><span class="smaller">Bunt-Unbunt-Kontrast</span></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1036" height="666" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/25sonos-kontraste.png" alt="Das Gerät von Sonos zeigt Bunt-Unbunte-Kontraste im Display." class="wp-image-944" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/25sonos-kontraste.png 1036w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/25sonos-kontraste-600x386.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/25sonos-kontraste-768x494.png 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/25sonos-kontraste-900x579.png 900w" sizes="auto, (max-width: 1036px) 100vw, 1036px" /></figure>
<p class="wp-block-paragraph"><span class="smaller">www.sonos.com</span></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="793" height="626" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/26bloomberg-tastatur.png" alt="Tastatur des Bloomberg Terminals. (Industrial Design: Masamichi Udagawa, Sigi Moeslinger; Antenna Design New York Inc. Screen Interface Design: Bloomberg Team. Foto: Ryuzo Masunaga)." class="wp-image-945" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/26bloomberg-tastatur.png 793w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/26bloomberg-tastatur-600x474.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/26bloomberg-tastatur-768x606.png 768w" sizes="auto, (max-width: 793px) 100vw, 793px" /></figure>
<p class="wp-block-paragraph"><span class="smaller">Tastatur des Bloomberg Terminals. (Industrial Design: Masamichi Udagawa, Sigi Moeslinger; Antenna Design New York Inc. Screen Interface Design: Bloomberg Team. Foto: Ryuzo Masunaga).</span></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="815" height="610" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/29osx7-kontraste.png" alt="Screenshot des alten Apple Betrienssystems Mac OS 7.0" class="wp-image-948" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/29osx7-kontraste.png 815w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/29osx7-kontraste-600x449.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/29osx7-kontraste-768x575.png 768w" sizes="auto, (max-width: 815px) 100vw, 815px" /></figure>
<p class="wp-block-paragraph"><span class="smaller">Screenshot des alten Apple Betrienssystems Mac OS 7.0</span></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<h2 class="wp-block-heading">Hell-Dunkel-Kontrast</h2>
<p class="wp-block-paragraph">Dieser Kontrast ist wohl einer der bekanntesten, nicht zuletzt weil am ehesten auffällt, wenn er nicht berücksichtigt wurde. Er trägt wesentlich dazu bei, Details überhaupt erkennbar zu machen und z. B. Text vom Hintergrund differenziert und ausreichend wahrnehmbar darzustellen. Der Hell-Dunkel-Kontrast ist ein ergonomischer Faktor und nicht nur für jene relevant, die eine Seh- oder Farbensehschwäche haben. Ein zu starker Hell-Dunkel-Kontrast kann sich auf die Augen sehr ermüdend auswirken.</p>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1170" height="95" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/31-hell-dunkel-kontrast.png" alt="Bild zum Hell-Dunkel-Kontrast." class="wp-image-950" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/31-hell-dunkel-kontrast.png 1170w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/31-hell-dunkel-kontrast-600x49.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/31-hell-dunkel-kontrast-768x62.png 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/31-hell-dunkel-kontrast-900x73.png 900w" sizes="auto, (max-width: 1170px) 100vw, 1170px" /></figure>
<p class="wp-block-paragraph"><span class="smaller">Hell-Dunkel-Kontrast</span></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="791" height="790" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/32-display-kontraste.png" alt="Abbildung zu Display-Kontraste. Display der U-Bahn in Köln." class="wp-image-951" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/32-display-kontraste.png 791w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/32-display-kontraste-300x300.png 300w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/32-display-kontraste-600x599.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/32-display-kontraste-768x767.png 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/32-display-kontraste-140x140.png 140w" sizes="auto, (max-width: 791px) 100vw, 791px" /></figure>
<p class="wp-block-paragraph"><span class="smaller">Umgebungslicht kann Displays von öffentlichen Verkehrsmitteln unlesbar machen. Nicht nur mit blendungsfreien<br />Displayabdeckungen, sondern auch mit einem gezielten Einsatz von Hell-Dunkel-Kontrast kann die Lesbarkeit gewährleistet werden.</span></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="791" height="790" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/10/33-cockpit-kontraste-kl.jpg" alt="" class="wp-image-6018" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/10/33-cockpit-kontraste-kl.jpg 791w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/10/33-cockpit-kontraste-kl-600x599.jpg 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/10/33-cockpit-kontraste-kl-300x300.jpg 300w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/10/33-cockpit-kontraste-kl-768x767.jpg 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/10/33-cockpit-kontraste-kl-140x140.jpg 140w" sizes="auto, (max-width: 791px) 100vw, 791px" /></figure>
<p class="wp-block-paragraph"><span class="smaller">Farbkontraste innerhalb eines Flugzeug-Cockpits.</span></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="817" height="629" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/34-hermes.png" alt="Kontraste beim Interface (Tastatur) einer Schreibmaschine (Hermes, Schweiz ca. 1970)." class="wp-image-953" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/34-hermes.png 817w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/34-hermes-600x462.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/34-hermes-768x591.png 768w" sizes="auto, (max-width: 817px) 100vw, 817px" /></figure>
<p class="wp-block-paragraph"><span class="smaller">Hell-Dunkel-Kontrast beim Interface (Tastatur) einer Schreibmaschine (Hermes, Schweiz ca. 1970).</span></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="914" height="687" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/36-tieftunnel-kontrast.png" alt="Hell-Dunkel-Kontrast beim CD-Rom-Adventure-Game „Potsdamer Platz“ von Prof. Eku Wand." class="wp-image-955" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/36-tieftunnel-kontrast.png 914w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/36-tieftunnel-kontrast-600x451.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/36-tieftunnel-kontrast-768x577.png 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/36-tieftunnel-kontrast-900x676.png 900w" sizes="auto, (max-width: 914px) 100vw, 914px" /></figure>
<p class="wp-block-paragraph"><span class="smaller">Hell-Dunkel-Kontrast beim CD-Rom-Adventure-Game „Potsdamer Platz“ von Prof. Eku Wand.</span></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<h2 class="wp-block-heading">Kalt-Warm-Kontrast</h2>
<p class="wp-block-paragraph">Im Farbkreis befinden sich sowohl Farben, die eher als kalt, als auch Farben, die eher als warm empfunden werden. Zudem werden Grautöne gegenüber Farbtönen als kalt und innerhalb der Graupalette bräunliche gegenüber den bläulichen Grautönen als warm empfunden. Auch innerhalb einer Farbfamilie können kältere und wärmere Farbtöne festgestellt werden. Diese emotionalen Qualitäten werden beim Kalt-Warm- Kontrast gegenübergestellt, um z. B. Spannungsfelder zu erzeugen. Solche Qualitätsunterschiede können aber auch genutzt werden, um Räumlichkeit vorzutäuschen, da kalte Farben eher fern wirken und warme nah, so wie man es von der natürlichen Lichtperspektive, auch Farbperspektive genannt, her kennt. Je entfernter etwas in der freien Natur ist, umso bläulicher, kühler bzw. blasser wirken die Farben und je näher es ist, umso wärmer bzw. kräftiger sind die Farben. Unser Sehapparat hat sich im Laufe der Evolution an diese Wahrnehmung angepasst, so dass die Farbperspektive als Variante des Kalt-Warm-Kontrastes immer dann genutzt werden kann, wenn mit wenigen farblichen Mitteln eine räumliche Wahrnehmung bzw. eine Differenzierung zwischen Hervorheben und Zurücknehmen bewirkt werden soll. Die sich aus dem Kalt-Warm-Kontrast ergebende Eigenschaft der Raumwirkung kann beim Screen- und Interfacedesign dazu genutzt werden, Strukturen zu bilden und Bedeutungsgrößen zu definieren. Funktionen oder Inhalte können, je nach Strategie und Notwendigkeit, mal in den Vordergrund gerückt und z. B. allein durch den Wechsel von einer warmen zu einer kalten Einfärbung wieder in eine andere Bedeutungsebene verschoben werden.</p>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1001" height="113" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/38-kalt-warm-kontrast.png" alt="Farbreihe zur Visualisierung des Kalt-Warm-Kontrasts." class="wp-image-957" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/38-kalt-warm-kontrast.png 1001w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/38-kalt-warm-kontrast-600x68.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/38-kalt-warm-kontrast-768x87.png 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/38-kalt-warm-kontrast-900x102.png 900w" sizes="auto, (max-width: 1001px) 100vw, 1001px" /></figure>
<p class="wp-block-paragraph"><span class="smaller">Kalt-Warm-Kontrast</span></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="998" height="753" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/41-gelsenwasser-kontraste.png" alt="Screenshot der Website von Gelsenwasser. " class="wp-image-960" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/41-gelsenwasser-kontraste.png 998w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/41-gelsenwasser-kontraste-600x453.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/41-gelsenwasser-kontraste-768x579.png 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/41-gelsenwasser-kontraste-900x679.png 900w" sizes="auto, (max-width: 998px) 100vw, 998px" /></figure>
<p class="wp-block-paragraph"><span class="smaller">www.gelsenwasser.de</span></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="995" height="869" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/42-metadesign-kontraste.png" alt="Screenshot der Website von MetaDesign. " class="wp-image-961" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/42-metadesign-kontraste.png 995w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/42-metadesign-kontraste-600x524.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/42-metadesign-kontraste-768x671.png 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/42-metadesign-kontraste-900x786.png 900w" sizes="auto, (max-width: 995px) 100vw, 995px" /></figure>
<p class="wp-block-paragraph"><span class="smaller">www.metadesign.de</span></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="873" height="684" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/43-decodeunicode-kontraste.png" alt="Screenshot der Website von decodeunicode.org" class="wp-image-962" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/43-decodeunicode-kontraste.png 873w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/43-decodeunicode-kontraste-600x470.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/43-decodeunicode-kontraste-768x602.png 768w" sizes="auto, (max-width: 873px) 100vw, 873px" /></figure>
<p class="wp-block-paragraph"><span class="smaller">www.decodeunicode.org</span></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1062" height="784" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/44-o2-kontraste.png" alt="Screenshot der Website von O2." class="wp-image-963" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/44-o2-kontraste.png 1062w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/44-o2-kontraste-600x443.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/44-o2-kontraste-768x567.png 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/44-o2-kontraste-900x664.png 900w" sizes="auto, (max-width: 1062px) 100vw, 1062px" /></figure>
<p class="wp-block-paragraph"><span class="smaller">www.o2-online.de</span></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<h2 class="wp-block-heading">Qualitätskontrast</h2>
<p class="wp-block-paragraph">Wenn ein reiner Farbton von seinen eigenen hellen und dunklen Tonwertstufen umgeben ist, wirkt er intensiver. Dadurch wird seine Bedeutung gegenüber den abgestuften Tonwerten erhöht. Man spricht dann auch von Qualitätskontrast. Bei einer solchen Ton-in-Ton-Gestaltungsform können durch Tonwertabstufungen in einer Fläche Bereiche abgegrenzt und bestimmten Inhalten und Funktionen zugeordnet werden, wodurch die gesamte Fläche eine klare Gliederung erfahren kann. Es besteht allerdings auch die Gefahr, durch diesen geringen Farbeinsatz eine sprichwörtliche Eintönigkeit zu bewirken.</p>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1171" height="95" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/45-qualitaetskontrast.png" alt="Farbreihe zum Qualitätskontrast." class="wp-image-964" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/45-qualitaetskontrast.png 1171w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/45-qualitaetskontrast-600x49.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/45-qualitaetskontrast-768x62.png 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/45-qualitaetskontrast-900x73.png 900w" sizes="auto, (max-width: 1171px) 100vw, 1171px" /></figure>
<p class="wp-block-paragraph"><span class="smaller">Qualitätskontrast</span></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="905" height="568" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/47-nanoreise-kontraste.png" alt="Screenshot von www.nanoreise.de" class="wp-image-966" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/47-nanoreise-kontraste.png 905w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/47-nanoreise-kontraste-600x377.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/47-nanoreise-kontraste-768x482.png 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/47-nanoreise-kontraste-900x565.png 900w" sizes="auto, (max-width: 905px) 100vw, 905px" /></figure>
<p class="wp-block-paragraph"><span class="smaller">www.nanoreise.de</span></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="875" height="865" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/48-artispaas-kontraste.png" alt="Screenshot der Website www.artispaas.de" class="wp-image-967" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/48-artispaas-kontraste.png 875w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/48-artispaas-kontraste-600x593.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/48-artispaas-kontraste-768x759.png 768w" sizes="auto, (max-width: 875px) 100vw, 875px" /></figure>
<p class="wp-block-paragraph"><span class="smaller">www.artispaas.de</span></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1130" height="793" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/50-wand5-kontraste.png" alt="Screenshot der Website www.wand5.dein Rot- und Rosa-Farbtton-Kontrasten." class="wp-image-969" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/50-wand5-kontraste.png 1130w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/50-wand5-kontraste-600x421.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/50-wand5-kontraste-768x539.png 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/50-wand5-kontraste-900x632.png 900w" sizes="auto, (max-width: 1130px) 100vw, 1130px" /></figure>
<p class="wp-block-paragraph"><span class="smaller">www.wand5.de</span></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<h2 class="wp-block-heading">Überblick der Kontraste</h2>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="913" height="130" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/52-simultankontrast.png" alt="Abbildung des Simultankontrastes." class="wp-image-971" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/52-simultankontrast.png 913w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/52-simultankontrast-600x85.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/52-simultankontrast-768x109.png 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/52-simultankontrast-900x128.png 900w" sizes="auto, (max-width: 913px) 100vw, 913px" /></figure>
<p class="wp-block-paragraph">Simultankontrast</p>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1005" height="78" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/7kueppers-kontraste.png" alt="Komplementärkontrast, Kueppers-Kontraste für das Kapitel &quot;Kontraste mit Farbe&quot;." class="wp-image-926" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/7kueppers-kontraste.png 1005w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/7kueppers-kontraste-600x47.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/7kueppers-kontraste-768x60.png 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/7kueppers-kontraste-900x70.png 900w" sizes="auto, (max-width: 1005px) 100vw, 1005px" /></figure>
<p class="wp-block-paragraph">Komplementärkontrast</p>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1085" height="144" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/11farbe-an-sich-kontrast.png" alt="Farbe-an-sich-Kontrast im Kapitel &quot;Kontrast mit Farbe&quot;." class="wp-image-930" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/11farbe-an-sich-kontrast.png 1085w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/11farbe-an-sich-kontrast-600x80.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/11farbe-an-sich-kontrast-768x102.png 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/11farbe-an-sich-kontrast-900x119.png 900w" sizes="auto, (max-width: 1085px) 100vw, 1085px" /></figure>
<p class="wp-block-paragraph">Farbe-an-sich-Kontrast</p>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1171" height="95" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/18quantitaetskontrast.png" alt="Farbreihe zu Quantitaetskontrast." class="wp-image-936" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/18quantitaetskontrast.png 1171w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/18quantitaetskontrast-600x49.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/18quantitaetskontrast-768x62.png 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/18quantitaetskontrast-900x73.png 900w" sizes="auto, (max-width: 1171px) 100vw, 1171px" /></figure>
<p class="wp-block-paragraph">Quantitätskontrast</p>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1171" height="94" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/24bunt-unbunt-kontrast.png" alt="Bild über Bunt-Unbunt-Kontrast." class="wp-image-943" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/24bunt-unbunt-kontrast.png 1171w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/24bunt-unbunt-kontrast-600x48.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/24bunt-unbunt-kontrast-768x62.png 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/24bunt-unbunt-kontrast-900x72.png 900w" sizes="auto, (max-width: 1171px) 100vw, 1171px" /></figure>
<p class="wp-block-paragraph">Bunt-Unbunt-Kontrast</p>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1170" height="95" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/31-hell-dunkel-kontrast.png" alt="Bild zum Hell-Dunkel-Kontrast." class="wp-image-950" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/31-hell-dunkel-kontrast.png 1170w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/31-hell-dunkel-kontrast-600x49.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/31-hell-dunkel-kontrast-768x62.png 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/31-hell-dunkel-kontrast-900x73.png 900w" sizes="auto, (max-width: 1170px) 100vw, 1170px" /></figure>
<p class="wp-block-paragraph">Hell-Dunkel-Kontrast</p>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1001" height="113" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/38-kalt-warm-kontrast.png" alt="Farbreihe zur Visualisierung des Kalt-Warm-Kontrasts." class="wp-image-957" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/38-kalt-warm-kontrast.png 1001w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/38-kalt-warm-kontrast-600x68.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/38-kalt-warm-kontrast-768x87.png 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/38-kalt-warm-kontrast-900x102.png 900w" sizes="auto, (max-width: 1001px) 100vw, 1001px" /></figure>
<p class="wp-block-paragraph">Kalt-Warm-Kontrast</p>
<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1171" height="95" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/45-qualitaetskontrast.png" alt="Farbreihe zum Qualitätskontrast." class="wp-image-964" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/45-qualitaetskontrast.png 1171w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/45-qualitaetskontrast-600x49.png 600w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/45-qualitaetskontrast-768x62.png 768w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/45-qualitaetskontrast-900x73.png 900w" sizes="auto, (max-width: 1171px) 100vw, 1171px" /></figure>
<p class="wp-block-paragraph">Qualitätskontrast</p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<h2 class="wp-block-heading">Welche Kontraste werden behandelt?</h2>
<p class="wp-block-paragraph">Simultan, Komplementär, Farbe-an-sich, Quantität, Bunt-Unbunt, Hell-Dunkel, Kalt-Warm, Qualität.</p>
<h2 class="wp-block-heading">Warum ist Kontrast Branding-relevant?</h2>
<p class="wp-block-paragraph">Weil Wiedererkennung und Aufmerksamkeit stark über Farblogik entstehen.</p>
<h2 class="wp-block-heading">Was ist der größte UI-Nutzen?</h2>
<p class="wp-block-paragraph">Lesbarkeit und Aufmerksamkeitslenkung unter realen Lichtbedingungen.</p>
<h2 class="wp-block-heading">Warum kann zu viel Kontrast schlecht sein?</h2>
<p class="wp-block-paragraph">Weil starke Hell-Dunkel-Kontraste ermüden können.</p>
<h2 class="wp-block-heading">Was ist der nächste Schritt nach dem Lesen?</h2>
<p class="wp-block-paragraph">Ein Farb- und Kontrast-Standard für Templates (Social, Slides, Workbooks, UI-Komponenten).</p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<figure class="wp-block-image size-large is-resized"><img loading="lazy" decoding="async" width="150" height="150" src="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/Instagram-Icon-kl.jpg" alt="Instagram-Icon" class="wp-image-7090" style="width:38px;height:38px" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/Instagram-Icon-kl.jpg 150w, https://www.torstenstapelkamp.de/wp-content/uploads/2017/07/Instagram-Icon-kl-140x140.jpg 140w" sizes="auto, (max-width: 150px) 100vw, 150px" /></figure>
<p class="wp-block-paragraph">Folge mir auf <a rel="noreferrer noopener" href="https://www.instagram.com/life.business.design/" target="_blank"><strong>Instagram</strong> @life.business.design</a></p>
<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" width="512" height="512" src="https://www.torstenstapelkamp.de/wp-content/uploads/2022/06/LinkedIn-Logo-fuer-ueber-mich-torsten-stapelkamp.png" alt="" class="wp-image-10860" style="width:38px;height:38px" srcset="https://www.torstenstapelkamp.de/wp-content/uploads/2022/06/LinkedIn-Logo-fuer-ueber-mich-torsten-stapelkamp.png 512w, https://www.torstenstapelkamp.de/wp-content/uploads/2022/06/LinkedIn-Logo-fuer-ueber-mich-torsten-stapelkamp-300x300.png 300w, https://www.torstenstapelkamp.de/wp-content/uploads/2022/06/LinkedIn-Logo-fuer-ueber-mich-torsten-stapelkamp-140x140.png 140w" sizes="auto, (max-width: 512px) 100vw, 512px" /></figure>
<p class="wp-block-paragraph">Folge mir auf <strong><a href="https://www.linkedin.com/in/torsten-stapelkamp/" target="_blank" rel="noreferrer noopener" class="ek-link">LinkedIn</a></strong></p>
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<p class="wp-block-paragraph"><strong>Nutzt Du bereits Farbe als Unterscheidungsmerkmal für Dein Branding?<br />Wie wichtig ist Dir Farbe für Dein Branding und Dein Marketing?</strong></p>
<p class="wp-block-paragraph">Schreib mir in den Kommentaren.</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
