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.

Tipps und Tools zur Farbgestaltung

© 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 zum Thema

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden Ergebnissen…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste einspannen.…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…