Suche

Spenden

 

Design und Farbe

für den Online-Auftritt
Der erste Eindruck zählt: Surfer, die ein Web-Angebot zum ersten Mal besuchen, bilden sich schnell eine bleibende Meinung. Wirkt die Website unprofessionell, färbt dieser Eindruck auf den Website-Betreiber ab.
Ein wichtiges Kriterium für die erste Bewertung ist die farbliche Gestaltung. Schließlich dienen Farben nicht nur dem bloßen Schmuck. Sie unterstützen die Struktur und damit die Les- und Benutzbarkeit der Online-Inhalte. Zudem hat die Verwendung von Farben auch eine psychologische

Vorgaben durch Corporate Design

Grundsätzlich stehen Ihrer Kreativität Tür und Tor offen. Sie haben jedoch nicht bei allen Website-Projekten den vollen Gestaltungsspielraum. So ist die Farbpalette in vielen Firmen und Organisationen in Teilen oder sogar komplett durch ein Corporate Design vorgegeben. In diesem Fall bleibt dem Designer häufig nur die Möglichkeit, die Funktionen der einzelnen Farben für das Layout festzulegen sowie deren Wirkung durch Abstände und Linienbreiten zu beeinflussen.

Ist jedoch nur die Hauptfarbe durch ein Design-Manual oder das Firmenlogo vorgegeben, so haben Sie Raum für Kreativität. Nutzen Sie diesen, indem Sie beispielsweise in einer kühlen, annähernd monochromen Farbwelt in Abstufungen von blauen, grauen und weißen Farbtönen mit frischen warmen Farben wie Orange oder Rot gezielt Akzente setzen.

Palette zusammenstellen

Um die richtigen Farbkombinationen zu finden, müssen Sie nicht mühsam mit dem Grafikprogramm experimentieren. Lassen Sie sich bei der Zusammenstellung von Online-Diensten unterstützen: Einen guten Service bietet der kostenlose Color Scheme Designer (http://colorschemedesigner.com).

Legen Sie eine Palette nach unterschiedlichen Vorgaben an und passen Sie diese gegebenenfalls in Helligkeit, Sättigung und Kontrast an. Starten Sie mit der Auswahl einer Grundfarbe. Über den Button mono erzeugen Sie eine Palette, die die Ausgangsfarbe in verschiedenen Abstufungen enthält. Die Komplementärfarbe fügen Sie über complement zur Palette hinzu.

Weitere Methoden wie triad, tetrad und analogic kombinieren im Farbkreis gegenüber- oder nebeneinanderliegende Farbwerte. Wie weißer, grauer und schwarzer Text auf den Farbflächen wirken, sehen Sie bei Aktivierung der Option Show Text. Mithilfe zweier Musterseiten lässt sich die Auswahl noch anschaulicher begutachten.

Über Light page example sehen Sie eine Demoseite, die die ausgewählten Farben auf einem hellen Hintergrund präsentiert, und über Dark page example eine Seite in dunkler Optik. Exportieren Sie die fertige Palette über den Menüpunkt Export flexibel als Text- oder CSS-Datei oder im Palettenformat für Photoshop oder Gimp.

Bild als Vorlage

Anstatt die Farben der eigenen Seiten festzulegen und dazu passende Fotos auszusuchen, wird bisweilen auch der umgekehrte Weg beschritten. Ein Foto oder ein Logo dienen als Vorlage, nach der Sie dann die Farben des Hintergrunds und der übrigen Seitenelemente ausrichten. Eine zum jeweiligen Bild passende Palette lässt sich komfortabel mit dem Color Palette Generator online generieren.

Wählen Sie eine Grafikdatei in den Formaten .png, .jpeg oder .gif aus und laden Sie sie hoch. Legen Sie bei Grid Size fest, ob der Generator 9, 25 oder 49 Farbwerte zusammenstellen soll, und entscheiden Sie bei Method, ob der Dienst mit Precise ausschließlich Farben aus dem Bild anbieten oder mit Average auch eigene Mittelwerte berechnen soll. Das System erzeugt einen Link, über den Sie die Ergebnisseite auch später noch beliebig oft aufrufen können.

Nicht ganz so komfortabel: Die RGB-Werte erscheinen lediglich auf dem Bildschirm, und auch erst durch Berührung der Farbflächen mit der Maus. Eine Download- Möglichkeit für die komplette Liste bietet der Palette Generator. Neben Bildern von der eigenen Festplatte lassen sich hier auch Fotos von Flickr oder Facebook heranziehen. Mit Klick auf Create erscheint neben den Farbflächen ein Feld mit dem entsprechenden CSS-Code sowie ein Link zum Download der Farbpalette im Adobe Swatch Exchange Format (ASE) im Browserfenster.

Eine weitere Vergleichsmöglichkeit liefert der Dienst Whats its color. Das Online-Tool ermittelt die zehn Farbwerte, die am häufigsten im Bild vorkommen. Bei der Farbzusammenstellung lässt sich mit der Option Discard the background die dominierende Hintergrundfarbe ausblenden. Dies macht Sinn bei Bildern, die beispielsweise von einem breiten weißen oder schwarzen Streifen umgeben sind.

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.

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%;}

Grenzen der Farbwahl

Ohnehin sollten Sie bei der Auswahl Ihrer Farben die Anforderungen der Zugänglichkeit und Barrierefreiheit beachten. Halten Sie beispielsweise bei Fließtext und Hintergrund stets einen ausreichenden Kontrast ein. Vorsicht sollten Sie zudem bei bestimmten Farbkombinationen wie beispielsweise Rot und Grün walten lassen: Es gibt zahlreiche Surfer, die wegen Farbenblindheit Schwierigkeiten haben, diese Farbtöne auf dem Bildschirm zu unterscheiden.

Die gängigsten Sehbeeinträchtigungen lassen sich mit dem bereits vorgestellten Color Scheme Designer simulieren. Testen Sie die von Ihnen gewählte Palette über die Einträge im Menü Vision Simulation. Die Layout-Entwürfe Ihrer Website lassen sich ebenfalls entsprechend prüfen: Öffnen Sie die jeweilige Seite Ihres Angebotes mit dem Internet Explorer und geben Sie in die Adresszeile des Browsers den folgenden Javascript-Befehl ein:

javascript:document.body.style.filter=
'gray';void(null);

Die Seite erscheint komplett in Graustufen. In dieser Ansicht erkennen Sie den notwendigen Änderungsbedarf bei der Farbgebung auf einen Blick. Ein Tipp: Nehmen Sie den Befehl in die Liste der Favoriten auf, um ihn nicht jedes Mal neu tippen zu müssen.

Eine weitere Alternative: Erstellen Sie über die Druck-Taste oder die Screenshot-Funktion Ihrer Grafiksoftware einen Bildschirmschnappschuss und wandeln Sie diesen im Bearbeitungsfenster in den Graustufenmodus um. Sind alle Texte lesbar? Lassen sich Links vom sonstigen Text unterscheiden? Erst wenn die Zugänglichkeit gegeben ist, sollten Sie das Angebot scharf schalten.

Wirkung von Farben

Dass Farben unterschiedliche Assoziationen bei den Betrachtern auslösen, ist wohl unumstritten. Manche Farben leiten ihre Bedeutung aus der Natur ab, bei anderen ist die Wirkung teilweise auch vom jeweiligen Kulturkreis beeinflusst. In der westlichen Welt werden den wichtigsten Grundfarben die folgenden, nicht immer nur positiven Attribute zugeschrieben:

Blau: Vertrauen, Treue, Verlässlichkeit, Sachlichkeit, Harmonie, Sicherheit, Ruhe, Kälte, Distanz

Grün: Hoffnung, Natürlichkeit, Wachstum, Frische, Bodenständigkeit, Beruhigung, Unreife, Neid

Rot: Aktivität, Leidenschaft, Impulsivität, Wärme, Warnung, Durchsetzungsfähigkeit, Kraft, Wut, Gewalt, Aggression

Gelb: Heiterkeit, Helligkeit, Klarheit, Weisheit, Krankheit, Egoismus, Feigheit

Orange: Optimismus, Lebensfreude, Kreativität, Ehrgeiz, Überforderung

Violett: Würde, Spiritualität, Magie, Eitelkeit

Schwarz: Kraft, Geradlinigkeit, Individualität, Tod, Morbidität, Trauer, Bedrohung, Böswilligkeit

Weiß: Unschuld, Sauberkeit, Wahrheit, Frieden, Kälte, Leere

Die Kombination von Farbtönen kann deren Wirkung verstärken. So betont beispielsweise die Verbindung von Rot und Schwarz eher die Komponenten Aggression und Bedrohung.

Checkliste: Farbeinsatz

1. Unterstützen Sie mit den gewählten Farben sowohl die Grundaussage als auch die Marke Ihrer Website. Eine strahlend gelbe Seite für ein Beerdigungsinstitut wäre unpassend, hier böten sich eher warme und freundliche Erdtöne an.

2. Orientieren Sie sich beim Layout der Seiten an der Zielgruppe. Kinder finden beispielsweise bunte Seiten interessanter, beim Anbieter von Luxusimmobilien werden die Kunden hingegen eher ein gediegenes Layout erwarten.

3. Beschränken Sie die Anzahl der Farben. Neben Weiß und Schwarz sollten maximal fünf bis sechs weitere Farbtöne genügen. Mit jeder weiteren Farbe werden die Seiten unruhiger und unübersichtlicher.

4. Setzen Sie Farben nicht zum bloßen Schmuck der Seiten ein. Jede Farbe sollte eine Funktion im Layout übernehmen, etwa zur Abgrenzung eines Seitenbereichs.

5. Sorgen Sie für ausreichenden Kontrast zwischen Text- und Hintergrundfarben. Die Lesbarkeit der Seiten hat oberste Priorität.

6. Erwarten Sie nicht, dass Ihre Seiten auf 6. allen Nutzersystemen gleich angezeigt werden. Bei der farblichen Darstellung gibt es von Rechner zu Rechner und von Bildschirm zu Bildschirm zum Teil deutliche Abweichungen. Testen Sie Ihre Palette daher auf so vielen Plattformen wie möglich.

7. Folgen Sie bei der Farbgebung nicht jeder 7. Mode. Ihre Seiten sind in der Regel dauerhafter als die vorübergehenden Trends.