Gewusst wie: Sonstiges

Farben – Underdog im Webdesign?

Farben im Webdesign sind nicht nur eine einfache Verschönerung, sondern ermöglichen die visuelle Gliederung von Inhalten. Sie dienen in erster Linie als Wegweiser für die Benutzerführung und Gliederung der Seiteninhalte.

Stellen wir uns einmal vor, dass jeglicher Inhalt auf einer Webseite farblich gleich dargestellt wird, so dass Überschriften, Verlinkungen und der Fließtext keine Unterschiede aufweisen. Würden Sie sich in kurzer Zeit gut zurecht finden und durch unterschiedlich verlinkte Seitenbereiche navigieren können? Es folgen zum Teil erfolglose Versuche Texte anzuklicken, zu markieren oder gar Überschriften mit Navigationselementen zu verwechseln.

An dieser Stelle kann sich der Trugschluss auftun, eine Darstellung dieser Art sei optimal für die Lesbarkeit und den Lesefluss ausgewählt, doch können verlinkte Textabschnitte nicht eindeutig erkannt werden. Das bedeutet, dass die Darstellung direkt mit der Gestaltung der Benutzeroberfläche (Interface Design) in Konflikt gerät. Das Ergebnis ist in den meisten Fällen eine negative Benutzererfahrung (User Experience).

Die Besucher einer Webseite haben dadurch nur wenige Möglichkeiten und springen ab zum nächsten Internetangebot. Das kann nicht Sinn und Zweck eines guten Webdesigns sein. Haben Sie daher bei der Gestaltung einer Webseite neben der Auswahl von Typografie, Grafiken und Bildern auch einen Blick auf den hilfreichen Einsatz von Farben.

 

Farbräume schaffen, Kontraste nutzen

Mit starken oder dezenten Farben (zum Beispiel im Hintergrund von Texten) können besondere Bereiche für Besucher hervorgehoben werden, so dass wichtige Inhalte auch visuell als wichtig kommuniziert werden. In solch farbenfrohen Bereichen steigt die Verweildauer. Durch die farblichen Abgrenzungen (Kontraste) entsteht eine geordnete und in sich ruhende Anordnung (Layout), die so eine konzentrierte Wahrnehmung des Themas ermöglicht.

 

Vertrauensbildung zur Marke und Webseite

In Fachkreisen wird an dieser Stelle vom »Trust the Brand« gesprochen. Denn mit einem umfassenden Corporate Design können dem Betrachtenden verständliche Gesetzmäßigkeiten in der Markendarstellung aufgezeigt und somit ein hoher Wiedererkennungswert ermöglich werden. Taucht zum Beispiel

  • das Logo des Unternehmens immer in der oberen, linken Ecke auf,
  • werden besondere Stichworte (Buzz- bzw. Keywords) in der Hausfarbe der Marke präsentiert und
  • heben sich Überschriften in Größe und Schriftstärke klar vom Fließtext ab,

werden dem Betrachtenden klare Vorgaben zur weiteren Verwendung der Inhalte vermittelt. Überschriften werden trotz einem eventuellen »Überfliegen des Textes« stärker wahrgenommen und verlinkte Inhalte mittels einer auffälligen Schmuck- bzw. Brand-Farbe aktiv genutzt.

So fließen beispielsweise in der Webseiten-Darstellung der ÖAB (Ökumenische Arbeitsgemeinschaft für Bibellesen) Hausfarbe und Typografie in jegliche Inhalte mit ein.

Wichtige Verlinkungen in der Navigation und im inhaltlichen Bereich sollten in einer Corporate-Farbe präsentiert werden, wohingegen Überschriften und Fließtexte farblich abgeschwächt in den Hintergrund rücken können. Unterstützendes Bildmaterial für viele Unterbereiche der Webseite, helfen bei der Themenfindung und leiten an zu weiteren Aktionen auf dem Internetangebot.

 

Der Nutzen steht im Vordergrund

Die schönste Überschrift samt aller Formatierungen hat keinen Nutzen, solange sie gelb auf weißem Grund unleserlich platziert wird.

Überschriften reißen ein Thema kurzgehalten an und schüren Neugier auf die im weiteren Verlauf des Fließtextes eingebetteten Informationen. Daher ist deren Formatierung wichtiger und somit auffälliger, als die eines typischen Fließtextes. Hinweis: Überschriften gibt es in mehrfachen Ausgaben!

Verlinkungen sollten sich farblich stark vom restlichen Inhalt (Überschriften, Fließtexte usw.) abheben, so dass sich schnellstmöglich ein weiterer »Wegabschnitt« für den Webseiten-User auf dem Internetangebot eröffnet. An passender Stelle, können statt Text-Verlinkungen auch Buttons unterstützend eingebunden werden.

Fließtexte oder auch Infotexte stellen den klassichen Inhalt einer Webseite dar. Je nach Branche, werden für Webseiten serifenlose oder -betonte Schriftarten verwendet, um eine bessere Lesbarkeit auf dem Bildschirm (und verschiedenen Ausgabegeräten) zu gewährleisten und ein harmonisches Gesamtbild zu schaffen.

Seit einigen Jahren bieten verschiedene Web-Bibliotheken (zum Beispiel Google Fonts) besondere Schriftarten für Webseiten an, die in beinahe allen Internetbrowsern auf unterschiedlichen Ausgabegeräten dargestellt werden können. Weitere Anpassungen im Schriftschnitt oder -stil, wie beispielsweise am Zeilenabstand und dem Zeichenabstand (der Laufweite oder auch »Spationierung«) können den Lesefluss positiv beeinflussen und erleichtern.

 

Wegbereiter mit neuen Farben

Im Kopf- und Fußbereich einer Webseite (Header und Footer) können Links ebenfalls die aktuelle Linkfarbe aus dem Fließtext erhalten. Wobei aber diese beiden Bereiche in den meisten Fällen nicht in den inhaltlichen Bereich (Content) einer Webseite hineinfließen (Beispiel: gleicher Hintergrund durch Bilder oder Farben), kann an dieser Stelle auch eine Ausnahme gemacht- und auf weitere Farbräume der Marke gewechselt werden.

Hinweis: Neben allen Inhalten, steht auf einer Webseite die User Experience im Vordergrund. Sofern diese mit dem Internetauftritt harmoniert, können sogar Absprungraten und weiter ausschlaggebende Punkte der SEO stark verbessert werden.

 

Farben führen an

Fazit: Mit den passenden Farben zum Webdesign, werden den Seitenbesuchenden klare Wege, Grenzen und Optionen aufgezeigt. Eine schnelle und leichte Navigation auf der Webseite wird ermöglicht und der Wiedererkennungswert zum Markenauftritt gestärkt. Versuchen Sie es doch einfach mal auf Ihrer Webseite mit neuen Gestaltungselementen und Farben aus. Und sollten Sie einmal nicht weiterwissen, stehen wir Ihnen gerne als Internet- und Medienagentur in Berlin-Charlottenburg mit Rat und Tat zur Seite.

(PB)

ABBY-Lizenzierungsdienst

Fehlermeldung

ABBY-Lizenzierungsdienst ist nicht verfügbar: Der RPC-Server ist nicht erreichbar

Verwendete Komponenten

Windows 10
ABBYY FineReader 11

Lösung

Über Systemsteuerung > Dienste den Dienst aktivieren/starten. Ggf. ist nach einem Neustart oder beim nächsten Windows-Update die Einstellung wieder zurückgesetzt, dann muss der Vorgang wiederholt werden.

Outlook-Suche

Gerade wenn E-Mails zur Hauptkommunikation gehören, ist es wichtig, zu wissen, wie man etwas in der Vielzahl an Ordnern, die man möglicherweise angelegt hat, suchen kann.

Hier eine Übersicht spezieller Suchoperatoren zur Suche in Outlook:

Absender und Inhalt

Suchoperator Beispielsuche Ausgabe von Elementen, die
von: von:Ralf Würtz von Ralf Würtz an mich gesendet wurden
cc: cc:Ralf Würtz in Kopie an Ralf Würtz gesendet wurden
an: an:info@gotoralf.de an die Adressde info@gotoralf.de durch uns gesendet wurden (Such im Ordner Gesendete Objekte)
Betreff: Betreff:dringend dringend im Betreff stehen haben (nicht bei Outlook 2010 und älter)
Thema: (=Betreff) Thema:dringend dringend im Betreff stehen haben
Inhalt: Inhalt:Angebot Angebot im Textfeld stehen haben

Anhang und Größe der E-Mail

Suchoperator Beispielsuche Ausgabe von Elementen, die
hatanlage: hatanlage:ja eine Anlage / einen Anhang haben
anlage: anlage:presentation.pptx als Anlage die Datei presentation.pptx haben
größe: größe:<5KB kleiner als 5KB sind (größe erfordert <,> oder =)
nachrichtengröße: nachrichtengröße:groß zwischen 100 und 500 KB liegen

Datum und Fälligkeiten

Suchoperator Beispielsuche Ausgabe von Elementen, die
gesendet: gesendet:6.09.2016 am 6.09.2016 gesendet wurden (Suche in Gesendete Objekte)
empfangen: empfangen:gestern gestern empfangen wurden.
empfangen:Dienstag am Dienstag empfangen wurden.
empfangen:November im November empfangen wurden.
gelesen: gelesen:nein noch nicht gelesen wurden
Betreff: Betreff:dringend dringend im Betreff stehen haben (Betreff: erst ab Outlook 2013).
Thema: Thema:dringend dringend im Thema stehen haben.
istmarkiert: istmarkiert:wahr zur Nachverfolgung markiert sind
fällig: fällig:letzte Woche bis zur letzten Woche fällig waren, zur Nachverfolgung markiert sind.