5 Farbauswahlen, die Sie beim Designen für das Web unbedingt vermeiden müssen

Veröffentlicht: 2016-07-06

Das Web wird immer visueller. Guter Inhalt bleibt König, aber dieser Inhalt sollte besser in ein ansprechendes visuelles Paket verpackt werden, um sich abzuheben.

Für Designprofis ist das kein so großes Problem. Sie sind gründlich in Farbtheorie und Farbpsychologie eingetaucht.

Aber was ist mit der wachsenden Zahl von Internetnutzern, die versuchen, ihre Webinhalte mit der wachsenden visuellen Natur des Webs auf dem Laufenden zu halten? Selbst die Webartikel, die Farbtheorie und Farbpsychologie zusammenfassen, können zwar hervorragend die Grundlagen der Farbe im Design vermitteln, aber von denen falsch interpretiert werden, die nicht über den Hintergrund verfügen, den Grafikprofis haben, was zu potenziell katastrophalen Entscheidungen führen kann.

Welche Farbauswahl müssen Sie also auf Ihren Webseiten unbedingt vermeiden?

Pures Schwarz

Beginnen wir mit Schwarz – reinem Schwarz – was in HTML als #000000 codiert ist.

Überrascht? Schwarz ist überall, nicht wahr, wie im Text auf den meisten Webseiten, das allgegenwärtige kleine Schwarze und der Nachthimmel?

Nun, reines Schwarz ist weniger verbreitet als Sie denken. Das wahre #000000 reine Schwarz ist eigentlich eine unnatürliche Farbe. Es existiert nicht in der Natur. Reines Schwarz erfordert die Absorption aller Lichtspektren, und das kommt in der Natur einfach nicht vor. Natürliche Farben sind mehr gemischt und gedämpft.

Reines Schwarz ist also nichts, woran unsere Augen gewöhnt sind. Es ist hart. Es fällt auf (was das kleine Schwarze so beliebt macht). Warum verwenden Sie es dann nicht im Webdesign? Schließlich betonen Webartikel, die die Farbpsychologie berühren, deren Verbindung zu Glamour, Raffinesse, Macht und Autorität. Sind diese Artikel falsch, wenn sie die Verwendung von Schwarz fördern?

5 Farbauswahlen, die Sie beim Designen für das Web unbedingt vermeiden müssen

Sie sind überhaupt nicht falsch. Schwarz kann verwendet werden, um einige starke positive Assoziationen in den Köpfen der Menschen zu wecken. Der Schlüssel ist, ein Schwarz zu verwenden, das kein reines Schwarz ist.

Da reines Schwarz keine natürliche Farbe ist, ist es für das Gehirn schwieriger zu verarbeiten. Erhöhen Sie Ihr Schwarz von Nr. 000000 auf Nr. 111111 oder ein ähnliches, sehr dunkles Grau, und Sie erhalten immer noch die auffälligen Vorteile der Farbe Schwarz, ohne das Gehirn Ihrer Besucher so sehr zu belasten.

Neonfarben in Schnittstellenelementen

Auch Neonfarben haben, obwohl sie auffallen, die gleiche Tendenz, das Gehirn zu überwältigen. Als Farben, die in der Natur nicht vorkommen, sind sie für das Gehirn ungewohnt und schwerer zu verarbeiten als gedämpftere, gemischte Farben.

Speichern Sie die auffälligen Neonfarben für grafische Highlights, um Ihre visuellen Inhalte hervorzuheben, anstatt in Ihren Oberflächenelementen. Und stellen Sie sicher, dass Sie sie nicht nur verwenden, um die Aufmerksamkeit auf die Grafik zu lenken, sondern um die Aufmerksamkeit des Besuchers auf Teile Ihrer Seite zu lenken, in denen sich Schlüsselinformationen befinden.

Mit anderen Worten, halten Sie Neonfarben von Hintergründen fern, auf denen Text überlagert wird, wie z. B. Hintergründe für Ihren Haupttext, Seitenleisten, Navigationsbänder oder Schaltflächen.

5 Farbauswahlen, die Sie beim Designen für das Web unbedingt vermeiden müssen 2

Verwenden Sie als Hintergrund für Ihre Textinhalte natürlichere, leicht gemischte Farben, die angenehmer für die Augen sind. Neonfarben als Text oder in Texthintergründen ermüden die Augen. Dies kann einen unbewussten negativen Eindruck von der Website und ihren Angeboten hinterlassen, was das Letzte ist, was Sie wollen. Sie möchten Ihren Besucher mit einem positiven Gefühl über Ihr Unternehmen verlassen.

Eine allgemeine Regel, um die ersten beiden zu vermeidenden Farboptionen abzudecken, besteht darin, Farben zu vermeiden, die in der HTML-Codierung die Extreme in den Farbspektren aufweisen - die Nullen und Fs, insbesondere in Text und Texthintergründen. Wenn Sie sie leicht von den unnatürlichen, absolut reinen Farben entfernen, werden sie für den Verstand leichter zu verarbeiten sein und einen positiveren Eindruck bei Ihren Besuchern hinterlassen.

Zu kontrastreiche Kombinationen

Achten Sie nicht nur auf zu reine Farben, sondern auch auf bestimmte Farbkombinationen.

Obwohl Rot und Grün ein Grundnahrungsmittel der Weihnachtszeit sind, werfen sie eine Reihe von Problemen bei der Gestaltung von Websites auf - so sehr, dass ein kleines Gedicht unter Designern lautet: "Rot und Grün sollten niemals ohne eine Farbe dazwischen gesehen werden."

Das liegt an der Art und Weise, wie das Gehirn diese beiden Farben verarbeitet. Rot gilt als die wärmste Farbe und regt die Aktivität im Gehirn an. Es ist die Farbe, die am schnellsten unsere Aufmerksamkeit erregt. Rot erregt das Gehirn.

5 Farbauswahlen, die Sie beim Designen für das Web unbedingt vermeiden müssen 3

Grün hingegen wird als kühle Farbe registriert. Es beruhigt das Gehirn. Beides zusammenzubringen, bringt das Gehirn in die unangenehme Lage, ein Bild zu verarbeiten, das gleichzeitig versucht, es zu erregen und zu beruhigen. Es lässt das Gehirn in Konflikt. Das ist nicht gut für einen guten Eindruck.

Wie bei der oben erwähnten Verwendung von Neonfarben in Text oder Texthintergrund kann die Verwendung von Rot und Grün zusammen bei Ihrem Besucher einen negativen unbewussten Eindruck von Ihrem Angebot hinterlassen, der nichts mit dem Angebot selbst zu tun hat. Stattdessen kommt dieser negative Eindruck von dem inneren Unbehagen bei der Verarbeitung der kollidierenden Farben.

Rot und Grün haben noch ein zweites Problem. In der westlichen Welt sind die Menschen kulturell daran gewöhnt, Rot mit Stop oder Nein und Grün mit Go oder Ja zu assoziieren. Auch hier zwingt es das Gehirn, sich mit widersprüchlichen Eingaben auseinanderzusetzen, die dem Gehirn unangenehm sind. Und wenn sich das Gehirn unwohl fühlt, überträgt es dieses Gefühl des Unbehagens auf Ihr Angebot – ganz und gar nicht das, was Sie wollen.

Obwohl der Kontrast nicht so extrem ist, gilt das gleiche Prinzip für die Kombination von Rot und Blau und in noch geringerem Maße für jede Kombination von sogenannten Sekundärfarben, nämlich Lila, Grün oder Orange.

Rot und Blau schaffen einen Konflikt zwischen einer sehr warmen und einer sehr kühlen Farbe. Sekundärfarben, die Mischungen der Primärfarben sind (Lila ist eine Mischung aus Rot und Blau, Grün eine Mischung aus Blau und Gelb, Orange eine Mischung aus Gelb und Rot), mischen sich einfach nicht gut. Jede dieser Kombinationen ist einfach ein zu starker Kontrast, als dass das Gehirn sie bequem verarbeiten könnte.

Streben Sie auch hier nach natürlicheren, gemischten Farben, die die hirnanstrengenden Kombinationen vermeiden, die durch die Verwendung von Farben entstehen, die sich auf dem Farbkreis direkt gegenüberstehen oder die in Bezug auf Wärme und Kühle gegensätzlich sind.

Zu kontrastarme Kombinationen

Das bedeutet jedoch nicht, dass Sie nur Farben verwenden sollten, die in Farbton (Farbe) und Wert (relative Dunkelheit) nahezu identisch sind. Sie können auch zu weit in diese Richtung gehen und Besuchern andere Probleme bereiten.

Das Platzieren von hellem Text auf weißem Hintergrund, wie z. B. Rosa oder Gelb oder Hellblau oder Lavendel auf Weiß, kann es für Besucher schwierig machen, den Text zu verstehen. Gleiches gilt für dunklen Text auf dunklem Hintergrund, wie z. B. Rot oder Königsblau oder Magenta auf Schwarz.

5 Farbauswahlen, die Sie beim Designen für das Web unbedingt vermeiden müssen 4

Andere spezifische schlechte Kombinationen sind Gelb auf Grün oder Grün auf Gelb und rote Hintergründe mit Schwarz, Blau oder Magenta. Sie laufen nicht nur Gefahr, dass ein farbenblinder Besucher überhaupt keinen Text sieht, sondern Sie irritieren nicht farbenblinde Besucher, indem Sie sie dazu bringen, sich anzustrengen, um zu lesen, was Sie geschrieben haben. Und wir sprechen hier nicht von unterbewussten Eindrücken. Wir sprechen davon, dass sie sich bewusst darüber ärgern, dass Sie Ihre Website so schwer lesbar machen.

Dieser Fehler tritt besonders häufig auf, wenn Sie Text über Bilder legen, z. B. in einem großen Kopfzeilenbild oben auf Ihrer Seite. Stellen Sie immer sicher, dass Ihr GESAMTER Text auf Ihren Kopfzeilenbildern gut lesbar ist, nicht nur der Großteil davon.

Mehrfarbige Hintergründe

Websites, die Webdesignern kostenlosen strukturierten Hintergrund bieten, sind reichlich vorhanden, und Sie werden vielleicht das Gefühl haben, dass sie Ihre Website hervorheben werden. Aber seien Sie vorsichtig, wenn Sie sich für eine entscheiden. Strukturierte Hintergründe laufen Gefahr, beschäftigt zu sein und Besucher von Ihren Inhalten abzulenken. Und Sie stehen vor der gleichen Gefahr, dass Text in strukturierten Hintergründen verloren geht, wie wenn Sie Text über Bilder legen.

Seien Sie vorsichtig bei der Wahl eines strukturierten Hintergrunds. Vermeiden Sie die auffälligen, farblich kollidierenden Hintergründe, die in den frühen Tagen des Internets beliebt waren. Diese Hintergründe bestanden oft aus winzigen, sich wiederholenden Designs mit hellen, kollidierenden Farben, in denen Text leicht verloren ging.

Der Trend geht heute zu einem subtilen, natürlichen Look, der Ihrem Hintergrund ein Gefühl von Tiefe verleiht, ohne abzulenken. Und die allgemeine Faustregel für Farbpaletten für Websites lautet, nicht mehr als drei Farben zu verwenden, definitiv nicht mehr als vier.

5 Farbauswahlen, die Sie beim Designen für das Web unbedingt vermeiden müssen 5

Die gleiche Warnung zur Vorsicht bei der Verwendung von Texturen gilt für die Verwendung von Farbverläufen (ein grafisches Element, bei dem sich die Farbe oder Dunkelheit eines Hintergrunds allmählich von einem Teil des Hintergrunds zum anderen ändert). Vermeiden Sie es, sie für mehrere Textblöcke auf einer Seite zu verwenden. Und vermeiden Sie die Verwendung eines Farbverlaufs, der die Farbe Ihres Textes enthält, damit Ihr Text nicht im Farbverlauf verloren geht. Platzieren Sie Ihren Text immer in Kästchen oder in einem klaren Bereich Ihres Hintergrunds, mit genügend Abstand zu anderen visuellen Elementen, damit sich Ihr Text deutlich abhebt.

Fazit

Die Auswahl von Farben für eine Website umfasst eindeutig mehr als die Auswahl Ihrer Lieblingsfarben oder einer Reihe von Farben, die Ihnen auf einer anderen Website gefallen haben. Es geht um mehr, als nur eine isolierte Empfehlung aus einem Online-Artikel zu nehmen, denn alles, was man über die Farbwahl wissen muss, ohne mehr zu lernen.

Farbe ist ein sehr mächtiges Mittel zur Überzeugung. Sorgfältig eingesetzt, kann es helfen, Besucher zu einer Aktion zu bewegen, die Sie von ihnen erwarten. Unvorsichtig verwendet, kann es bei Besuchern ein vages Gefühl des Unbehagens in Bezug auf Ihr Unternehmen hinterlassen oder sie sogar bewusst irritieren, weil die Nutzung Ihrer Website schwierig ist.

Konzentrieren Sie Ihre Farbauswahl auf diejenigen, die das Gehirn schonen, und lernen Sie weiter, wie Sie Farben auswählen, die gut zusammenpassen, und Sie sind auf dem besten Weg, eine Website zu entwerfen, auf der Ihre Farben mit allen anderen Elementen Ihrer Website zusammenarbeiten Website, um Ihre Ziele zu erreichen.