Farbe und Webdesign: Die 60-30-10 Regel und deren Anwendung

Farbe und Webdesign : Die 60/30/10-Regel hat mir einen Farbrahmen geliefert, den ich seither bei jedem Website-Projekt verwende. In diesem Beitrag erfahren Sie, wie es in der Praxis funktioniert, einschließlich der Farbpsychologie hinter den Entscheidungen, häufigen Fehlern und der Anwendung in WordPress.

Bei der 60/30/10-Regel, auch Farbanteilsrichtlinie genannt, wird ein Design in drei Teile unterteilt: 60 % der Fläche sind mit der dominanten Farbe bedeckt, 30 % mit der sekundären Farbe und 10 % mit der Akzentfarbe. Es entsteht eine klare visuelle Hierarchie auf Ihrer Website, ohne dass Sie jede Designentscheidung überdenken müssen.

Beim Neudesign einer unserer Produkt-Websites bin ich kürzlich darauf gestoßen. Ich hatte auf ein Layout gestarrt, das technisch einwandfrei war, sich aber völlig falsch anfühlte. Ein befreundeter Designer zeigte auf meine Farbverteilung und sagte: „Du verwendest fünf Farben mit ungefähr gleichem Gewicht.“ Dein Auge hat keinen Ort, an den du gehen kannst.“ Es stimmte. Nachdem ich die 60/30/10-Aufteilung angewendet hatte, war das Ganze nach etwa 20 Minuten fertig.

Es klingt fast zu simpel, um nützlich zu sein – ist es aber!

Was bedeutet die 60-30-10-Regel?

Die dominante Farbe (60 %) gibt den Gesamtton vor. Es umfasst Hintergründe, große Flächen und alles, was als Leinwand dient. Meistens handelt es sich um einen neutralen Ton wie Weiß, Offwhite oder Hellgrau. Bei einem dunklen Design wird ein tiefdunkler Ton gewählt.

Die Sekundärfarbe (30 %) unterstützt und ergänzt die dominierende Farbe. Denke dabei an Navigationsbalken, Seitenleisten, Kartenhintergründe und Abschnittsumbrüche. Es sorgt für Kontrast und Struktur, ohne dabei um Aufmerksamkeit zu konkurrieren.

Die Akzentfarbe (10 %) zeigt ihre Wirkung. Call-to-action buttons, marked text, icons and links. Es ist die Farbe, die dem Auge des Besuchers signalisiert, wohin es als Nächstes gehen soll.

Diese Regel stammt aus der Innenarchitektur, wo dieselbe Logik für Wände, Möbel und Accessoires gilt. Es überschritt die Grenze zu Mode und Grafikdesign, bevor es schließlich in den Bereichen UI- und Webdesign Fuß fasste. Während dieser Zeit blieb das zugrunde liegende Prinzip immer dasselbe: Es wurde Gleichgewicht geschaffen, indem jeder Farbe eine definierte Rolle und eine bestimmte Menge an Platz zugewiesen wurde.

Warum Farbe wichtiger ist als die meisten Menschen denken!

Hier kommt der Teil, der oft unterschätzt wird.

Farbe ist keine Dekoration, Farbe ist Kommunikation!

Studien zeigen durchgehend, dass Menschen innerhalb von 90 Sekunden nach der ersten Betrachtung vorschnelle Urteile über Produkte fällen. Ein großer Teil dieser Einschätzung beruht allein auf der Farbe. Noch bevor Ihre Besucher ein einziges Wort gelesen haben, treffen sie unbewusste Entscheidungen über Ihre Marke.

Verschiedene Farben wecken unterschiedliche Assoziationen, die nicht willkürlich sind.

• Die Farbe Blau wird konsequent mit Vertrauen, Zuverlässigkeit und Ruhe in Verbindung gebracht. Deshalb dominiert sie in den Bereichen Finanzen, Gesundheitswesen und Technologie.
• Die Farbe Rot löst Dringlichkeit und Begeisterung aus. Dadurch ist sie besonders gut für zeitlich begrenzte Angebote und CTAs geeignet.
• Die Farbe Grün steht für Natur, Wachstum und Gesundheit. Deshalb ist sie für Marken aus den Bereichen Wellness und Nachhaltigkeit so gut geeignet.
• Gelb ist aufmerksamkeitsstark und energiegeladen. In großen Dosen kann es jedoch überwältigend wirken.

Diese Assoziationen haben echte Auswirkungen darauf, wie man die 60/30/10-Regel anwendet, denn das Was ist genauso wichtig wie das Wie.

Wenn der marineblaue Anteil deiner dominanten 60 % sehr hoch ist, wirkt deine Seite autoritativ und vertrauenswürdig, noch bevor jemand dein Exemplar liest. Wenn es knallrot ist, fühlt es sich dringend und intensiv an. Das ist in einer Verkaufsphase in Ordnung, als permanenter Hintergrund jedoch erschöpfend. Die meisten Unternehmen setzen auf neutrale Töne, da diese vielseitig einsetzbar sind. Sie lassen deine Sekundär- und Akzentfarben das emotionale Gewicht tragen, ohne gegeneinander zu kämpfen.

Die Akzentfarbe trägt hier die meiste Verantwortung. Es ist die Farbe, der Sie vertrauen, um Action zu erzeugen und zu nutzen. Wenn Ihre Marke im Gesundheits- oder Finanzbereich tätig ist, verstärkt ein grüner oder blauer Akzent die Erwartungen der Nutzer. Wenn du mehr Energie und Umwandlung willst, schneiden die Farben Orange und Rot in A/B-Tests auf CTA-Tasten konstant besser ab. Das ist kein Zufall.

Hier erfahren Sie, wie Sie die 60/30/10-Regel auf der Website anwenden.

Wähle zuerst deine 60 %.

Beginnen Sie mit der dominanten Farbe. Das ist deine Leinwand. Da sie den größten visuellen Raum auf der Seite abdeckt, muss sie mit den anderen Farben harmonieren.

Für die meisten Webseiten sind die Farben Weiß, Creme oder ein sehr helles Grau üblich. Wenn Sie ein Design mit Dunkelmodus erstellen, wird die Hintergrundfarbe entweder sehr dunkel wie Kohle oder entsättigt und dunkel. Beide Richtungen funktionieren, der Schlüssel ist jedoch, dass ein einheitlicher Hintergrund entsteht.

Fragen Sie sich: „In welcher Stimmung sollte meine Seite sein, wenn niemand die spezifischen Inhalte betrachtet?”

Die Antwort auf diese Frage sind 60 %.

Wähle nun deine 30 %.

Die Sekundärfarbe bildet die strukturelle Schicht. Es enthält Elemente, die die Seite unterteilen und organisieren, darunter Seitenleisten, Navigationshintergründe, Kartenbehälter und sekundäre Abschnittsfüllungen.

Es sollte genügend Kontrast zur dominanten Farbe vorhanden sein, um eine sichtbare Trennung zu schaffen, aber nicht so viel, dass es sich anfühlt, als würden sie miteinander konkurrieren. Ein guter Test ist es, aus der Ferne auf das Design zu schauen. Wenn die Sekundärfarbe so hervorsticht, wie es der Akzentfarbe gebührt, ist sie zu stark.

Wähle jetzt 10% Akzent.

Hier kommt das strategische Denken rund um Farbpsychologie zum Tragen. Im Vergleich zur restlichen Palette sollte sich deine Akzentfarbe energiegeladen anfühlen. Sie wird auf deinen Buttons, Links, markierten Aufrufen und jedem UI-Element erscheinen, mit dem der Nutzer interagieren soll.

Barrierefreiheit ist hier wichtig. Achten Sie deshalb darauf, dass die Akzentfarbe einen ausreichenden Kontrast zu den dominanten und sekundären Hintergründen aufweist, damit sie für sehbehinderte Nutzer lesbar ist.

Hilfreiche Tools:

WebAIM – web accessibility in mind – Kontratsprüfer

WCAG 2.1– Verständnis von Dokumenten

Erst testen – dann entscheiden

Sobald Sie die drei Farben grob eingearbeitet haben, stehen Sie auf und entfernen sich vom Bildschirm. Dieser Trick wurde mir vor Jahren von einem Designer verraten und ich nutze ihn bis heute. Betrachten Sie die Seite aus zwei Metern Entfernung: Zieht der richtige Bereich Ihren Blick an? Wenn der Akzent seinen Zweck erfüllt, sollten Sie sich ohne nachzudenken zu den CTAs und wichtigen Interaktionen hingezogen fühlen.

Werkzeuge wie Coolors und Adobe Color sind hier wirklich nützlich, um komplementäre Paletten zu erstellen und zu überprüfen, wie drei Farben zusammenpassen, bevor man sie anwendet.

Anwendung der 60/30/10-Regel in WordPress

Das ist praktisch, wenn Sie speziell mit WordPress arbeiten.

Wenn du Elementor verwendest, findest du die globalen Farben in den Site-Einstellungen. Definiere dort deine drei Palettenfarben, dann werden sie automatisch auf jeder Instanz deiner Website aktualisiert, auf der diese Globals angewendet werden. Das Durchsuchen einzelner Widget-Einstellungen ist nicht nötig.

GeneratePress hat Global Colors in seinem Customizer integriert, was es zu einer der besseren Optionen für Theme-Einstellungen macht, um ein strukturiertes Farbsystem von Grund auf zu implementieren. Beaver Builder hat eigene Farbpaletten-Einstellungen, die ähnlich funktionieren.

Wenn Sie ein Block-Theme verwenden, wird die Farbpalette an dieser Stelle definiert. Dort können Sie Ihre drei Farben festlegen, die dann als Voreinstellungen im gesamten Block-Editor erscheinen. Das ist der sauberste Ansatz, um Ihr Farbsystem konsistent zu halten.

Das Entscheidende bei all diesen ist, die drei Farben einmal auf Systemebene zu definieren und sie von dort aus anzuwenden. Die 60/30/10-Regel gilt nur als Disziplin, wenn diese auf jeder Seite einheitlich angewendet wird, nicht nur auf der Homepage.

Wenn die Regel nur teilweise zutrifft.

Die 60/30/10-Regel ist ein Rahmenwerk und kein Gesetz. Es gibt Situationen, in denen sie flexibel gehandhabt werden muss.

• Fotografielastige Seiten sind die häufigste Ausnahme.
• Wenn Ihre Seite auf Full-Bleed-Fotografie basiert – beispielsweise Portfolio-Seiten, Reiseseiten oder Bildergalerien –, tragen die Fotos selbst so viele visuelle Informationen, dass es aussichtslos ist, eine Farbverteilung über das Layout zu bestimmen. Der richtige Schachzug ist deshalb, zu einer nahezu neutralen Oberfläche zu wechseln (sehr weiß oder sehr dunkel), sodass die Bilder zur Palette werden.
• Monochrome Designs verwenden eine einzelne Farbe in verschiedenen Tönen und Schattierungen. Sie machen das, anstatt drei verschiedene Farben zu verwenden. Die Regel gilt weiterhin. Mit 60 % dominiert der hellste Ton, der mittlere Ton bietet mit 30 % Struktur und die dunkelste oder gesättigtste Version übernimmt mit 10 % die Akzentrolle.
• Energiegeladene oder kampagnenspezifische Seiten – Manchmal profitieren sie davon, mehr Farbe zu pushen, besonders wenn der Kontext Dringlichkeit oder Aufregung verlangt. Stellen Sie sich eine Verkaufs-Landingpage, eine Veranstaltungsseite oder eine Produkteinführung vor. Hier kann ein Wechsel in Richtung 50/30/20 oder das Hinzufügen einer vierten Farbe als zweiter Akzent funktionieren. Achte jedoch darauf, dass weiterhin eine klare visuelle Hierarchie gegeben ist und eine Farbe die Führung übernimmt.

Fazit:

Die 60/30/10-Regel garantiert kein gutes Design. Dafür sind eine gute Typografie, ein gutes Layout und gute Inhalte erforderlich. Was sie jedoch tut, ist, eine der häufigsten Schwachstellen zu beseitigen. Farbe, die mit sich selbst konkurriert.

Stellen Sie die richtigen Proportionen ein und wählen Sie Farben aus, die die gewünschten Gefühle der Besucher widerspiegeln. Wenden Sie das System dann konsequent auf jeder Seite an. Diese Kombination verwandelt eine Seite, die „gut” aussieht, in eine, die Ihre Marke kommuniziert, noch bevor jemand etwas liest.

Wenn du mit WordPress arbeitest, ist es am saubersten, auf Theme- oder Seiteneditor-Ebene mit den globalen Farben zu beginnen, um diese im gesamten System durchzusetzen. Sie definieren sie einmal und können sie dann überall anwenden.

Was war der schwierigste Teil bei der Festlegung eines Farbsystems für die eigene Website? Ich frage mich, ob die 60-Prozent-Auswahl oder der 10-Prozent-Akzent der Grund ist, an dem die meisten Leute hängen bleiben.