Gestaltung

Von Sarah Pittroff

Einleitung

Webanwendungen sind Kommunikationskanäle, die sich mit einem spezifischen Inhalt an eine mehr oder weniger genau abgrenzbare Nutzergruppe richten. Einen Inhalt an Menschen zu vermitteln bedeutet immer, in Kommunikation mit Ihnen zu treten. Wie der Inhalt vom Empfänger angenommen und rezipiert wird, hängt maßgeblich vom Inhalt ab. Zu guten Teilen aber auch von seiner Darbietung. Man sollte sich vergegenwärtigen, dass es keine Nicht-Kommunikation gibt. Was auch immer Sie veröffentlichen werden, wird wahrgenommen werden. Über das WIE haben Sie mit den Mitteln der Gestaltung großen Einfluss. Der Einfluss bleibt gleichgroß, auch wenn Sie sich wenig Gedanken machen. Nur wird das Ergebnis nicht in Ihrem Sinne sein.

Daher betrachten Sie die folgenden Abhandlungen über die drei für Sie relevanten Felder der Gestaltungsgrundlagen als Einstieg in die weite Welt der Kommunikationsgestaltung, der es Ihnen ermöglichen soll, sich zu vertiefen und mit etwas Übung Ihre Vorstellungen zu visualisieren. Oder aber auch gegebenenfalls mit professionellen Gestaltern gezielter über Ihre Vorstellungen zu sprechen.

Für alle Überlegungen sind immer mehrere Faktoren von Bedeutung: Wie wird der Inhalt charakterisiert, der vermittelt werden soll? Handelt es sich um eine Edition von Schriftstücken aus dem 18. Jahrhundert oder wird eine Webanwendung im Bereich VR geplant? Hiervon hängt sehr wahrscheinlich die vermutete Nutzergruppe ab. Auch sie sollte man sich genau vor Augen führen. Welche Erwartungen werden sie an die Nutzung einer Anwendung oder einer Webseite haben? Welche Gewohnheiten haben sie in der Nutzung von Angeboten im ähnlichen Kontext? Es ist in den seltensten Fällen sinnvoll, Bedienungserfahrungen zu brechen. Kein User möchte sich ausführlich mit der Technik oder der Machart eines Produkts auseinandersetzen, sondern seinen Inhalt erfahren. Muss er sich zu viele Gedanken über die Menüführung oder das Auffinden von Inhalten machen, stößt das in Regel auf Ablehnung. Natürlich gibt es hier viele Ausnahmen, mit denen sie sich dann beschäftigen können, wenn Sie die Regel beherrschen.

Neben der wohlüberlegten Informationsarchitektur helfen gekonnt eingesetzte gestalterische Mittel, Inhalte zu strukturieren und erfolgreich der Nutzergruppe zu kommunizieren. Gestaltung meint hier also nicht grenzenlose Kreativität. Gestaltung meint die richtigen Fragen an Gebiete der Kommunikation zu stellen und sie gut zu beantworten.

Gestalt

Figur-Grund-Beziehung

Wenn wir Elemente jedweder Art wahrnehmen, haben wir sie vorher als autonome Figur identifiziert. Alle Buchstaben, die Sie hier lesen können, sind einzelne Figuren, die sie erkennen, weil sie in einem farblichen Kontrast zu ihrem Untergrund stehen und Ihnen die Bedeutung der Figuren bekannt ist. Wir nehmen hier unmissverständlich die helle Farbe als Grund wahr und die schwarzen Zeichen als Figur. Die menschliche Wahrnehmung entschlüsselt fortwährend, welche Region eines Seheindrucks als Figur und welche als Grund gelten kann. Die Organisation von diesen Elementen findet dabei nur bedingt im Bild statt, vielmehr wird sie durch unsere Wahrnehmung konstruiert. Diese Konstruktion kann aber auch unglücklich verlaufen oder kippen, wenn die Figur im Bild nicht einwandfrei entschlüsselt werden kann.

(Die Weltkarte als vektorbasierte Darstellung mit eindeutiger Figur-Grund-Beziehung; Wikimedia, CC)

(Ein Ausschnitt aus derselben Karte mit veränderten Farben. Was ist Figur, was ist Grund? Hier nicht mehr so leicht zu beantworten; Sarah Pittroff, CC)

Zurück zu den Buchstaben. Mehrere dieser Buchstaben-Figuren ergeben eine Wort-Figur. Haben wir schon sehr viel gelesen, sind uns einige Wörter so sehr vertraut, dass wir sie auch an ihrem Umriss erkennen können. Wir müssen die einzelnen Buchstaben gar nicht entziffern. Woher wissen wir aber, wo ein Wort beginnt und wo es aufhört?

Gestaltgesetze (nach Max Wertheimer)

Gesetz der Nähe

Elemente, die nahe beieinander stehen, werden als zusammengehörig wahrgenommen. Im Gegensatz dazu werden Elemente, zwischen denen eine gewisse Distanz liegt als voneinander getrennt betrachtet.

Gesetz der Ähnlichkeit

Weisen Elemente Ähnlichkeiten auf, werden sie in der Wahrnehmung gruppiert, auch wenn sie sich nicht nahe oder sogar unähnliche Elemente näher sind.

Gesetz der Geschlossenheit

Schließt die Anordnung von Elementen einen Raum in sich ein, so wird diese Gruppe als eine Gestalt wahrgenommen. Werden Elemente durch eine Form von einer größeren Gestalt getrennt oder umschlossen, werden diese Elemente in der Wahrnehmung gruppiert.

Diese Tatsache kann man sich vor allem dann zu nutze machen, wenn Nähe und Ähnlichkeit bei komplexen Informationsstrukturen nicht mehr als Gestaltungsprinzipien ausreichen (Trennlinien, Hinterlegung).

Gesetz der guten Gestalt

Die menschliche Wahrnehmung ist ökonomisch strukturiert. Sie bevorzugt das einfachere Angebot vor dem komplexen. Große, geometrische Flächen fallen schneller ins Auge, als Kleinteiliges. Wir sprechen von Prägnanz. Elemente werden in der Wahrnehmung zu möglichst einfachen Gestalten gruppiert.

https://www.lingscars.com/

https://www.google.de/

Gesetz der guten Fortsetzung

Wiederholen sich Elemente in eine bestimmte Richtung oder an einer bestimmten Position, werden sie als zusammengehörig wahrgenommen. Auch wenn die Fortsetzung durch andere Elemente durchbrochen oder gekreuzt wird, werden die nach einer gewissen Regelmäßigkeit fortgesetzten Elemente als Gestalt wahrgenommen. Dieses Prinzip der fortgesetzten Gestalt kann beispielsweise bei Inhaltsangaben mit Hierarchie signalisierenden Einzügen beobachtet werden. Elemente auf der gleichen horizontalen Position werden als fortlaufende Gestalt identifiziert.

Raster

Bei der Gestaltung von Information sollten diese Gesetze der Gestalt immer dazu eingesetzt werden, zu möglichst klaren, eindeutigen Lösungen in der Organisation zu kommen. Visuelle Überfrachtung mit grafischen Mitteln führt zur Überforderung der Wahrnehmung, darunter leidet die Rezeption des Inhalts oder die Bedienbarkeit einer Anwendung.

Gleichzeitig sind wir schnell gelangweilt und verlieren das Interesse bei geringer Stimulation. Gute Gestaltung findet die Balance zwischen Einfachheit und ausreichender Komplexität. Um dies zu erreichen, ist es sehr empfehlenswert, ein Raster für die zu gestaltende Fläche zu erstellen. So können Regelmäßigkeit und Ordnung hergestellt werden. Es erlaubt dabei flexible Anordnungen, die Differenzierung und Hierarchisierung einzelner Elemente ermöglichen und das Betrachten oder Nutzen einer Seite oder Anwendung anregt.

Ein Raster anzulegen hilft bei diesem Unterfangen enorm. Es erleichtert die Systematisierung der Elemente und die Normierung von Größenverhältnissen. Es erleichtert die Entscheidung über Positionierungen und reguliert gleichzeitig die räumlichen Beziehungen der Elemente untereinander. Abstände und Größen können normiert werden, Abweichungen können dabei gezielt eingesetzt werden, ohne dass das gesamte Gefüge in Unordnung verfällt.

Typographie

Der Bereich der typographischen Überlegungen erstreckt sich über die Wahl des Fonts bis hin zur Gestaltung eines Schriftbildes innerhalb eines gegebenen Raums. Dabei verlangen beide Bereiche eigene Überlegungen im Vorfeld.

Einige Typographische Fachbegriffe:

By Brian Ammon, CC BY-SA 3.0

Schrift

Es existiert eine unüberschaubar große Anzahl an Fonts. Alte, digitalisierte, wie die Bembo (um 1500)

(Wikimedia, CC)

oder sehr moderne, wie die Arial (1982),

(Wikimedia, CC BY-SA 3.0)

die bereits für eine optimierte Darstellung am Monitor konzipiert wurde.

Die Fülle an Schriften kann man grob in vier unterschiedliche Formen unterteilen, die jeweils unterschiedliche Stile aufweisen. Wir beobachten aber auch große Unterschiede in der Qualität der Fonts, die gerade im Bereich der Webanwendung von großer Bedeutung ist. Hier habe ich als Entwickler_in wenig Einfluss auf die Ausgabe der Schrift an den zahlreichen Geräten und Bildschirmen. Umso wichtiger ist es, einen gut gebauten Schriftsatz zu wählen, der ein gleichmäßiges Schriftbild im Fließtext ergibt. Unregelmäßig große Lücken zwischen dem Buchstaben etwa, ein unsauberes Kerning, hinterlässt beim Lesen unbewusst den Eindruck einer zerzausten Frisur. Unter Umständen möchte man den Inhalt oder den Absender des Textes dann so recht ernst nehmen.

Unterscheidung der Form

Die Form differenziert grundsätzlich zwischen

  • Antiqua (Serif), einer Schrift mit Serifen. Berühmteste Vertreterin: Times New Roman, Georgia
  • Grotesk (Sans Serif), einer Schrift ohne Serifen. Berühmteste Vertreterin: Arial, Helvetica
  • Monospaced, einer Schrift, in der alle Buchstabe die gleiche Breite aufweisen. Berühmteste Vertreterin: Lucida Console
  • Schreibschrift (Handwriting), traurige Berühmtheit: Zapfino

Sie alle kennen diese unterschiedlichen Schriftformen. Gehen wir etwas weiter ins Detail:

Stil

Der Stil differenziert innerhalb der Form unterschiedliche Erscheinungen.

  • Dynamisch: horizontale Ausrichtung der Buchstaben, gute Zeilenführung, bewegtes Schriftbild
  • Statisch: vertikale Ausrichtung, angeglichene Proportionen, geschlossener Gesamteindruck
  • Geometrisch: geometrisch konstruierte Formen, moderner/technischer Ausdruck
  • Dekorativ (Display): Formen, die sich aus allen stilistischen Ansätzen speisen, auffallend, anregend

Die Bembo ist also eine dynamische Antiqua (Serif), die Arial eine statische Grotesk (Sans Serif).

Wichtig für die richtige Wahl einer Schrift ist die Frage: Was verknüpfen wir mit der Schriftart? Eine geometrische Sans Serif wie die Futura wurde in den 1920er Jahren als absolut avantgardistische Type entworfen und dient heute dazu, einen Retro-Charme zu transportieren. Serifenschriften haben einen konservativen, literarischen Charakter. Sie galten lange Zeit in ihrer Lesbarkeit unübertroffen. Heute hat sich das Auge, Arial sei Dank, an die moderneren Sans Serif gewöhnt. Lange Artikel im Netz sind heute meist in solchen Schriften zu finden. Außergewöhnliche Schriftformen wie die Monospaced werden gedanklich immer an die Schreibmaschine gebunden bleiben, von der sie abgeleitet wurden. Hinzugekommen ist die Bedeutung als Darstellung von Konsolenbefehlen oder Code.

Größe

Welche Größe verwendet wird, hängt ganz von Inhalt, Ausgabegerät und Anlass ab. Wichtig ist an dieser Stelle weniger der Hinweis auf die absolute Größe einer Schrift, sondern auf die Relationen zwischen verschiedenen Schriftbereichen.

Der Fließtext ist maßgeblich für den Ausgangpunkt der Überlegung. Ist er gut lesbar, muss die Headline (h1) deutlich größer sein, dabei im Verhältnis harmonisch bleiben. Zwischenüberschriften (h2, h3) können auch können die gleiche Größe besitzen und durch unterschiedliche Dicken ausgezeichnet werden.

Die oberste Prämisse ist die Deutlichkeit der Unterscheidung zwischen Überschrift und Fließtext und auch zwischen unterschiedlichen Arten der Überschriften. Daher ist auch eine zu große Anzahl an Zwischenüberschriften ungünstig.

Zeilen

Eine gute Lesbarkeit hängt unter anderem von der richtigen Zeilenlänge ab. Sie steht in Zusammenhang mit der Schriftgröße. Ist die Zeile zu lang, verpasst das Auge beim Lesen den Anschluss an die nächste Zeile und verrutscht. Ist die Zeile zu kurz, müssen zu viele Zeilensprünge für zu wenig Information gemacht werden, das Lesen wird unangenehm oft unterbrochen und dadurch anstrengend. Eine Faustregel besagt, 60 Zeichen pro Zeile sind gut. Doch auch hier ist Fingerspitzengefühl gefragt.

Auch der Abstand zwischen den Zeilen sollte bedacht werden. Unterschiedliche Zeilenabstände können auch zur Unterscheidung von Textelementen, wie etwa Passagen von Zitaten innerhalb eines Fließtextes dienen.

Schriftmischung

Um ein interessantes, zum Lesen anregendes Schriftbild zu generieren oder etwa vollkommen unterschiedliche Arten an Informationen voneinander abzugrenzen, ist es sinnvoll, unterschiedliche Arten oder Formen an Schriften zu verwenden. Hier sind zwei Aspekte gleichermaßen wichtig: zum einen die Harmonie zwischen den Schriftarten. Auch wenn ein starker Kontrast zwischen den Schriftformen erwünscht ist, sollte das Schriftbild miteinander harmonieren. Auf diese Weise erhält man einen gelungenen Gesamteindruck, der durch Details Spannung erzeugt. Zum anderen soll ein wahrnehmbarer Unterschied zwischen den Schriftarten bestehen. Liegen die Schriftarten zu nahe beieinander, z.B. Arial und Myriad, kann das Auge keine Unterscheidung auf den ersten Blick vornehmen und erkennt lediglich einen Fehler im System. Auch bei Schriftenmischung der gleichen Schriftart in unterschiedlichen Schnitten soll auf deutliche Unterscheidbarkeit geachtet werden.

Bei der Wahl der Schrift, insbesondere bei neueren und weniger populären Fonts bitte immer auf eine ausreichende Entwicklung der Schriftfamilien achten: Stehen genügend Schnitte zur Verfügung (Regular, Italic, Bold sind das Minimum!)? Hat die Schrift eine ausreichende Abdeckung der benötigten Zeichensätze (insbesondere bei Projekten, die Sonderzeichen oder nicht-westliche Zeichenräume aus der Unicode-Range verwenden)?

Satz

Der Satz bestimmt das Schriftbild von Fließtexten. Er wirkt sich auf das Lesen des Textes aus. Lesegewohnheiten spielen eine wichtige Rolle. Wir unterscheiden zwischen Blocksatz und Flattersatz. Die Entscheidung zwischen diesen beiden ist eine funktionale, erst in zweiter Linie eine ästhetische. Gute Worttrennung (hyphenation) ist gerade für die deutsche Sprache mit ihren sehr langen Worten für beide Satzarten wichtig.

Blocksatz

(Wikimedia, CC BY-SA 3.0)

Der Blocksatz, bei dem jede Zeile des Absatzes (mit Ausnahme der letzten) gleich lang ist, ist seit der Erfindung des Buchdrucks Standard in der Lesetypographie. Diese Gleichmäßigkeit macht ihn mühelos zu lesen. Dies kann aber durch zu große Wortabstände gestört werden. Der Wortabstand muss kleiner sein als der Zeilenabstand. Gibt es hier Probleme, muss für mehr Worttrennungen gesorgt werden.
Mehrspaltige Satzspiegel (Beispiel: Zeitung) profitieren wegen der Eindeutigkeit vom Blocksatz. Einspaltige Layouts (Beispiel: Wikipedia) sind besser im Flattersatz zu handhaben:

Flattersatz

(Wikimedia, CC)

Der Flattersatz erzeugt durch gleichmäßige Wortabstände ein ruhiges Schriftbild. Ein schlechter Zeilenumbruch stört hier aber den Lesefluss viel stärker, als beim Blocksatz. In einem sehr guten Flattersatz wechseln sich kürzere und längere Zeilen rhythmisch ab. Der Unterschied in der Länge der Zeilen darf nicht zu groß und nicht zu klein sein. Diese gute Maß hängt wieder von der Zeilenlänge, der Schriftgröße und der Umgebung des Textes ab.

Gliedern und Auszeichnen

Es versteht sich von selbst, dass die gestalterische Auszeichnung stets der semantischen folgen muss. Die Auszeichnungsformen sind allgemein bekannt:

  • Überschrift, Einzug, Absatz

Dies sind Gliederungselemente, die helfen, einen Text zu überblicken und seine Struktur zu begreifen.

  • Fette (strong), Kursive (em), VERSALIEN

Diese Auszeichnungen strukturieren den Text im Detail und können einzelne Wörter und Sätze hervorheben.

Ferner kennen wir Unterstreichung (je fetter, desto lauter), Farbe und farbige Unterlegung. Bitte beachten Sie auch hier, dass Lesegewohnheiten (unterstrichene Wörter = Links) gewisse Erwartungen mit sich bringen, die – wenn überhaupt – nur bewusst gebrochen werden sollten.

Best Practice:

Blick auf Google Fonts

Wenn die Typographie vom Inhalt ablenkt, wird sie zur störenden Dekoration

(H.P. Willberg. Lesetypo, Mainz 2005)

Farbe

Farbe ist eine Sinneswahrnehmung. Sie wird hervorgerufen durch Lichtstrahlen, die in unserem Auge die Rezeptoren für Kontrast (Stäbchen) und Farbe (Zapfen) reizen. Die Zapfen sind empfindlich für Lichtwellen unterschiedlicher Länge. Das menschliche Augen nimmt Farben mit drei Zapfensorten wahr: Rot, Grün und Blau. Dies sind die drei Grundfarben. Aus der Mischung dieser drei Farben und ihren unterschiedlichen Sättigungs- und Helligkeitswerten kann das menschliche Gehirn etwa 20 Millionen unterschiedliche Farbtöne berechnen.

Die Menge dieser Farben wird im Farbraum definiert. Der Farbraum menschlicher Wahrnehmung unterscheidet sich von dem technischer Geräte. Um den Umfang menschlicher Farbwahrnehmung zu beschreiben, nutzt man den Farbraum CIE-L*a*b*. Die Commission Internationale d'Éclairage (die Internationale Beleuchtungskommission) definiert eine Farbe nach Helligkeitswert (Luminanz), einem Farbwert zwischen den Komplementärfarben Rot und Grün (Wert a) und einem Farbwert zwischen den Komplementärfarben Gelb und Blau (Wert b).

(In einer Grafik abstrahierte Vorstellung über den Umfang menschlicher Farbwahrnehmung, Vilson Viera; CC)

Farbdarstellung

Additive Farbmischung

(Wikimedia, CC BY-SA 3.0)

Die additive Farbmischung beschreibt die Zusammensetzung aller Farben, die durch die Lichtfarben Rot, Grün und Blau gemischt werden. Dies sind die reinen Farbelemente des Lichts, die das menschliche Auge durch entsprechende Zapfen wahrnehmen kann. Alle Farben zusammen ergeben weißes Licht. Seine einzelnen Farbanteile werden durch Lichtbrechung, zum Beispiel durch ein Prisma, sichtbar.

(Lichtbrechung durch ein Prisma, Wikimedia, CC-BY-SA)

Um diese Lichtfarben durch technische Geräte darstellbar zu machen, abstrahiert man sie häufig in den RGB-Farbraum. Hier wird ein Wert von 0 bis 255 (insgesamt also 256 verschiedene Werte) für jede der drei Primärfarben ermittelt. Reines Rot hat demnach den Wert R=255 / G=0 / G=0. In einem 8-bit-System können so theoretisch über 16 Millionen Farben errechnet werden. Der in der Theorie existierende Farbraum aller durch das menschliche Auge erfassbaren Farben ist wesentlich größer als der, der durch technische Geräte aufgenommen oder wiedergegeben werden kann. So entwickelten sich viele unterschiedliche, auf ihre Anwendung hin spezifizierten RGB-Farbräume, die untereinander nicht immer problemlos und bei Umrechnungen verlustfrei kompatibel sind. Die Menge aller Farben, die ein Gerät aufnehmen oder ausgeben kann, wird Gamut genannt. Der Gamut wird häufig in einem Koordinatensystem dargestellt, in dem man anschaulich die Differenzen der unterschiedlichen Farbräume darstellen kann. Die folgende Abbildung zeigt den Unterschied zwischen der theoretisch wahrnehmbaren Menge an Farben und der im Standard-RGB-Farbraum (sRGB) darstellbaren Farben:

(sRGB Gamut innerhalb des CIE-L*a*b*-Farbraums, Wikimedia, CC-BY-SA)

Eine weitere Abstraktion ist der HSL-Farbraum. Er definiert Farben über die Koordinaten in einem dreidimensional imaginierten Farbraum. Der Farbwert (Hue) wird in einem Winkel mit der Benennung einer Gradzahl angegeben. Sättigung (Saturation), von innen nach außen zunehmend wird ebenso wie die Helligkeit (Lightning) der Farbe in Prozent angegeben.

(Darstellung der Vorstellung vom HSL-Farbraum in einem Zylinder, Wikimedia, CC-BY-SA)

Neben der additiven Farbmischung der Lichtfarben sprechen wir bei den physischen Farben von der subtraktiven Farbmischung, die im CMYK-Farbmodell wiedergegeben wird. Beide Farbräume können über den CIE L*a*b*-Farbraum aufeinander gemappt werden. Allerdings können die farblichen Entsprechungen aufgrund der unterschiedlichen Natur der Farben nur Annäherungen sein.

Probleme der Farbdarstellung

Die Ausgabe farbiger Bilder auf Bildschirmen unterliegt großen Unsicherheiten. Jedes Ausgabegerät stellt Farben anders dar, teilweise sogar mit einem deutlich wahrnehmbaren Farbstich. Das gleiche gilt für den Helligkeitskontrast, was sich vor allem bei gering voneinander abweichenden Graustufen bemerkbar macht.

Zu der Zeit, in der Bildschirme und Grafikkarten nur einen Bruchteil der heute möglichen Farben darstellen konnten, gab es daher die Empfehlung, auf die Palette der sogenannten „websichere Farben“ zurückzugreifen. Sie wurde aus nur sechs unterschiedlichen Tönungen der Grundfarben entwickelt und umfasste so nur 216 Farben, die dafür aber sicher angezeigt werde konnten. Heute sind sehen wir 256 Farbtönungen pro Grundfarbe und erhalten so 16,7 Mio. Farben - und ebenso viele abweichende Darstellungen davon.

Daher empfiehlt es sich, Farben und Kontraste immer auf sehr unterschiedlichen Ausgabegeräten zu testen, um ihre Darstellung zu beurteilen.

Farbwirkung

Warum verwenden wir Farbe überhaupt in der Kommunikation? Die Antwort liegt in der starken Wirkung, die sie auf unsere Wahrnehmung hat. Farbe erzeugt Aufmerksamkeit. Dabei spielt die sehr unterschiedliche Wirkung der verschiedenen Farben eine große Rolle. Denn es ist nicht gleichgültig, welche Farbe verwendet wird. Zum dritten kann eine spezifische Farbverwendung identitätsbildend sein und einen starken Wiedererkennungswert haben.

(Farbkreis nach Johannes Itten, 1961, CC)

Wirkung

Emotion

Farbe ist Emotionsträger. Dabei ist nicht nur das eigene Empfinden von Bedeutung sondern auch die Zuschreibung. Auf der einen Seite fühle ich mich wohl oder unwohl, wenn ich gewisse Farben sehe, werde angeregt oder gedämpft. Auf der anderen Seite mache ich unterschiedliche Annahmen über eine Information, je nachdem mit welcher Farbe sie übermittelt wird.

Wiedererkennung

Farbe oder Farbkombinationen können, wenn sie raffiniert eingesetzt werden, den visuellen Kern einer Marke bilden:

(Sarah Pittroff, CC-BY-SA)

Aufmerksamkeit

Objekte und Typographie, die farbig hervorgehoben sind, werden auf diese Weise ausgezeichnet. Diese Farbgebung signalisiert: Ich bin ein Bedeutungsträger.

Ursache – Kontrast

Diese Farbwirkungen basieren nicht nur auf der Wahl der Farbe sondern mitunter auch auf ihrer Kombination. Unterscheiden wir mehrere Farbeindrücke, dann geschieht das aufgrund eines größeren oder kleineren Kontrastes zwischen den Farben.

Hell – Dunkel-Kontrast

Der stärkste Hell – Dunkelkontrast liegt zwischen Weiß und Schwarz. Ein hoher Kontrast erlaubt scharfe Abgrenzung, kann in der Lesetypographie zum Beispiel auch ermüdend wirken.

Warm – Kalt-Kontrast

Farben aus dem gelben Spektrum werden als warm und nah während solche aus dem blauen Spektrum als kalt und fern empfunden werden.

Qualitätskontrast

Hiermit ist die Sättigung einer Farbe gemeint. Eine Farbe in mehreren Schattierungen zu nutzen hebt die Zusammengehörigkeit der Elemente hervor.

Quantitätskontrast

Bei der Verwendung von zwei oder mehrere Farben spielt nicht nur Farbe als solche eine Rolle sondern auch die mengenmäßige Verteilung der Farbflächen. Eine harmonische Wirkung wird erzielt, indem eine unaufdringliche Farbe in größerer Quantität, eine prägnante Farbe dagegen in geringeren Mengen eingesetzt wird.

Komplementärkontrast

Jede Farbe hat eine Komplementärfarbe, ihr farbliches Gegenteil. Für die Grundfarben Gelb, Blau und Rot sind das Lila, Orange und Grün. Dieser Kontrast kann die Leuchtkraft der Farben jeweils hervorheben. Dieses Phänomen eignet sich auf für sehr subtile Kontrastierungen durch Einfärbung gewisser Bereiche ohne gleich eine sehr bunte Wirkung zu erzielen.

Simultankontrast

Gerade in Kombination mit dem Quantitätskontrast sollte bedacht werden, dass die Farben einer Fläche, die von einer weiteren umschlossen ist in Wechselwirkung treten. So werden Tönung und Helligkeit beeinflusst. Das Auge sucht in der mengenmäßig untergeordneten Fläche die Komplementärfarbe der dominanten Fläche und so scheint diese Farbe eine abweichende Schattierung zu erhalten.

Farbwahl

Bevor man also für eine App oder eine Website mit Farben arbeitet, sollte man sich sehr genau im Klaren darüber sein, welche Wirkung die Farben erzielen und welche Aussage sie treffen sollen. Auch die Abwesenheit von Farbe hat im Übrigen eine ganz dezidierte Wirkung. Die Verwendung von Grautönen, Schwarz oder Weiß kann besonders klar und cool wirken, aber eben auch trist. Ob Farben miteinander harmonisch wirken oder aufreibend, kann jeder an sich oder Probanden im näheren Umfeld testen. Aus 16,2 Mio. Farben die richtige zu wählen kann aber sehr langwierig sein. Zum Glück gibt es gewisse Gesetze, von denen hier einige angesprochen wurden, die bereits in Algorithmen übersetzt sind. So finden sich im Netz einige hilfreiche Tools, die Anhaltspunkte zu Kombination von Farben geben:

Adobe Color CC

paletton

Bewegung und Interaktion

Im Bereich Webgestaltung gewinnen Bewegung und Interaktion an Bedeutung. Der Bereich User Experience (UX) behandelt die konkrete Erfahrung in der Interatktion mit einem Webprodukt oder einer App. Schon die Veränderung eines Buttons oder eines Links beim Hovern oder Klicken zählt hierzu. Moderne Produkte verfügen über ein ausgefeiltes Portfolio an Kommunikation über Bewegungen. Direkte kinetische Reaktion auf die Bedienung von Elementen ist für eine sichere Nutzerführung vor in der Appentwicklung zum Standard geworden. Hier stellen sich dann Fragen nach Geschwindigkeit, Richtung und Tiefe von Bewegungen in der Navigation. Wie in vielen Bereichen ist Google fortgeschritten in der Entwicklung und Bereitstellung von Standards. Vor allem die großen Anbieter der Mobile-Betriebssysteme IOS und Android setzen aber auch Maßstäbe, die nicht zuletzt der Distinktion dienen.

Google Material Design

Aufgabe

Bilden Sie Gruppen von zwei bis drei Personen.

  • Rufen Sie ihre Lieblings-Webseite oder -applikation auf.
  • Analysieren Sie Ihren Aufbau.
  • Können Sie hier angesprochene Phänomene oder Elemente wiederfinden?
  • Warum ist die Webseite/App gelungen?
  • Was könnte man besser machen?

WS 2019/20 – Webbasierte Forschungsapplikationen für die Geisteswissenschaften CC BY-NC-SA 4.0