Grundlagen der Nutzung von Kontrasten im Webdesign

Grundlagen der Nutzung von Kontrasten im Webdesign

Eine geschickt designte Webseite kann ein Unternehmen oder einen Unternehmer nicht nur professionell wirken lassen, sondern ist oft dafür eine grundlegende Voraussetzung, um bei Interessenten und Webseitenbesuchern besser im Gedächtnis zu bleiben. Für ein imposantes, zeitloses Design sind vor allem die Themen Kontraste und Typografie von entscheidender Bedeutung.

Hierbei sollte man nicht vergessen, dass diese Themen jeweils für sich selber schon ein bodenloses Fass sind und es einfach nicht möglich ist, alles zu diesen Themen in voller Gänze zu erläutern. Daher gehe ich hier einerseits nur auf das Thema “Kontraste” ein. Und das auch nur grundlegend. Das Ziel ist es, ein grundlegendes Verständnis für das Thema “Kontraste” zu schaffen, um so aufzuzeigen, worauf man beim Erstellen einer Website achten sollte.

Grundlagen der Farbkontraste in der Praxis

Fangen wir also mit dem Grundlagenthema “Kontraste” an. Bei Kontrasten denken viele im ersten Moment an Farben. Daher gehen wir erst mal auf Farbkontraste ein.

Farbkontraste entstehen, wenn zwei Farben, welche sich auf verschieden Seiten des Farbspektrums befinden, nahe beieinander liegen. Wenn also im Vergleich zwischen zwei oder mehreren nebeneinander liegenden Farben deutlich erkennbare Unterschiede bestehen, ist ein Farbkontrast wahrnehmbar.

Die praktische Anwendung von Kontrasten ist da schon etwas komplizierter. Nehmen wir als Beispiel mal die Farben “Rot” und “Blau”. Zwei Farben, die sich auf dem Farbspektrum gegenüber liegen. Die Umsetzung ist relativ einfach. In dem Fall nutzt man einfach bei einer Seite mit einem von “Blau” dominierten Layout, eine “rote” Schrift oder anderweitig viel “Rot”. Dadurch erhält man ein auffälliges kontrastreiches Design. Wichtig ist dabei aber, dass man damit nicht übertreibt, sondern eher detailliert und sparsam umgeht. Zu aggressive Kontraste lassen eine Seite höchsten albern, chaotisch und unprofessionell wirken, sollte der Text überhaupt noch lesbar sein oder wahrgenommen werden können.

Um Kontraste sinnvoll einzusetzen, gibt es ein paar simple Regeln. Die wichtigste ist die, sich beim Designen auf drei Farben zu beschränken. Beim Webdesign stehen davon zwei Farben üblicherweise fest: “Schwarz” und “Weiß”, beziehungsweise “Dunkelgrau” und “Weiß”. Es ist einfach etabliert diesen Kontrast für Schriften zu nutzen, da ein solches Design simpler zu erstellen ist. Ein Design zu entwickeln, welches von diesen Konventionen abweicht, ist möglich, aber selbst für erfahrene Designer schwer. Also bleiben wir bei “Schwarz”, “Weiß” und einer dritten Farbe. Diese ist oft “Blau” oder “Rot”, kann aber auch jede andere Farbe sein.

Viele weitere Informationen zum Thema “Farbkontraste” kann man z.B. auf folgenden Seiten finden:
https://lehrerfortbildung-bw.de/st_digital/medienkompetenz/gestaltung-farbe/kontrast/
https://de.wikipedia.org/wiki/Sieben_Farbkontraste

Grundlagen der Farbaufteilung einer Webseite

Um unsere Farbpalette jetzt auch sinnvoll zu nutzen, schauen wir auf eine zweite Regel: Die “Farbaufteilung”.  Jede Farbe hat in einem Design eine spezielle Aufgabe.

Als Beispiel nehmen nehmen wir hier unsere eigene Webseite. Die Farbe “Weiß” ist hier das Fundament. Es füllt den Hintergrund und dominiert das allgemeine Design. “Schwarz” oder “Dunkelgrau” verwenden wir für die Schrift. Das “Grün-Blau” aus unserem Firmenlogo verwenden wir für Akzente. Davon betroffen sind alle Interaktionselemente wie z.B. Buttons, das Logo selbst oder andere Interaktionsmöglichkeiten, die zwar wichtig sind, allerdings nicht zu viel Platz in Anspruch nehmen sollten.

Diese Vorgehensweise ist zwar üblich, aber nicht bindend. vielen Seiten bieten inzwischen einen so genannten “Darkmode” an, in welchem der Hintergrund “dunkelgrau” und die Schrift “weiß” ist. Oder man nutzt die eigene Firmenfarbe anstelle von “Weiß”.

Weniger ist oft mehr

In einem solchen Sonderfall gilt es aber darauf zu achten, dass es nicht zu viel wird. Es ist oft ratsam, “Schwarz” aus den genutzten Farben zu streichen und “Weiß” sowohl für die Schrift als auch für Akzente zu nutzen. Sonst könnte das “Schwarz” als Akzent zu aufdringlich werden und das Design zu unruhig (bunt) wirken lassen. Das ist jedoch in jedem Fall eine Abwägungssache, immer abhängig von der gewählten Farbe und der Zielgruppe.

Sollte man jedoch wirklich von dieser Konvention, sprich der Verwendung von “Schwarz”, “Weiß” und einer dritten Farbe, abweichen wollen, nutzt man eine der Farben für den Hintergrund und die anderen als Akzente. Man sollte allerdings nie zu viele Akzente benutzen. Drei ist oft eine gute Obergrenze.

Grundlagen von Formkontrasten

“Formkontraste” folgen dem selben Prinzip wie “Farbkontraste”. Formen unterschiedlichen Typs heben sich voneinander ab, sollten sie nahe beieinander liegen. Formkontraste bleiben im Webdesign häufig unbeachtet, da sie weniger auffällig sind als Farbkontraste. Doch sie sind ein wichtiges Zünglein an der Waage wenn es darum geht, das Design seine Seite zu optimieren. Gerade in Kombination mit Farbkontrasten einer Seite haben “Formkontraste” eine große Wirkung und können schädlich oder förderlich sein.

Als erstes sollte man sich möglichst immer vor Augen führen, dass eine Form auf ihrer Webseite immer dominant ist: Das Rechteck. Logisch, denn der Bildschirm und somit der Browser ist meist rechteckig, egal ob hochkant oder quer. Daher befindet sich der Inhalt unserer Seite immer auf einer rechteckigen Fläche.

Glücklicherweise gibt es bei “Formkontrasten” nicht ganz so viel zu beachten wie bei “Farbkontrasten”. Ähnlich wie bei der Verwendung von Farben ist es auch bei Formen so, dass zu viel eine Seite unruhig machen und oft auch einfach albern wirken lässt. Zwei ist hier die Obergrenze. Mehr Formen wirken überladen und lenken vom eigentlichem Inhalt ab.

Praktische Tipps zu Formkontrasten

Deshalb ist es wichtig, sich zu merken, dass das Rechteck immer bereits vorhanden ist. Daher ist es heutzutage sehr beliebt, eher Kreise als Form in ein Design einzuarbeiten. Zudem wirken scharfe Kanten unflexibel und veraltet. Rund und ohne Kanten gilt allgemein als modern. Allerdings ist es recht schwer, einen Formkontrast wirklich effektiv zu nutzen. Es empfiehlt sich, sollten sie diesen Kontrast so nutzen wollen, Inspiration bei anderen Seiten zu holen und das fertige Design von Freunden, Familie oder Kollegen bewerten zu lassen. Allgemein ist das ein guter Tipp! Geschmäcker sind eben verschieden, aber sie kennen ihre Zielgruppe und können vor dem Veröffentlichen vielleicht Stichproben bei potenziellen Kunden nehmen.

Als letztes gehen wir noch auf das Thema “Kanten” ein. Selbst Rechtecke, die einfach nur verschiedene Kantentypen haben, bilden Kontraste. Auch wenn diese eher minimalistisch sind, können auch diese entweder eine kleine optische Abwechslung und Verbesserung bieten, oder aber eine unschöne Unruhe ins Bild bringen. Auch hier gilt: “Die Dosis macht auch hier das Gift.”

Sie benötigen Unterstützung bei Ihrer Webseite oder einem Ihrer Projekte?
Kontakt