Wenn Du als Freelancer Projekte gewinnen willst, ist diese Differenzierung praktisch: Sie hilft Dir, Deine Rolle sauber zu erklären, Leistungen transparent zu machen und Budgets als Investment in Wirkung, Erlebnis und Conversion zu begründen – nicht als „Pixel schieben“.

Interfaces sind gleichermaßen Benutzeroberfläche, aber auch Dialogoberfläche. Als solche prägen sie das Image eines Unternehmens, unterstützen das Branding und sind Teil einer erfolgreichen Marken-Strategie (Branding Experience Design, BX) – wenn sie die Erwartungen der Nutzer erfüllen.

Interfacedesign ist überall. Wir sind umgeben von Interfaces. So wie die konzentrierte Zentralperspektive eine Basis schuf, durch die sich das zu Beginn der Renaissance neu entwickelnde Bild des Menschen konstruieren ließ, so ist das Interfacedesign der Dreh- und Angelpunkt unserer Zeit. 

Bedingt durch die Digitalisierung werden komplexe Interfaces möglich, aber auch notwendig, die einerseits den Zugang zu nie geahnten Informations- und Funktionsmengen und dadurch zu neuen Verweis- und Vergleichsmöglichkeiten bieten. Andererseits bieten uns Interfaces Funktionen und Steuerungs-Möglichkeiten an, durch die wir uns mit physisch anfassbaren (Haptic Interfaces), aber auch mit digital/virtuellen Produkten verbinden können (Graphic User Interfaces, GUI für App- und Web-Design und Tangible- und Tactile-Interfaces für Virtual Reality und Augmented Reality). 

Wobei zu beachten ist, dass durch Interfaces nicht nur Funktionen, sondern auch Emotionen repräsentiert werden können und dadurch maßgeblich zum Image eines Produktes beitragen und daher stets Teil der Branding- bzw. der Marken-Strategie sind.

Was bedeutet UX und was bedeutet UI?

User Experience (UX) beschreibt das gesamte Erleben im Umgang mit einem Produkt, System oder Service: Wahrnehmungen, Reaktionen, Emotionen, Erwartungen und die Art, wie Menschen Ziele erreichen. In Normen wird UX als „perceptions and responses“ im Kontext der Nutzung oder erwarteten Nutzung beschrieben.
User Interface (UI) ist dagegen die konkrete, sicht- und bedienbare Ausformulierung einer digitalen Oberfläche: Layout, Typografie, Abstände, Farben, Komponenten, Zustände, Interaktion und Konsistenz. In Deinem Kontext ist UI der Teil, der die visuellen Stärken einer Marke auf die Oberfläche überträgt und sie konsistent umsetzbar macht.

Wichtig: UX und UI trennen sich in der Praxis selten vollständig. UX definiert häufig Struktur, Logik, Prioritäten und Testkriterien; UI übersetzt diese Erkenntnisse in ein konsistentes Interface, das auf Geräten, in Zuständen und über Interaktionen hinweg stabil funktioniert.

Was gehört alles zu UX? Typische Aufgabenfelder

UX ist in Deiner Darstellung klar mehr als „Usability“: Es geht um Strategie, Struktur, Prototyping, Validierung und Ergebnissteuerung. Dazu gehören typischerweise:

1. Strategie und Inhalt

• Wettbewerbsanalyse
• Kundenanalyse und Nutzerforschung
• Produktstruktur und Strategie
• Inhaltsentwicklung

2. Wireframing und Prototyping

• Wireframes
• Prototypen entwickeln
• Testen und Iteration
• Entwicklungsplanung

3. Ausführung und Analyse

• Koordination mit UI-Designern
• Abstimmung mit Entwicklern
• Verfolgung von Zielen und Integration
• UX-Analyse und Iteration

Damit wird UX automatisch anschlussfähig an Business-Ziele: Du planst nicht nur Oberfläche, sondern steuerst, ob Absichten verstanden werden und ob Interaktionen in Richtung Conversion, Bindung und Zufriedenheit funktionieren.

Was gehört alles zu UI? Typische Aufgabenfelder

UI beschreibt bei Dir den visuellen und interaktiven Produktionsanteil digitaler Oberflächen. Dazu zählen:

• Komponenten, Buttons, Icons, Spacing, Typografie, Layout, Farbschema
• Styleguide-Erstellung und konsistente visuelle Regeln
• Interaktivität, Animation, responsives Verhalten
• Umsetzungsabstimmung mit Entwicklung

UI ist damit der Teil, der die Gestaltungs- und Markenlogik konkret macht: Nicht als „Dekoration“, sondern als verlässliche, wiederholbare Interface-Sprache.

Wie hängen UX, UI, CX und BX zusammen?

Du nutzt vier Begriffe, die in vielen Teams vermischt werden – hier eine klare, konsistente Einordnung nach Deiner Logik:

• UX (User Experience): Gestaltung und Implementierung eines Touchpoints, mit Fokus auf Verständlichkeit, Fluss, Testbarkeit und Zielerreichung.
• UI (User Interface Design): visuelle und interaktive Ausgestaltung digitaler Touchpoints; UI-Designer arbeiten in Deiner Darstellung primär digital.
• CX (Customer Experience): das Ergebnis und Erleben entlang der Customer Journey nach Nutzung eines Produkts/Services (also das zusammenhängende Kundenerlebnis über Touchpoints hinweg).
• BX (Brand Experience): das Markenerlebnis als Gesamtsumme langfristiger Assoziationen, Gefühle und Erwartungen gegenüber einer Marke.

Externe Referenzen formulieren UX ebenfalls bewusst ganzheitlich: als Summe der Interaktionen mit Produkt, Service und Unternehmen.

Wie funktioniert UX/UI im Kontext von Service Design Thinking?

In Deinem Modell kommt UX/UI nicht „isoliert“ vor, sondern ist Teil eines holistischen Vorgehens: Service Design Thinking betrachtet Touchpoints, Stakeholder, Customer Journey, User Story Maps und die Service-Ökonomie, um Services zu verbessern oder neu zu entwickeln. UX/UI wird dann zur operativen Übersetzung dieser Erkenntnisse in konkrete Touchpoints.
Das ist für Freelancer besonders relevant: Wenn Du SDT-Methoden verstehst, kannst Du Probleme besser begründen, Anforderungen sauber ableiten und den Wert Deiner Arbeit über Wirkung statt Aufwand erklären.

Warum ist das für Freelancer-Jobs entscheidend?

Wenn Du UX/UI als Beitrag zu Geschäfts- und Markenwirkung erklärst, ändert sich die Diskussion:

• weg von „Wie viele Screens?“
• hin zu „Welche Hürden verhindern Zielerreichung, Conversion, Vertrauen, Wiederkauf?“

Du positionierst Dich damit als jemand, der Ergebnisse ermöglicht: Verständlichkeit, Orientierung, Reibungsfreiheit, Vertrauen, Differenzierung und Konsistenz.

Die Bezeichnungen Interfacedesign, UX-Design und UI-Design sind historisch gewachsen

Sie werden im Verlauf dieses Artikels näher erläutert. Vorab sei aber schon erwähnt, dass UX- und UI-Design aus „Interfacedesign“ hervor gingen, um diesen Design-Bereich konkreter zu spezifizieren und zwischen einem eher analytisch/strategischen Part, dem User Experience Design (UX) und dem eher gestalterischen Part, dem User Interface Design (UI) zu differenzieren.

Interfacedesign umschreibt vordergründig die Gestaltung von Benutzeroberflächen jeglicher Art (physisch/digital). Beim Interfacedesign geht es um das Antizipieren von Verhaltensformen und -bedürfnissen und den Erwartungen, die ein Anwender an ein Produkt bzw. an eine Dienstleistung richtet. Das Interfacedesign definiert, steuert und ermöglicht den Dialog und die Dialogfähigkeit zwischen Mensch und Produkt bzw. zwischen Sender und Empfänger. Dies gilt für physische wie digitale Produkte gleichermaßen. 

Ein Interface ist die Grundlage, sogar die Voraussetzung für Interaktion. Weshalb es unmöglich ist, einen Gebrauchsgegenstand bzw. ein Produkt- bzw. Dienstleistung zu finden, die nicht über ein Interface verfügen. Seit Anbeginn der Menschheitsgeschichte, seit der Verwendung von Gegenständen und Werkzeugen stellt sich die Frage, ob es sich um ein gutes oder weniger gutes Interfacedesign handelt, ob die Interaktion mit Hindernissen oder möglichst reibungslos stattfinden kann. Den Experten für Ergonomie und den entsprechend geschulten Produktdesignern ist dies schon immer bewusst. Ins allgemeine Bewusstsein kam die Relevanz von Interface als Disziplin für die Design-Branche aber erst im Kontext der Computer-Technologie und der allgemeinen Digitalisierung.

Die Forschung zur Computer-Benutzer-Interaktion wird als Human-Computer-Interaction (HCI) bezeichnet. Der Begriff wurde erstmals Mitte der 70er, Anfang der 80er Jahre des vorherigen Jahrhunderts unter Informatikern und Usability-Experten verwendet und unterschied zwischen Computern als komplexem Werkzeug und anderen einfachen Werkzeugen wie einer Axt oder einer Zange. 

Auch alltägliche Produkte haben ein Interface (ein Griff zeigt, wie er zu greifen ist; ein Flaschenverschluss hat Rillen, damit der Reibschluss besser klappt, aber auch, um zu zeigen, dass er aufzudrehen ist etc.). 

Interfaces und Interaktionen sind alltäglich. Je nach Komplexität wird es allerdings erforderlicher, aber auch anspruchsvoller, deutlich zu machen, wofür ein Produkt überhaupt existiert und wie man mit seinen Funktions-Angeboten umgehen sollte (z.B. ein Fahrkartenautomat sollte als solcher identifizierbar sein und das Bedienfeld die erforderlichen Informationen zur Zug-Verbindung und Auswahl der passenden Tickets schnell ermöglichen).

Das Design von Interfaces hilft, ein alltägliches Verständnis so zu übertragen, so dass auch komplizierte Funktionen und Handlungsweisen nachvollziehbar werden. Ein Nutzer spricht dann von einem intuitiv nutzbaren Interface, wenn er für die korrekte Anwendung nicht lange nachdenken und ausprobieren musste. 

Oft wird Interaktion und somit auch das Interface selbst nur in Bezug auf digitale Medien diskutiert und wahrgenommen, obwohl Interaktion nicht nur dort, sondern im Sinne der Übersetzung von ›interaction‹ als ›Beziehung‹, als ›Beziehen auf‹ oder als ›Beziehung mit‹ ausnahmslos mit jedem Produkt bzw. zwischen jeder Form von Sender und Empfänger stattfindet.

Das Interface kommuniziert stets den Kontext. Objekt wie Subjekt erhalten ihren Sinn erst im Zusammenhang mit einer konkreten Aufgabe, die wiederum durch das Interface als Dialogoberfläche kommuniziert wird. Weshalb beim Design von Interfaces analytisch/strategische Aspekte, wirtschaftliche, aber auch die Gestaltung ästhetischer Artefakte in Kombination zum tragen kommen. Daher ist es auch so wichtig, zwischen UX- und UI-Design zu differenzieren, diese Design-Disziplinen aber auch zu kombinieren.

Mit UX-/UI-Design wird sichergestellt, dass die Absicht eines Produktes verstanden wird (z.B. ein Automat zum Verkaufen von Fahrkarten), aber auch die Funktion damit (z.B. wie man ein Ticket für eine bestimmte Fahrstrecke erhält). Nicht zuletzt deswegen ist es so wichtig, dass eine Design-Ausbildung mehr bietet, als nur das Erstellen ästhetischer Artefakte, insbesondere dann, wenn einem bewusst ist, dass mit Design die Marken-Strategie (Branding Experience Design) möglich und sichtbar wird und mit einer Marken-Strategie die Geschäftsziele von Unternehmen bestimmt und mit höherer Wahrscheinlichkeit erreicht werden.

UX-/UI-Design zum Erreichen der Geschäftsziele

Ein Interface spielt nicht nur im Design, sondern auch für das Erreichen der Geschäftsziele und beim Marketing eine elementare Rolle. Es vermittelt nicht nur zwischen Mensch und Produkt, sondern auch zwischen Subjekten (z.B. Kunde und Unternehmen). 

Ob ein Produkt bzw. eine Dienstleistung verstanden wird, hängt in erster Linie vom UX-/UI-Design ab, von der Art, ob und wie ein Dialog zwischen Nutzer und Produkt möglich wird. Das Image eines Unternehmens hängt entscheidend davon ab, ob Kunden das Erleben mit dem Produkt als positiv bewerten und ob es für sie eventuell sogar zum Erlebnis wird. Die Identifikation mit einem Produkt hängt nicht unwesentlich von der Güte des UX-/UI-Design ab. 

Um genau zu identifizieren, welche Probleme für die Nutzer/Kunden eines Produktes zu klären sind und um somit die Geschäftsziele des Auftraggebers zu erreichen, werden zuvor die Methoden des Service Design Thinking (SDT) angewandt. UX-/UI-Design ist innerhalb dieses agilen Design Prozesses sowohl Teil des Prozesses, als auch ein operativer Umsetzungs-Anteil auf Basis der Erkenntnisse, die sich aus den Methoden des Service Design Thinking ergeben.

Das Interface eines Unternehmens (Erscheinungsbild & UX-/UI-Design seiner Produkte) wird zu seinem Image und ist sowohl Corporate Identity, als auch Branding und somit DAS prägende Element, das es per Marken-Strategie (Branding Experience Design) zu bilden und zu stützen gilt. Es prägt die Sicht des Verbrauchers auf das Unternehmen und somit auf die Wertigkeit seiner Produkte.

UX-/UI-Design ist die Gestaltung von Produkterfahrung. 

Jedes Produkt, egal welcher Art, ob physisch, digital, Hard- oder Software, hat ein Interface. UX-/UI-Design ist das, was ein Produkt erfahrbar macht, im Positiven wie im Negativen. Nicht die subjektive Absicht eines Unternehmens bestimmt darüber, ob ein Produkt erfolgreich in einen Markt eingeführt werden kann, sondern das, was beim Benutzen erkannt werden konnte. Und mit Service Design Thinking (SDT) wird ermittelt, worin der Bedarf liegt bzw. was das Problem ist, um eine validierte Lösung zu finden. Als Teil dieses Design-Prozesses und auf Basis der SDT-Analysen wird durch das UX-/UI-Design sichergestellt, dass die Absichten eines Produktes bzw. Unternehmens auch erkannt werden.

»Der Hörer, nicht der Sprecher, bestimmt die Bedeutung einer Aussage.«

Heinz von Foerster

Interfaces werden im Idealfall durch UX-/UI-Design zu Erlebnisumgebungen und tragen wesentlich dazu bei, dass ein Produkt und sein Interaktions-Angebot vom Anwender als ein am Menschen orientiertes System wahrgenommen wird. Vom UX-/UI-Design hängt demnach ab, ob die Marketing-Aussagen erfüllt werden und ob die Marken-Strategie aufgeht.

Orchestriert werden all diese Herangehensweisen mit den Methoden des Service Design Thinking. 

Service Design verfolgt einen holistischen Ansatz und berücksichtigt die gesamte Service-Ökonomie, einschließlich der Touchpoints, Stakeholder, Customer Journey, User Story Maps etc., um bestehende Dienstleistungen zu verbessern oder neue auf multidisziplinäre Weise zu schaffen. 

Ziel ist es, einen möglichst hohen Grad an Kunden-Zufriedenheit zu erreichen.

„Kunden kaufen Erlebnisse, keine Produkte.

Es gibt auch Situationen, in denen alle funktionalen Erfordernisse bereits im Service Design Thinking Prozess geklärt werden konnten. Wenn man weiß, was man erstellen möchte und wie es für Benutzer funktioniert, benötigen man keinen UX-Designer mehr, da die Benutzer-Erfahrung und -Erlebnis bereits definiert wurden.

Der UX Designer ist nicht, wie gelegentlich behauptet wird der „Anwalt“ der Nutzer. Ein guter UX-Designer zu sein, bedeutet, alle Beteiligten des Umsetzungsprozesses (UI-Designer, Grafiker, Informatiker etc.) zu befähigen, ein kundenzentriertes Ergebnis zu schaffen, mit dem die Geschäftsziele des Auftraggebers/Unternehmens erreicht werden.

UX – UI – CX – BX – Berufsbezeichnungen – für Designer (Kreative, Developer, Freelancer)

Da sich das Design von Interfaces als Disziplin über die Jahrzehnte immer weiter entwickelte, bildeten sich Spezialisierungen heraus. Zu Anfang gab es die Berufsbezeichnung „Interfacedesigner“. Waren Interfacedesigner zunächst nur eine Berufsgruppe, die wie alle Gestalter ästhetisierte Artefakte erzeugten (spezialisiert auf Software-Design und Websites-Design), erkannten einige Akteure bereits sehr früh, dass es beim Design von Interfaces zunächst weniger um Gestaltung, sondern um Struktur, um Orientierung in einem System, um das Führen von Benutzern durch ein System und das Ermöglichen von Zufriedenheit beim Benutzen eines Produktes bzw. einer Dienstleistung geht. 

Interfaces befinden sich seit der Industrialisierung in immer mehr Maschinen und Produkten, an Haushaltsgeräten, Medien-Equipment, Computern, PKWs, Software, Internet-Angeboten, Smartphone-Apps etc.

Es kamen Berufsbezeichnungen wie Informationsarchitekt, Informationsdesigner, Graphic-User-Interface-Designer und viele weitere auf. 

Letztendlich etablierten sich im Kontext des Design von Interfaces die 4 folgenden Design-Berufszweige für Freelancer, Angestellte und Design-Agenturen:

• UX = User Experience Design
• UI = Erstellung von Interface-Artefakte
• CX = Customer (Experience) Centricity
• BX = Branding Experience Design

Immer mehr Funktionen gehen direkt auf die Bedürfnisse der Nutzer ein und lassen das Benutzen als Erlebnis wirken. Der Begriff „Interfacedesign“ kann dieses Erleben am und das Erlebnis mit dem Produkt nicht hinreichend zum Ausdruck bringen. Zudem wird „Interfacedesign“ in der Wahrnehmung zunächst mit Software und Betriebssystemen in Verbindung gebracht.

Bezeichnungen wie User-Interface-Design (UI) und User-Experience-Design (UX) kommen der eigentlichen Absicht deutlich näher.

Die Abkürzungen UX und UI haben sich längst etabliert.

Servicedesign Thinking ist holistisch und umfasst u.a. UI, UX und CX. Dies gilt für physische und digitale Produkte bzw. Dienstleistungen. Benannt sind horizontal die Spezialisierungen und vertikal die generalistischen Design-Berufs-Sparten.

User-Experience-Design (UX)

Beim User-Experience-Design (UX) handelt es sich um das Design und die Implementierung eines einzelnen Touchpoints. Touchpoints sind die möglichen Kontaktpunkte von Kunden mit Details eines Produktes bzw. einer Dienstleistung. Ein Touchpoint bedeutet stets eine Berührungsaufnahme mit dem Corporate und dem Marken-Versprechen des jeweiligen Unternehmens. Ziel ist es, einen Touchpoint für den Kunden so zu gestalten, dass die Interaktion angenehm und einfach ist und zum Werbe- bzw. Marketing-Versprechen und der jeweiligen Marken-Strategie passt. UX-Designer befassen sich im Gegensatz zu den UI-Designern sowohl mit den Interfaces von physischen, als auch digitalen Produkten. UI-Designer befassen sich ausschließlich mit digitalen Produkten.

UX-Aufgaben:

• Strategie und Inhalt:
  Wettbewerbsanalyse
  Kundenanalyse und Nutzerforschung
  Produktstruktur und Strategie
  Inhaltsentwicklung
• Wireframing und Prototyping:
  Wireframing
  Prototyp entwickeln
  Testen und Iteration
  Entwicklungsplanung
• Ausführung und Analyse
  Koordination mit UI-Designern
  Abstimmung mit Entwicklern
  Verfolgung von Zielen und Integration
  UX-Analyse und Iteration

UX-Designer sind sowohl Designer, aber auch Vermarkter und Projektmanager. Hier besteht insbesondere für Freelancer eine große Chance, als Berater wahrgenommen zu werden.

User-Interface-Design (UI)

Beim User-Interface-Design (UI) steht das optische Erscheinungsbild einer Website oder App im Vordergrund. Es geht um alle visuellen, interaktiven Elemente einer digitalen Produktoberfläche, einschließlich Schaltflächen, Symbole, Abstände, Typografie, Layout und Farbschema. Das UI-Design stellt sicher, dass die Stärken und visuellen Vorzüge der Marke auf die Benutzeroberfläche eines Produkts übertragen werden und das das Design konsistent und ästhetisch ansprechend ist. 

Da sich UX und UI zwar von den Aufgaben, aber nicht von den Zusammenhängen trennen lassen, ist es für UX-Designer hilfreich, auch UI zu beherrschen, das UI aber in der Regel an UI-Designer zu delegieren und deren Umsetzung zu führen.

UI-Aufgaben:

• Das Aussehen des digitalen Produkts:
  Kundenanalyse (in Kooperation mit UX)
  Design-Forschung (in Kooperation mit UX)
  Branding und grafische Entwicklung
  Styleguide-Erstellung
• Interaktivität:
  UI-Prototyping
  Interaktivität und Animation
  Anpassung an alle Gerätebildschirmgrößen
  Umsetzung mit Entwicklern

Branding Experience Design (BX)

Die Bezeichnung Branding Experience Design (BX) ist die englische Bezeichnung für Markenerlebnis und demnach auch für die Strategie, die dahinter steckt = Marken-Strategie. Ein Markenerlebnis entsteht durch vielfältige Interaktionen mit einem Produkt, bei Marken-Events, durch Werbung und durch weitere Interaktionen mit einer Marke. Es geht um die Beziehung, die ein Kunde zu einer Marke aufbauen kann – unter Verwendung all seiner Sinne (Berühren, Schmecken, Riechen, Hören, Sehen).

Für Unternehmen ist zu beachten, sich nicht nur auf das Branding ihrer Produkte zu konzentrieren, sondern auch auf ihr Image, das sich insbesondere durch Interaktionen z.B. mit Mitarbeiter ergibt oder durch die Art und Weise, wie ein Kunde digital und persönlich mit einer Marke interagiert. Letztendlich ist alles, was zwischen Kunde und den Repräsentationen eines Unternehmens stattfindet, Interfaces, die als Dialogoberfläche dienen können – oder eben nicht. Repräsentationen eines Unternehmens können Werbung sein, aber auch der Call-Center der Kundenbetreuung, die Social Media Kanäle, die Website, das jeweilige Produkt und vieles mehr.

Ein Markenerlebnis findet positiv wie negativ an zahlreichen Touchpoints statt:

• Im Moment des Produkt-Kaufs
• Durch die Produktverpackung
• Durch den Kundendienst
• Beim Betreten eines Ladenlokals
• Beim Interagieren mit einem Produkt auf einer Website
• Beim Betrachten einer Werbung
• etc.

Interessenten und Kunden können ein Markenerlebnis sowohl durch stationäre Ladenlokale, als auch durch Social Media, Websites oder Apps kennen lernen. Unternehmen sind gut beraten, das Branding Experience Design nicht zu vernachlässigen, um sicherzustellen, dass Interessenten persönlich und online das beste Erlebnis erhalten, um zu Käufern und anschließend zu zufriedenen Kunden zu werden, die gerne wiederkommen.

Branding Experience – BX versus Customer Experience – CX

Wichtig zu erwähnen ist, dass ein Markenerlebnis (Branding Experience – BX) und ein Benutzererlebnis (Customer Experience – CX) zwar verwandte Konzepte sind, sich aber dennoch unterscheiden.

Das Markenerlebnis umfasst alles, was mit der Reaktion eines Benutzers/Kunden auf eine Marke zu tun hat. Es handelt sich um den Gesamteindruck, den eine Person aufgrund der Summe aller Gefühle, Gedanken, Vorstellungen und Reaktionen ansammelt, während sie über die jeweilige Marke, über deren Marketing und und das Produkt an sich nachdenkt. Es ist eine Ansammlung zahlreicher Assoziationen, die sich nicht nur auf einen Moment eines Erlebnisses bezieht, sondern die teilweise über Jahre oder Jahrzehnte angesammelt werden konnten (z.B. Tempo-Taschentücher und der Umstand, dass alle Papiertaschentücher so genannt werden; Tesla wird mit Innovation und Ökologie in Verbindung gebracht, Ferrari mit Reichtum und Sportlichkeit etc.).

Ein Benutzererlebnis (Customer Experience – CX) bezieht sich hingegen ausschließlich auf das Endergebnis eines Erlebnisses, nachdem ein Produkt bzw. eine Dienstleistung verwendet wurde (z.B. Interaktion mit einer App, Erlebnis im Interieur eines Fahrzeuges, Fahr- und Geräusch-Erlebnis beim Beschleunigen etc.).

Beide Konzepte wirken Hand in Hand miteinander.

Wenn ein Interessent/Kunde z.B. ein positives Erlebnis mit dem ersten Benutzen eines Produktes oder einer Dienstleistung erfährt und dadurch die Absichten des Customer Experience Design erfüllt würden, könnte dies der Anfang einer lang anhaltenden Zufriedenheit werden. Dieses erste positive Erlebnis könnte sich auf den Gesamteindruck bezüglich der Marke auswirken, wodurch sich das langfristig angelegte Branding Experience Design (BX) auf Basis des CX entfalten könnte.

Customer Experience Design (CX)

Der Begriff Customer Experience Design (CX) trifft mit der direkten Übersetzung „Kundenerlebnis“ nur unzureichend den Kern des Konzepts. Erlebnisse sind einzigartig und persönlich und umfassen sowohl Sinneswahrnehmungen als auch emotionale Reaktionen. Der Begriff „Erfahrung“ impliziert eine Ebene des Verstehens und Verständnisses. Wenn man von CX oder Kundenerfahrung spricht, ist es wichtig, die individuelle Natur jedes Erlebnisses anzuerkennen, das zur gesamten Customer Journey beiträgt, um diese überhaupt zum Erlebnis werden zu lassen. 

Bei der Entwicklung von Produkten ist stets zu unterscheiden zwischen Interessenten an einem Produkt, Nutzern, Käufern und Kunden. So sind z.B. Eltern, die ihrem Kleinkind über das Bett ein Mobile hängen, zwar Käufer, aber nicht die direkten Nutzer des Produktes. Nutzer sind nicht zwangsläufig Käufer. 

Die Geschäftsziele eines Unternehmens bestehen in erster Linie darin, neue Käufer zu generieren und Käufer zu dauerhaft zufriedenen Kunden zu machen, die gerne wieder kaufen. 

Dafür benötigen Unternehmen Unterstützung. 

Die Absicht von Produktdesignern besteht darin, Unternehmen darin zu unterstützen, ihre Geschäftsziele zu erreichen. Produktdesignern erreichen dies dadurch, indem sie  ihren Auftraggebern mit Hilfe von z.B. Branding, Corporate Design und User Experience Design optimierte Produkte und Dienstleistungen erstellen, die über vorteilhafte Eigenschaften verfügen und dadurch für Unterscheidbarkeit am Markt sorgen. Im Idealfall werden auf diesem Entwicklungsweg nicht nur Ideen, sondern auch Innovationen möglich. 

Um diese Absicht deutlich zum Ausdruck zu bringen, etablierte sich die Spezialisierung Customer Experience. 

Als Produktdesigner ist es entscheidend, CX mit Ernsthaftigkeit und Liebe zum Detail anzugehen, um ein erfolgreiches Ergebnis zu gewährleisten. Nicht jeder Designer wird sich in einer solch präzisen, wissenschaftlichen Auseinandersetzung wiederfinden, weshalb es nachvollziehbar ist, dass es für Customer Experience Design entsprechend spezialisierte Produktdesigner gibt.

Trage Dich kostenlos und unverbindlich in die Life & Business Design – Info-Community ein, damit Du erfährst, wie Du als Designer (Kreative, Developer, Freelancer) mit den Themen UX, UI und Service Design Thinking ein für Dich passendes Business schaffst.
„Business durch Design“ und „Design als Business“.

Hole Dir die Inspirationen für Deine Zeit-Freiheit – für Deinen Weg zur persönlichen Unabhängigkeit mit Deinem eigenen (Online-)Business.
Ich helfe Dir, Dich selber und Dein Business aufzubauen, damit Du ein selbstbestimmtes Leben und ein profitables Business führst – als Designer (Kreative, Developer, Marketer, Freelancer).

Hinweise zum Email-Versand und weitere DSGVO-bedingte Details erfährst Du in der Datenschutzerklärung.

UX-UI – Design-Beispiele

sk8live – UX-UI – Julian Hofmann

Wireframe – Beispiele

Wireframe – App-Design

UX und UI im Kontext von Service Design Thinking (SDT)

Service Design Thinking ist ein holistischer Ansatz, bei dem alle Aspekte bei der Planung und Umsetzung von Produkten bzw. Dienstleistungen betrachtet und zusammengeführt werden, um ein möglichst perfektes Kunden-Erlebnis zu ermöglichen. UX- und UI-Design sind Teil dieser holistischen Betrachtung, weshalb deren Absichten hier spezifisch zum Service Design Thinking und ergänzend zum obigen Textabschnitt erläutert werden (siehe meine Artikel über den Service Design Thinking Workshop und Was ist Service Design Thinking).

UX-Design konzentriert sich auf die Schaffung einer nahtlosen und sinnvollen Benutzererfahrung, damit das Bedienen eines Produktes oder das Benutzen einer Dienstleistung möglichst keine Herausforderung darstellt, sondern im Idealfall zum Erlebnis wird. 

UX-Designer erstellen ihre Ergebnisse entweder auf Basis der Erkenntnisse, die bereits aus den Analysen des Service Design Thinking Prozess resultierten, oder sie sind (im Gegensatz zu UI-Designer) bereits zu Anfang Teil des Service Design Thinking Prozesses, insbesondere beim Service Blueprint bei den User Story Maps, Customer Journeys und beim Prototyping (Wireframe, Flowchart). 

Die Aufgaben der UI-Designer finden im letzten Teil des Service Design Thinking Prozesses, beim Umsetzungs-Prozess statt – auf Basis der Erkenntnisse aus dem Service Design Thinking Prozesses.

Während der UX-Designer Interfaces sowohl für physisch anfassbare, als auch für digitale Produkte entwickelt, so kommen UI-Designer in erster Linie bei digitalen Produkten zum Einsatz. Das UI-Design konzentriert sich dabei auf die visuellen, interaktiven Elemente eines digitalen Produkts, um ästhetisch ansprechende Interfaces zu schaffen.

UX und UI in der Automobil-Branche – Automotive UX

Bei nahezu allen Automobil-Herstellern steht User-Experience-Design (UX) im Vordergrund. Die Verschmelzung von physischem und digitalem Fahren durch Elektrifizierung, Konnektivität und selbstfahrende Technologie soll zu beispiellosen Benutzererlebnissen führen.

Das Bedürfnis nach noch mehr Sicherheit, Bequemlichkeit und Erlebnis führt zu immer mehr Funktionen, deren Steuerung so leicht wie möglich durchführbar sein soll (z.B. Ermüdungserkennung, System zur Überwachung des toten Winkels, Park-Assistent, Infotainmentsystem, KI-Assistent etc.).

Die Automobilindustrie folgt dem Trend des Automotive UX. Die Bereitstellung einer außergewöhnlichen UX hat für führende Automobilhersteller höchste Priorität. UX ist längst kein Alleinstellungsmerkmal mehr, sondern ein „must have“ in der modernen Automobilindustrie, das auf die breite Masse ausgerichtet sein muss.

Eines der bekanntesten Infotainmentsysteme für PKWs ist das iDrive. Es wurde 1999 zum ersten Mal im Konzeptfahrzeug BMW Z9 auf der IAA präsentiert. 

Wichtig dabei ist, dass das Ökosystem sicher und die Konnektivität nahtlos ist, damit das Erlebnis nicht auf bestimmte Produkte beschränkt bleibt. Bei dem Ökosystem geht es darum, dass eine ganze Reihe von Technologien zusammen wirken, neue Erlebnisse ermöglichen und dadurch mehr als die Summe ihrer Teile sind.

Ein User-Experience-Design (UX) ist insbesondere dann gelungen, wenn vom Fahrer übersehen wird, dass UX die Hauptkomponente für die Bereitstellung dieser Funktionen ist.

Nahezu alle Automobilhersteller setzen auf ein eigenes User-Interface in der Infotainment Unit. Sie verfügen alle über eine eigene Forschungs- und Entwicklungsabteilung, die an eigener Software arbeiten, die Dank UX-Design Interfaces bieten, die die Kunden bei ihrer interaktiven Reise unterstützen. 

Mängel zeigen sich allerdings immer dann, wenn Automobilhersteller und andere Unternehmen bei ihrem User Experience Design Usability-Prinzipien missachten. Dies geschieht immer dann, wenn es an geeigneten Entwicklungs-Methoden fehlt bzw. Zeit eingespart werden soll, anstatt z.B. die Methoden des Service Design Thinking zu nutzen, um festzustellen, was überhaupt die Probleme sind, worin eine optimierte Customer Centricity besteht und wie man sie lösen kann. 

Selten entwerfen UX-Designer etwas von Grund auf neu, wenn doch, geben die Analyse-Ergebnisse des Service Design Thinking klare Empfehlungen, was genau entwickelt werden sollte und wie ein neues Produkt bzw. ein Minimum Viable Product (MVP) schrittweise umzusetzen wäre.

Das Ziel sollte darin bestehen, ein sicheres, benutzerfreundliches und angenehmes Erlebnis zu schaffen und das gesamte Erlebnis so zu gestalten, dass es nahtlos, personalisiert und dem Bedarf angemessen ist, aber auch in das Produkt integriert werden kann.

UX-Designer befassen sich mit der Gestaltung der Interaktionen zwischen Benutzern und Technologie, basierend auf einem Verständnis über Bedürfnisse, Kontexte, Herausforderungen und der Ziele der Benutzer. Werden diese Aspekte erfüllt, erhöht sich deutlich die Wahrscheinlichkeit, die Geschäftsziele des Auftraggebers zu erreichen. Genau dafür werden Produktdesigner mit UX-, UI- und SDT-Kompetenzen gebucht – Ziele zu validieren, zu ermöglichen und zu erreichen.

Historische Entwicklung von Interfaces – UX – UI

Die historische Entwicklung zeigt, dass Interfacedesign zu Anfang in erster Linie im Kontext von Software und Computern gesehen wurde. Dennoch startet die historische Auflistung mit dem ersten Warenautomat. Wie jedes bedienbare Gerät hat auch dieser ein Interface und benötigt ein Interfacedesign, um die Bedienung in gewünschter Weise und möglichst bequem anzubieten.

• 1887 
  stellte die Firma Stollwerk ihre ersten Verkaufsautomaten in Deutschland auf. Alleine im Jahr 1890 verkaufte das Unternehmen 18 Millionen Tafeln Schokolade über seine Warenautomaten.
• 1902
  Mit den Automaten der Firma Stollwerk begann die Erfolgsgeschichte der Warenautomaten. Von Zigaretten und Kaugummis über Taschentücher und Blumensträuße bis hin zu bunten Illustrierten.
  Diese Entwicklung fand ihren Höhepunkt im ersten Automatenrestaurant, das 1902 in Philadelphia eröffnete. Dieses ermöglichte es, den Gästen ganz ohne den Einsatz von Personal Mahlzeiten anzubieten.
• 1945
  Vannevar Bushs veröffentlichte den Artikel „ As We May Think“.
  Bush fing an, über Ideen einer Technologie nachzudenken, die nicht nur die physischen Kräfte des Menschen, sondern auch die Stärke des menschlichen Geistes vorantreiben würde. Er formulierte die Idee von „Memex“, eine Art Computer und somit ein Interface, dass über das Taktile hinausgeht:
  „Stellen Sie sich ein zukünftiges Gerät für den individuellen Gebrauch vor, bei dem es sich um eine Art mechanisierte private Akte und Bibliothek handelt. Ein Gerät, in dem eine Person alle ihre Bücher, Aufzeichnungen und Mitteilungen speichert und das so mechanisiert ist, dass es mit äußerster Geschwindigkeit und Flexibilität konsultiert werden kann. Es ist eine erweiterte intime Ergänzung zu seinem Gedächtnis.“
• 1955
  Henry Dreyfuss war ein amerikanischer Industriedesigner und Autor des Buches „Designing for People“. Er beschrieb seine Vorstellung der Ideen, wie Menschen und Maschinen ideal zusammen wirken. Er hatte die Vorstellung, nicht den Menschen an Maschinen, sondern Maschinen an den Menschen anzupassen. Zusammen mit Alvin R. Tilley prägte Dreyfuss eine neue Sichtweise auf die Beziehung des Menschen zur Technologie. Dreyfuss‘ Veröffentlichungen und Tilleys Zeichnungen führten zur Entstehung der „Universal Design Movement“ und des „Humanscale Project“. Beide befassten sich somit zum ersten mal mit Ergonomie. Sie begannen den den Raum, in dem sich Mensch und Maschine treffen, als „Schnittstelle“ zu beschreiben. Der Beginn des Interfacedesign.
• 1968
  Douglas Engelbart erfand die erste Computer-Maus als taktiles Interface zwischen Mensch und Computer. Er stieß auf Vannevar Bushs Artikel „As We May Think“ und ließ sich dadurch zur Computer-Maus inspirieren. Die Maus ermöglicht es Benutzern einen Cursor zu führen und Funktionen an einem Computer auszulösen, ohne programmieren zu müssen. Seitdem können Nutzer mit einem Computer-Interface einen Dialog führen.
• 1973: 
  Das Palo Alto Research Center (PARC) von Xerox stellt das erste GUI (Graphic User Interface) vor. Xerox gründete das Palo Alto Research Center (PARC), um neue Computertechnologie zu entwickeln. Hier entwickelten und bauten 1973 führende Wissenschaftler den Xerox Alto, die erste grafische Benutzeroberfläche (GUI). Es fand dafür die Computermaus von Douglas Engelbart Anwendung. Es war der erste Schritt zum WYSIWYG-Stil gemacht (What You See Is What You Get).
  Die damalige Führung von Xerox hatte weder die Vision noch das Verständnis dafür, wie bahnbrechend diese Technologie sein würde. Für 1 Millionen $ verkauften sie diese  GUI-Idee an Steve Jobs, der diese Innovation zu schätzen wusste. 
• 1979
  Bill Moggridge stellt den Prototypen des ersten Laptop-Computers her, nachdem er von der GRiD Systems Corporation den Auftrag erhielt, einen tragbaren Computers zu entwickeln. Moggridge war später Mitbegründer der Design- und Innovations-Agentur IDEO.
• 1981
  Der IBM PC, der erste Personal Computer kam heraus. Der IBM-PC nutzte das MS-DOS-Betriebssystem von Microsoft. Eines der meist genutzten Betriebssystem-Interfaces.
• 1984
  Steve Jobs stellte den Macintosh (OS System 1.0) vor. Macintosh veränderte durch sein Interfacedesign die Art und Weise, wie Menschen über Personalcomputer dachten. Der Macintosh ist eine Icon eines Interfaces, dass das Versprechen, mit den Nutzern in Dialog zu treten, einlöste.
• 1995
  Don Norman schuf während seiner Zeit bei Apple die erste Stelle als „User Experience Architect“. Norman betonte die Notwendigkeit eines mensch-orientierten Design. Norman beschrieb als einer der ersten die Relevanz von Benutzererfahrung und wie wichtig es ist, bei der Produktentwicklung den Fokus auf den Nutzer zu richten:
  „Es ist die Art und Weise, wie Sie die Welt erleben, es ist die Art und Weise, wie Sie Ihr Leben erleben, es ist die Art und Weise, wie Sie Service erleben.“
• 1999
  iDrive wurde zum ersten Mal im Konzeptfahrzeug BMW Z9 auf der IAA präsentiert. Es ist das Bedienkonzept des Infotainmentsystems von BMW. Es basiert auf dem Multimediasystem der (ehemaligen) CAA AG.
• 2001:
  Apple und Microsoft veröffentlichten ihre neuen Betriebssystem-Upgrades: Apples Mac OSX und Microsofts Windows XP. Diese Betriebssystem bilden die Grundlage des Interfacedesign für alle nachfolgenden Betriebssysteme.
• 2007
  Einführung des iPhone als das erste Smartphone.
  Die Bedienung bzw. das Interfacedesign wurde um Wischgesten erweitert und die große Menge an Möglichkeiten und Funktionen auf einzelne Apps und deren eigenen Interfaces herunter gebrochen.
• 2011
  Smart Cars: Smartphones auf Rädern
  Toyota-Präsident Akio Toyoda stellt im Zusammenhang mit dem Toyota Concept Car auf der Tokyo Show erstmals fest, dass sich Fahrzeuge zunehmend zu Smartphones auf Rädern entwickeln (Smart Cars). Er wollte damit die erweiterte Konnektivität, Benutzerfreundlichkeit und Anpassbarkeit hervorheben (https://www.autoweek.com/racing/nhra/a1979876/toyota-unveils-smartphone-wheels-concept-car-tokyo-show/).
• 2015
  wiederholte der Daimler-Chef Dieter Zetsche die Feststellung, dass PKWs zunehmend zu Smart Cars – Smartphones auf Rädern würden („…das Auto werde zum Smartphone auf Rädern“ https://www.bbc.com/news/av/business-30786714).
  Viele wichtige Meilensteine ​​in der Smartphone-Evolution wurden ca. 3-5 Jahre später von Fahrzeugen erreicht. Es gibt dabei drei Gemeinsamkeiten, die für das Smartphone gleichermaßen, wie für das Automobil und für sehr viele weitere Produkte gelten:
  – Benutzerfreundlichkeit und Kundeninteraktion
  – App-Angebote & Betriebssystem 
  – Innovation und Aktualisierbarkeit
• > 2023 – Zukunft – Die zunehmende Redundanz von Interfaces im Betrieb von Fahrzeugen. Autonomes Fahren erfordert aktuell noch Interfaces, da es sich in der Regel um ein autonomes Fahren unter Beobachtung der Fahrer handelt. Wenn Fahrzeuge tatsächlich autonom fahren, werden optische und insbesondere physische Interfaces zunehmend redundant. Man wird eventuell auf Sound-Interfaces ausweichen. Googles autonom fahrende Fahrzeuge (Waymo, seit 2011 in Entwicklung) verfügen z.B. schon gar nicht mehr über ein Lenkrad (eines der wichtigsten, vielleicht auch das am einfachsten zu bedienende Interfaces im Fahrzeug). Sobald es zu einem tatsächlich autonomen Fahren kommt, wird es zum aktiven fahren eventuell deutlich weniger Interfaces geben, da Fahrer und Insassen nun Zeit hätten, würden Fahrzeuge gänzlich zum „Smartphone auf Rädern“. Weil dann gilt es, das Car-Entertainment-Angebot entsprechend vielseitig zu gestalten und dafür passende Interfaces anzubieten.

Trage Dich kostenlos und unverbindlich in die Life & Business Design – Info-Community ein, damit Du erfährst, wie Du als Designer (Kreative, Developer, Freelancer) mit den Themen UX, UI und Service Design Thinking ein für Dich passendes Business schaffst.
„Business durch Design“ und „Design als Business“.

Hole Dir die Inspirationen für Deine Zeit-Freiheit – für Deinen Weg zur persönlichen Unabhängigkeit mit Deinem eigenen (Online-)Business.
Ich helfe Dir, Dich selber und Dein Business aufzubauen, damit Du ein selbstbestimmtes Leben und ein profitables Business führst – als Designer (Kreative, Developer, Marketer, Freelancer).

Hinweise zum Email-Versand und weitere DSGVO-bedingte Details erfährst Du in der Datenschutzerklärung.

Was ist der Unterschied zwischen UX und UI?

UX steuert Logik, Struktur, Test und Zielerreichung eines Touchpoints; UI übersetzt diese Erkenntnisse in visuelle und interaktive Oberflächelemente und sorgt für Konsistenz.

Ist UX nur „Usability“?

Nein. UX umfasst das gesamte Erleben inklusive Emotionen, Erwartungen und Kontext der Nutzung.

Warum sind CX und BX wichtig?

CX beschreibt das erlebte Ergebnis entlang der Nutzung, BX den langfristigen Marken-Eindruck aus vielen Interaktionen. Beide wirken zusammen.

Folge mir auf Instagram @life.business.design

Folge mir auf LinkedIn

„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.“
Leonardo da Vinci

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.

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 ›Orientierung gestalten, planen und strukturieren‹ und dort unter ›Funktionslayout‹, ›Drehbuch‹ und ›Flowchart‹ und siehe die Kapitel ›Gestaltungslayout‹ und ›Styleguide‹).

Es werden dadurch die Gestaltungsabsicht und das Zusammenwirken folgender Aspekte festgelegt:

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.

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.

Das Zusammenwirken der sechs Gestaltungsaspekte (a) – (f) wirkt sich wie folgt aus:

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)).

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.

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.
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.

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.

Farbschema als Branding-Standard

Definiere ein kleines Farbsystem und halte es konsequent ein. Das reduziert visuelles Rauschen und erhöht Markenabruf.

Farbbedeutung und Kontext

Farbe wirkt nicht isoliert, sondern situationsabhängig. Deshalb brauchst Du Regeln: Wo nutze ich Akzent, wo Fläche, wo Signal, wo Ruhe.

Kontrast und Lesbarkeit als Qualitätskriterium

Kontrast ist nicht nur „schön“, sondern funktional: Lesbarkeit, Ermüdung, Aufmerksamkeit. Der Artikel verweist dafür auch auf den Kontrast-Artikel.

Hier findest Du eine kurze Einführung in das Thema Farbe. Für Dein Corporate Design, für das Bilden einer Marke 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 Online Business nutzt – im Logo, bei den Hintergründen Deiner Video-Calls, im Design Deiner Workbooks und wenn Du die Kapitel Deiner Online Kurse erstellen möchtest.
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.
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.

Wenn Du gleich mehr Sichtbarkeit erreichen und Dein profitables Online Business aufbauen möchtest…

Hol dir den Starter-Fahrplan und erfahre:

✓ Wie Du Deine Marktnische findest
✓ Wie Du ein Kurs-Thema findest, das Deine Kunden lieben
✓ Wie Du Deine eigenen Potenziale erkennst
✓ Wie Du Dein profitables Online-Kurs-Thema findest
✓ 5 Wege, um das Markt-Potenzial Deines Themas zu prüfen

Hole Dir Dein kostenloses Starter-Kit (25-seitiges PDF):
Design Dein Leben & Business mit Online Kurse erstellen.

Der Austausch mit Gleichgesinnten hilft in jedem Fall.

Komme gerne in unsere Facebook-Gruppe Life & Business Design Community.

In der Life & Business Design – Facebook-Gruppe findest Du Gleichgesinnte, mit denen Du Dich in einer gesicherten Umgebung über den Aufbau Deines Online Business und über Online Kurse erstellen austauschen kannst.

„Farbschema & Moodboard – Farbe als Teil des Brandings und der Marken-Bildung“

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 Moodboard 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.
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.
Beispiele für Moodboards:

Sobald ein Benutzerprofil und ein Moodboard erstellt wurden, hast Du die erforderlichen Anhaltspunkte, um ein geeignetes individuelles Farbschema erstellen zu können. Fü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 Artikel „Kontrast und Farbe für Branding, Marke und Marketing Deines Online Business“ 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 für die eigene Absicht am besten geeignet ist.
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 über die Internetseite von Degraeve eine passende Farbpalette erstellen.

Mit ColorHex 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.

Mit Colorblender von TinEye lassen sich Bilder gezielt nach bestimmten Farben bzw. Farbkombinationen bei Flickr.com finden. Es können bis zu zehn Farben angewählt werden.

Mit dem Adobe Color Wheel 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.

Eine konkrete Fortsetzung – insbesondere hinsichtlich das Thema Online Kurse erstellen für Dein Online Business – findest Du in meinem Artikel „Kontrast und Farbe für Branding, Marke und Marketing Deines Online Business“.

Farbtöne des Spektrums

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.

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.

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.  

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.

Farbkreis nach Harald Küppers

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

Additive Farbmischung

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.
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.
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.
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.

Rasterung bei einem Röhrenmonitor für Computer – allerdings auch bei LED-Monitoren.

Bei LED-Monitore sind die 3 Farben pro Pixel oft im Dreieck angeordnet.

Die Grundfarben der additiven Farbmischung sind die RGB-Farben Rot, Grün und Blau. Sie werden auch Lichtfarben genannt.

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.

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.

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 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.

Subtraktive Farbmischung

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.
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.

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.

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.

Farbraumsysteme

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)).
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.

CIE-Farbsystem.

Mit dem CIE-Farbsystem (Normfarbtafel der Commission Internationale de l’Eclairage; www.cie.co.at) 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.

Farbbedeutung

Je nach kultureller Herkunft werden Farben unterschiedlich interpretiert. Dies ist insbesondere bei Produkten zu berü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 darüber nachgedacht werden, kulturelle Missverständnisse zu vermeiden.

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 Grü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.

Auch ungeachtet der kulturellen und klimatischen Unterschiede ist die Bedeutung einer Farbe nicht immer gleich. Das Grün eines unreifen Pfirsichs wird schließlich anders interpretiert als das Grün eines Parks im sommerlichen Licht. Es ist eben nicht nur die Farbe an sich zu berücksichtigen, sondern auch der Kontext, in dem sie eingesetzt oder wahrgenommen wird.

Farben lösen Emotionen aus und werden auch dazu genutzt, Emotionen zu symbolisieren,
sei es als Farbe in einem Bild oder als Wort in einem Satz.

• Grün hinter den Ohren
• Ins Blaue fahren
• blauäugig
• Gelb vor Neid
• Rot sehen
• Weiße Weste
• Grauer Alltag
• Schwarz ärgern

Farb-Kontrast und Lesbarkeit – Text und Hintergrund

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.

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. Fü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: http://snook.ca/technical/colour_contrast/colour.html

Regeln und Tipps zum Gebrauch von Farbe beim Interfacedesign und z.B. für Online Kurse erstellen als Online Business

1. 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.
2. Ein kontrastreicher Einsatz von Farben sichert eine konturenscharfe Darstellung und z. B. eine gute Lesbarkeit.
3. Die Vordergrundfarbe sollte sich ausreichend vom Hintergrund abheben.
4. Nimmt der Helligkeitskontrast ab, wird die Schrift unleserlicher.
5. Ein Hell-Dunkel-Kontrast ermöglicht insbesondere für Sehschwache eine gute Lesbarkeit von Schrift, Bild und Funktion.
6. Je farbiger ein Text, umso unleserlicher wird er.
7. 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‹).
8. 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.
9. 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 %)
10. 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.
11. 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.
12. Je nach Darstellungsmedium und Intension sollte bedacht werden, ob die Farben auch für einen Schwarz-Weiss-Ausdruck optimiert sein sollten.
13. Farbstandards, kulturell oder geografisch bedingte Definitionen und verschiedene Bedeutungsinterpretationen bestimmter Farben sollten beachtet und respektiert werden.
14. 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.
15. Unterschiede können durch klar unterscheidbare Farben entsprechend betont werden.
16. 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.
17. 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.

Die Fortsetzung – insbesondere hinsichtlich der Themen Online Business und Online Kurse erstellen für Dein Online Business – findest Du in meinem Artikel „Kontrast und Farbe für Branding, Marke und Marketing Deines Online Business“.

Wenn Du gleich mehr Sichtbarkeit erreichen und Dein profitables Online Business aufbauen möchtest…

Hol dir den Starter-Fahrplan und erfahre:

✓ Wie Du Deine Marktnische findest
✓ Wie Du ein Kurs-Thema findest, das Deine Kunden lieben
✓ Wie Du Deine eigenen Potenziale erkennst
✓ Wie Du Dein profitables Online-Kurs-Thema findest
✓ 5 Wege, um das Markt-Potenzial Deines Themas zu prüfen

Hole Dir Dein kostenloses Starter-Kit (25-seitiges PDF):
Design Dein Leben & Business mit Online Kurse erstellen.

Der Austausch mit Gleichgesinnten hilft in jedem Fall.

Komme gerne in unsere Facebook-Gruppe Life & Business Design Community.

In der Life & Business Design – Facebook-Gruppe findest Du Gleichgesinnte, mit denen Du Dich in einer gesicherten Umgebung über den Aufbau Deines Online Business und über Online Kurse erstellen austauschen kannst.

Warum reichen 2–3 Farben oft aus?

Weil Konsistenz wichtiger ist als Vielfalt für Wiedererkennung.

Wo sollten Markenfarben sichtbar sein?

Logo, Unterlagen, Workbooks, Hintergründe, Kursmaterial.

Was ist der häufigste Fehler?

Zu viele Stile und Farblogiken, dadurch keine klare Marke.

Warum ist Kontrast wichtig?

Für Lesbarkeit, Aufmerksamkeit und ergonomische Qualität.

Was ist der nächste Schritt nach der Farbwahl?

Vorlagen bauen (Social, Slides, Workbooks) und konsequent anwenden.

Folge mir auf Instagram @life.business.design

Folge mir auf LinkedIn

Nutzt Du bereits Farbe als Unterscheidungsmerkmal?
Wie wichtig ist Dir Farbe für Dein Branding und Dein Marketing?

Schreib mir in den Kommentaren.