Webdesign- und Freeware-Tipps
Farbverläufe, Farbverlauf auf deiner Homepage bzw. Webseite
Zur Zeit sieht man sie immer häufiger - die Farbverläufe. Sei es im
Zu Anfang möchte ich dir anhand eines Beispiels zeigen, wie man es sehr gut umgesetzt hat. Die Seite www.macromedia.com ist dafür sehr gut geeignet. Zum einen enthält der Hintergrund einen Farbverlauf, welcher zwar dezent ist, aber eine gewaltige Wirkung erzielt.
Kommen wir nun zu der Wirkung eines solchen Farbverlaufs im Hintergrund. Du kannst durch die richtige Wahl der Farben bestimmte Stimmungen erzeugen. Benutzt du zum Beispiel einen Farbverlauf mit Rot und Gelb, so wird der Betrachter eher ein warmes Gefühl verspüren als es mit einem Blau-Grünen klappen würde. Verkaufst du auf deiner Homepage jedoch Fischfutter und bietest Informationen über Fische und andere Meerlebewesen an, wird der Betrachter sich mit einem Blau-Grünen Farbverlauf besser in die Seite hineinversetzen können.
Du siehst, es kommt hauptsächlich auf die Wahl der Farben an, die jedoch von einigen Dingen abhängt.
Der Betrachter sollte irgendeine Beziehung zwischen Thema der Seite und Farben des Hintergrunds entwickeln können, sofern die Seite ein Thema behandelt, das eine Assoziation zulässt.
Beispiel:
Eine Kontaktbörse wird wohl mit Liebe, Sex, Kuscheln, Chatten, Kontakt , usw. assoziiert, woraus folgt, dass auch Farben wie Rot, Pink, Rosa, Violett, Gelb und andere aus diesem Bereich bevorzugt benutzt werden sollten. Zu einer Seite, auf der deine neuesten Partyfotos zu sehen sind, wird wohl keiner Assoziationen bezüglich irgendwelcher Farben haben. Dort ist dann dein künstlerisches Auge gefragt, das eine nette Farbkombination findet, die zum Rest der Page passt. Bei Firmen solltest du natürlich zusätzlich auf die Coporate Identity achten.
Außerdem bringt so ein Farbverlauf etwas Dynamik auf die Webseite. Durch viel Inhalt auf einer Seite muss der User nach unten scrollen, wodurch sich dann die Hintergrundfarbe ändert. Dieser Farbwechsel wird vom User voraussichtlich aber nur dann positiv aufgenommen, wenn er nicht zu krass ist und das Arbeiten mit der Webseite noch zusätzlich unterstützt.
Zur Abbildung:
Die Abbildung zeigt die Windows-Standard-Farbpalette, die du im Grunde in jedem Grafikprogramm aufrufen und aus dieser Farben benutzen kannst. Natürlich kannst du dasselbe auch mit ähnlichen anderen Farbpaletten machen.
Bei der Farbwahl für eine helle Farbe, also der Hintergrundfarbe einer Webseite, solltet ihr euch mit dem rechten Regler im angezeigten Bereich befinden. Die Farbe passt ihr dann in dem anderen gekennzeichneten Bereich an, sodass sie zur anderen Farbe gut passt.
Lass mich nun mal anhand eines Beispiele das ganze verdeutlichen.
Beispiel 1:
Ich habe diese Farbe vorgegeben oder habe sie mir als Farbe für meine Webseite ausgesucht, aus welchen Gründen auch immer.
 |
|
Hex-Code: #009900 |
Nun suche ich nach dem neben der Abbildung beschriebenen Verfahren eine dazu passende zweite Farbe, mit der ich danach einen Farbverlauf für die Webseite erstellen möchte.
|
|
|
|
Hex-Code: #E8F1C9 |
oder
|
|
|
|
Hex-Code: #99CC66 |
Wie du sehen kannst, empfiehlt es sich immer einen sehr ähnlichen Farbton zu wählen und diesen nur in der Sättigung abzuschwächen oder ihn aufzuhellen. So kannst du sicher gehen, dass die Kombination harmoniert. Mehr zum Thema Modulationen
Der Inhalt der Seite sollte nie direkt auf dem Farbverlauf erscheinen, sondern immer noch in einem Bereich stehen, der einen einfarbige Hintergrundfarbe hat, am besten Weiß, damit das Lesen nicht erschwert wird.
Es gibt unterschiedliche Möglichkeiten, wie der Farbverlauf aussehen könnte.
| a) |  |
|
b) |
|
Zur Abbildung:
Nun habe ich mit beiden herausgesuchten Farben einen Verlauf erstellt, um im direkten Vergleich abwägen zu können, welcher besser geeignet ist. Am besten kannst du das Ganze natürlich vergleichen, wenn du dir Beispiel-Dateien erstellst.
Ich bin der Meinung, dass Verlauf b) von der Länge her schon recht gut gewählt ist, denn würde man einen kürzeren nehmen, sähe es nicht so schön aus, da der Verlauf zu hart wird. Ist der Verlauf noch länger wird er zwar weicher, jedoch bleibt der Effekt des Farbwechsels dann oft aus, da man dafür auf jeder Seite dann viel Inhalt braucht.
| c) | |
 |
In dieser Ansicht sieht der Verlauf noch recht angenehm aus, schaut man sich ihn jedoch in der Beispielseite an, sieht es nicht mehr gut aus. Der Verlauf ist zu kurz und wirkt so ziemlich hart.
Das heißt also, dass der Verlauf schon im Bereich von 450 bis 600 Pixel hoch sein sollte.
Dasselbe kannst du natürlich auch genauso bei Buttons oder anderen Grafiken machen.
Beispiel für ein Button mit Farbverlauf und einfachem Schlagschatten:
 |
Von |
|
nach |
|
|
verläuft der Farbverlauf auf dem Button. Du erkennst, dass die Farben keinen riesen Unterschied haben, aber die Wirkung dennoch enorm ist. Ein flacher 3D-Button. |
Partnerseiten
