Design und Farbe für den perfekten Online-Auftritt

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

Damit die Wahl der Farben nicht zur Qual wird: Gestalten Sie mit unseren Tipps und Tools die optimale Farbpalette für Ihren 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 Komponente.

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 ().

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.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".