Design und Farbe für den perfekten Online-Auftritt

Teil 2: Web-Site: Tipps und Tools zur Farbgestaltung der eigenen Homepage

Farbcodes ermitteln

Anregungen für die Farbgestaltung der eigenen Seiten können auch andere Websites liefern. Zwar wäre es mindestens schlechter Stil, die komplette Farbpalette einer anderen Website zu übernehmen, es spricht jedoch nichts dagegen, wenn Sie sich von einzelnen Farben inspirieren lassen. Spricht Sie beispielsweise die Hintergrundfarbe eines Logos besonders an, so picken Sie den Farbwert mit der Firefox-Erweiterung Colorzilla auf.

Eine ähnliche Funktion bietet das Windows-Tool Colorschemer Colorpix . Starten Sie das Programm und sammeln Sie Farbwerte über das Browserfenster hinaus auf der gesamten Windows-Oberfläche auf. Die Farben der Hintergründe, Linien und Texte sind in der Regel als CSS-Formate in den Webseiten selbst oder in externen Dateien abgelegt. Sie von Hand in den Quelltexten aufzuspüren kostet viel Aufwand. Schneller geht es mit dem Moo Color Finder. Tragen Sie die Adresse der jeweiligen Webseite in das Feld unter Script Demo ein und klicken Sie auf zeig mir die Farben!.

Mit Farbe gliedern

Verwenden Sie Farben zur Seitengliederung und zum Hervorheben besonders wichtiger Inhalte. Sie trennen beispielsweise die Bereiche für den Seitenkopf, das Menü und den Fließtext durch unterschiedliche Hintergrundfarben, farbige Trennlinien oder zusätzliche Weißraum zwischen den Blöcken.

Beachten Sie aber grundsätzlich beim Farbeinsatz: Zu viel ist zu viel. Kleistern Sie nicht die gesamte Seite mit kunterbunten Farbtapeten zu. Die Absicht, einzelne Bereiche in den Vordergrund zu rücken, verkehrt sich so schnell ins Gegenteil. Ein mit greller Signalfarbe hinterlegter Bereich zieht die Aufmerksamkeit zu stark auf sich und erdrückt die anderen Seitenabschnitte. Wählen Sie helle Farben und ausgewogene Kompositionen.Weiße Füllungen verleihen einer ohnehin hell gehaltenen Seite zusätzliche Leichtigkeit. Seien Sie auch mit intensiven Farbflächen rund um besonders ansprechende und hochwertige Grafikobjekte vorsichtig.

© Archiv

Suche nach der optimalen Palette: Kombinieren Sie beim Color Scheme Designer im Farbkreis gegenüberliegende Farben.

Feinschliff fürs Layout

Nutzen Sie lieber jede Möglichkeit, das Layout Ihrer Seiten weiter zu optimieren. Setzen Sie an Stelle einfarbiger Hintergrundflächen beispielsweise auf dezente Verlaufsfüllungen. Technisch realisieren Sie dies mit einer Grafikdatei, in die Sie den Verlauf von der ursprünglichen Füllfarbe zu einem nur wenige Stufen dunkleren oder helleren Farbton einfügen. Binden Sie die Grafik per CSS in den Hintergrund der entsprechenden Seitenbereiche ein.

Statt eines Farbverlaufs eignen sich übrigens auch kolorierte Muster beispielsweise in angedeuteter Fels-, Holz- oder Riffel-Optik. Der Langeweile monochromer Layouts beugen Sie mit gezielten Farbtupfern vor. Hinterlegen Sie zum Beispiel Menütexte beispielsweise nicht mit der lediglich aufgehellten Grundfarbe, sondern wählen Sie einen komplett anderen Farbton. Gegebenenfalls macht auch hier ein leichter Verlauf von Dunkel nach Hell Sinn.

Größere Abstände

Im Übrigen haben auch die Abstände zwischen den Seitenelementen und innerhalb des Textes Einfluss auf die Wirkung der verwendeten Farben. Je gedrängter die Objekte angeordnet sind, umso schwächer kommt die jeweilige Hintergrundfarbe zur Geltung. Schaffen Sie daher mit der CSS-Anweisung

.farbbereich {padding:20px;}

einen Freiraum zwischen dem Rand der Abschnitte und den darin eingeschlossenen Seitenobjekten wie Text und Bildern. Weisen diese Klasse dem jeweiligen Abschnitt mit <div class="farbbereich"> zu. Bei den Absätzen des Fließtextes lässt sich der Abstand zwischen den einzelnen Buchstaben und zwischen den Zeilen mit dem folgenden Format vergrößern:

. farbbereich p {letter-spacing:
0.1em; line-height:130%;}

Mehr lesen

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Webdesign

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.
Facebook

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?
Online-Recht

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Recht in der Cloud

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…
E-Commerce-Logistik

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.