Farben

VonTobias Günther

Das Google Mateiral Design definiert einen Farbkatalog und klassifiziert Helligkeitsstufen, damit Hintergrundfarben (auch Primärfarbe genannt) mit Vordergrundfarben (auch Akzentfarbe genannt) nahezu beliebig kombiniert werden können. Primärfarben werden mit einer mittleren Helligkeit angelegt (Stufe 500), während Akzentfarben stark gesättigt und hell sind (Stufe A100 bis A300).

Konsistent (rechte Abbildung) genutzt Hintergrundfarbe (rosa), Akzentfarbe (lachs-rot) und Sekündarfarbe (zwei verschiedenen Blautöne) erzeugen ein stimmiges Bild, während die ungeschickte Farbwahl der linken Abbildung wenig Interesse weckt, den Dialog zu erkunden.

Primärfarbe

Hintergrundfarben nehmen flächenmäßig einen großen Raum ein. Diese sind daher von Sättigung und Kontrast abgemildert, um das Auge nicht zu überlasten. Sie sollen den eigentlichen Inhaltselementen zudem nicht die Show zu stehlen.

Akzentfarbe

Alle wichtigeren Bestandteile eines Dialogs (Call-2-Action Button), wichtige Kennzahlen, Dialoge, die der Aufmerksamkeit des Users nicht entgehen dürfen, werden mit der sehr gesättigten und hellen Akzentfarbe versehen.

Sekundärfarbe

Zu Akzent- und Sekundärfarbe nach etablierten psychologischen Farbmodellen passend, wird die Sekundärfarbe verwendet, um weniger wichtige Elemente voneinander zu separieren (z.b. die Balken in der Abbildung rechts).

Ähnliche Beiträge

  • Typographie

    VonTobias Günther

    Die Schriftart vermittelt Emotionen durch Form und Schwung der Buchstaben und wird dementsprechend sorgfältig zum Thema passend ausgewählt. Informationen werden nicht nur durch den lexikographischen kargen Text selbst vermittelt, sondern auch die Zeichnung, der Steg-Verlauf, die Serifen und die Ausrichtung von Buchstaben in einer Schriftart kommunizieren Infos und erzeugen Stimmungen. Abhängig vom Thema der Webseite…

  • Navigation

    VonTobias Günther

    Woher kommt der User, was ist aktuell zu tun und wo geht es danach hin. Navigationselemente beantworten diese Fragen auf einen Blick. Breadcrumbs Mit Breadcrumbs (Brotkrumen) ist der Pfad zum aktuellen Dialog sichtbar und sie ermöglichen das Zurückspringen zu einer höheren Seite. Besonders relevant ist der Breadcrumb, wenn User von außen auf die Seiten kommen…

  • Visuelle Hierarchie

    VonTobias Günther

    Das unwichtige vom wichtigen Trennen. Eine Hierarchie macht es möglich. Schriftgröße Je wichtiger die Überschrift, desto größer die Schriftgröße. Durch stark sichtbare und kontrahierende Zeichen wird die Aufmerksamkeit des Users auf die Titelüberschrift gezwungen. Zur Orientierung ist das natürlich ein sehr sinnvolles Vorgehen, denn es muss entschieden werden, ob das weitere Scannen der Seite thematisch…

  • Weissraum

    VonTobias Günther

    Man sieht oft den Wald vor Bäumen nicht. Stünde ein einzelner Baum auf einer sonst baumfreien Lichtung fällt er sofort ins Auge. Weißraum bietet den Elementen eine Bühne, damit diese Platz haben, atmen und entfalten können. Der Weissraum muss nicht unbedingt weiß sein, sondern wird in der Primärfarbe oder mit einem subtilen Farbverlauf eingefärbt. Fehlt…

  • Frontend-Layout

    VonTobias Günther

    Alle Elemente des Produktkonfigurators werden in verschiedenen Positionen, Reihenfolgen und Größen „ausgelegt“. Durch das Weglassen von Farben, Bildern, Icons und inhaltlich gestalteten Texten kann sich der Designer voll auf das Layout konzentrieren. Denn dieses bildet nicht nur das Gerüst an dem die Gestaltung aufgehängt ist, sondern ist auch fundamental wichtig für Usability und User-Experience.