Webdesign-Tutorial, Hilfe zur Gestaltung der eigenen Homepage
Farben im Webdesign
Farben sind ein entscheidender Faktor, damit das Gesamtbild einer Homepage später professionell und angenehm beim Betrachter ankommt.
Da das Gefallen von Farben sehr stark vom Geschmack des Users abhängt, ist es so gut wie unmöglich Farben zu finden, die jeder schön findet. Du kannst aber versuchen durch ein geeignetes Farbeschema und Farbkontrasten bestimmte Wirkungen auf einen Internetuser zu erzeugen.
Um dir erst einmal klarzumachen, was ich mit einem Farbschema meine, schau dir mal das Farbschema von designerzone.de an.
Zur Abbildung:
Das Farbschema zeigt alle Farben, die auf designerzone.de in Text, Elementen, Überschriften und einigen Grafiken verwendet wurden. Spezielle Textformatierungen in Rot oder Grün, die nur selten auftreten, wurden jedoch nicht berücksichtigt.
Damit es vielleicht etwas klarer wird, zeige ich nun noch das Farbschema von designerinaction.de.
Zur Abbildung:
Auch hier sind nur die Grundfarben abgebildet. Weiß dient als Hintergrundfarbe für den Inhaltsbereich, das Rot-Orange und Hellblau für Akzente, die auch bewusst sparsam auf der Seite gesetzt werden, und Brauntöne in verschiedenen Abstufungen für Text und weitere Elemente.
Aus diesen beiden Schemen gehen einige Möglichkeiten hervor, mit denen du Farben für deine Website finden kannst. Du könntest folgendermaßen vorgehen:
1.
Wähle eine Grundfarbe für deine Website aus. Dabei solltest du darauf achten, dass die Farbe auch mit dem später präsentierten Inhalt assoziiert werden kann. Das heißt, wenn es beispielsweise um eine Homepage über Wassersport geht, sind wohl Blautöne als Farben das Beste. Außerdem sollte die Grundfarbe keine Pastellfarbe sein, aber auch keine zu grelle Farbe.
 |
Zur Beispielfarbe:Das wäre zum Beispiel eine Grundfarbe, die man auf solch einer Website gut verwenden könnte. Sie ist nicht grell und auch nicht pastellig. |
2.
Als nächstes kommen zu dieser Farbe zwei Abstufungen hinzu, mit denen du andere Elemente der Seite einfärben kannst. Die Abstufung erhältst du, indem du im Grafikprogramm die Hintergrundfarbe auf die gewünschte Grundfarbe einstellst und ein weißes Rechteck über der Arbeitsfläche aufziehst. Dann weißt du dem Rechteck eine Transparenz von ca. 15 % zu. Mit der Pipette kannst du nun die Farbe ablesen und dir den HEX-Code abspeichern. Dann kannst du die Transparenz auf ca. 5 % einstellen und ebenfalls den HEX-Code abspeichern. Schließlich sieht dein Farbschema schon so aus:
|
|
|
Zum Beispielschema:Die drei Farben sind nun eine gute Basis um Elemente einer Website interessant und ansprechend zu gestalten. |
Natürlich kannst du die Transparenzwerte variieren und auch mehr als 2 Abstufungen deinem Farbschema hinzufügen (wie man am Beispiel designerinaction sieht).
Vielleicht fragst du dich jetzt, wie man diese Farben denn dann auch anwendet, um die Seite ansprechend zu gestalten. Um diese Frage etwas zu klären, habe ich ein kleines Beispiel erstellt.
3.
Wie man im Beispiel sehen kann, habe ich auch die Farbe Weiß verwendet. Weiß tritt eigentlich fast immer irgendwo auf einer Website auf. Besonders häufig natürlich als Hintergrundfarbe für den Inhaltsbereich, womit diesem auch die beste Hintergrundfarbe gegeben ist. Denn bekanntlich lässt sich am besten schwarz auf weiß lesen. Da Weiß im Grunde zu jeder Farbe passt, kannst du sie problemlos zu deinem Farbschema hinzufügen.
4.
Zum Abschluss kannst du noch eine passende Farbe suchen, die einen gewissen Kontrast zu den Blautönen bietet, jedoch ist das nicht zwingend notwendig (wie man an dieser Seite sehen kann). Jetzt kommt vielleicht die Frage: Woher weiß ich denn, welche Farbe zu meiner Grundfarbe passt?
Zwar kann man einige Tipps geben, wie Farben gut zusammen passen, dennoch ist das ganze sehr stark basierend auf den persönlichen Geschmack. Schauen wir uns mal den Farbkreis nach Johannes Itten (1961) an.
Zur Abbildung:
Ausgehend von den drei Primärfarben Blau, Rot und Gelb werden durch Mischung die Sekundärfarben Grün, Orange und Violett hergestellt, deren Mischung die Tertiärfarben (z.B. Gelb-Grün) hervorrufen. Im Kreis sind die gegenüberliegenden Farben Komplementärfarben, die zusammen harmonieren.
Der Kreis kann dir nun folgendermaßen helfen. Schaue doch einmal, welcher Farbe deine gewählte Grundfarbe ungefähr entspricht (es muss nicht genau dieselbe sein). So kannst du nun herausfinden, welche Farben zu deiner Grundfarbe passen. Die Gegenüberliegende Farbe und die beiden benachbarten Farben könntest du verwenden.
Zur Abbildung:
Im vereinfachten Itten-Farbkreis kannst du dir auch mit geometrischen Formen (z.B.: Rechteck, gleichschenkliges Dreieck, Sechseck, Karo, etc.) behelfen, um Farbkombinationen mit 3 oder mehr Farben zu finden, die auch miteinander harmonieren.
Wenn du weitere Fragen hast oder noch mehr Hilfe brauchst dann schau mal bei diesem Linktipp: www.metacolor.de.
Dort findest du alles über Farben im Webdesign, was man nur wissen kann.
Desweiteren kann man mit Farben auch Modulationen herstellen, was eine Abdunklung oder Aufhellung mit Grau, Schwarz oder Weiß bedeutet. Dadurch lassen sich Farben finden, die matt oder pastellfarbig sind und möglicherweise besser zur gewählten Grundfarbe passen.
Zu den Modulationen:
In der ersten Modulation wurde nach schwarz abgedunkelt, in der zweiten nach grau und in der dritten nach weiß aufgehellt.
Diese Modulationen kann man auch leicht im Grafikprogramm herstellen. Diesmal wählt man als Hintergrundfarbe schwarz, grau oder weiß, je nachdem wie man die Farbe modulieren möchte, und zieht über diese Hintergrundfarbe ein Rechteck mit der Grundfarbe auf. Nun weißt du dem Rechteck eine Transparenz zu (ausprobieren) und wieder kannst du den HEX-Code mit der Pipette ablesen.
Am Ende dieses Ausflugs in die Welt der Harmonielehre, möchte ich noch darauf hinweisen, dass es auch darauf ankommt, wie man die Farbe Quantitativ auf einer Internetseite verteilt. Je nach gewünschter Wirkung müssen mehr helle oder mehr dunkle Farben verwendet und auf größere bzw. kleinere Flächen angewendet werden.
Kehren wir nun aber wieder an den Anfang dieses Kapitels zurück. Du weißt nun, wie man Farben für ein Webprojekt aussucht und nach welchen Kriterien sie eingesetzt werden sollten.
Falls dir Material für die Website vorliegt, sind dort bestimmt schon einige Farben zu erkennen, die du in deinem Farbschema mit einbinden kannst und das auch tun solltest. Falls nämlich Material (z.B.: Visitenkarte, Flyer, etc.) vorliegt gehören die verwendeten Farben zu der Corporate Identity und erzielen einen Wiedererkennungswert. Deshalb solltes du unbedingt schon vorhandene und mit dem Projekt (Unternehmen) verknüpfbare Farben weiterverwenden. Falls das nicht der Fall ist, musst du natürlich geeignete Farben suchen.
