Der richtige Einsatz von Farbe und Typografie für Onlineshops

März 22, 2017
0

Farben und deren Wirkung

Wir assoziieren Farben mit spezifischen Begriffen, Gefühlen oder Zuständen. Durch die Wahl Ihrer Farben wird also eine ganz bestimmte Wirkung erzielt. Dabei kommt es vor allem darauf an, Farben nicht nach dem persönlichen Geschmack auszuwählen, sondern gezielt entsprechend der psychologischen Wirkung einzusetzen.

Puma - Rot


GelbGelb
(Optimistisch, heiter und fröhlich)

RotRot
(Steht für Energie, erzeugt ein Gefühl der Dringlichkeit, erregt die Aufmerksamkeit als Signalfarbe)

BlauBlau
(Erzeugt ein Gefühl von Vertrauen und Sicherheit, sie ist eine typische Business-Farbe, da sie nüchtern, sachlich und vertrauensvoll wirkt. Allzu viele Emotionen kann sie aber nicht vermitteln)

GrünGrün
(Wirkt lebendig und natürlich, Assoziation mit Gesundheit)

OrangeOrange
(Steht für Freude und Wärme, wirkt freundlich und mit ihr beworbene Produkte wirken meistens eher günstiger/billiger)

Douglas - Grün

SchwarzSchwarz
(Besonders Kraftvoll und sehr kontrastreich, kann düster und hemmend wirken)

WeißWeiß
(Wirkt neutral, freundlich und wird sehr gerne als Hintergrundfarbe in Screendesigns eingesetzt)

Der Farbeinsatz muss außerdem zum Unternehmen, zum Produkt, zur Dienstleistung und der gewünschten Aussage passen. Bei der Auswahl der Farben sind die Kenntnisse der einzelnen Farbwirkungen unerlässlich. Diese alleine reichen aber noch nicht für eine Entscheidung. Ein Rot kann genauso aggressiv wie edel wirken. Der genaue Farbton macht den Unterschied. Und auch das Zusammenspiel mit den anderen Farben und grafischen Elementen wie Bilder, Illustrationen und der Typografie entscheidet über die Wirkung der einzelnen Farben und die Gesamtwirkung.

Einheitlichkeit, Wiedererkennung und Differenzierung spielen bei der Farbauswahl ebenfalls eine große Rolle. Diese Werte werden erreicht, wenn ein individueller Farbton gewählt wurde, der passend erscheint. Denn die Farben prägen sich nachhaltiger ein als Schriften oder Bilder/Illustrationen. Durch eine einprägende Farbe können sich Besucher Ihren Webshop viel schneller und besser einprägen und auch wiedererkennen. Zudem sorgen Farben durch ihren Einsatz und Kontrast für eine Gewichtung der Elemente. Sie können Aufmerksamkeit erzeugen, Inhalte vermitteln und Elemente visuell gruppieren.

Viaprinto - Orange

Tipps

  • Achten Sie auf die Wirkung der Farben und bei der Farbmischung auf Kontraste und Harmonien
  • Isolierte Verwendung gesättigter Farben schafft Aufmerksamkeit (sparsamer Einsatz um „Highlights“ zu setzen)
  • Zu viele Effekte durch unterschiedliche Farben bedeutet eine enorme (Über-) Anstrengung für den Betrachter, dessen Aufmerksamkeit dann dramatisch sinkt. Warum sich die Mühe machen, Besucher in Suchmaschinen mittels Optimierung gezielt abzuholen und dann durch das Design zu überfordern und damit schließlich zu vertreiben?

 

 

Typografie – nicht bloß Text

Wichtig ist es bei dem Einsatz von Schriftarten, dass diese auch für den User lesbar sind, denn die besten Inhalte bringen nichts, wenn der Leser diese nicht oder nur schwierig entziffern kann. Dabei kommt es vor allem auf die Schriftgröße, den Zeilenabstand und die Zeilenlänge an. Standardmäßig wird hierbei ca. 14pt für Fließtexte verwendet und für Überschriften etwa ab 20pt aufwärts, um einen ausreichenden Kontrast zu gewährleisten. Der Kontrast einer Serifenschrift im Hauptbereich mit einer serifenlosen Schrift als Titelüberschrift oder umgekehrt kann zusätzlich die allgemeine visuelle Erscheinung und Lesbarkeit verbessern. Als Zeilenlänge werden circa 45 – 75 Zeichen pro Zeile als ideal bezeichnet.

Außerdem ist es wichtig, dass websichere Schriften verwendet werden, da nicht jeder die gewählte Schriftart auch automatisch auf seinem Computer installiert hat. Durch die von Google bereitgestellte Google-Font-Api werden immer mehr Schriften einheitlich auf unterschiedlichsten Internetseiten dargestellt. Dies ermöglicht ein viel größeres Spektrum an Schriftarten, welche weboptimiert dargestellt werden können.

Typografie - ausgefallene Schriften

Tipps

  • Sie sollten darauf achten, dass genügend Weißraum vorhanden ist, damit die Schrift wirken kann und nicht von anderen Elementen gestört wird
  • Zu viele unterschiedliche Schriftarten und Schriftschnitte (bold, italic, …) verringern den Kontrast untereinander, es sollte damit sparsam umgegangen werden (zwei bis drei Schriftarten oder -schnitte sind optimal)
  • Eine saubere und ordentliche Hierarchie sollte eingehalten werden, sodass sich die Überschrift (Bsp.: h1) deutlich vom Fließtext abhebt und sich auch Unter-/Zwischenüberschriften kenntlich voneinander unterscheiden

Über omeco: wir sind Hersteller einer Shopsystem-Software mit integriertem Warenwirtschaftssystem. Weiterhin helfen wir unseren Kunden, wenn Sie einen Onlineshop erstellen möchten, mit Support, ecommerce Beratung, Programmier-Leistungen.  Unser Ziel ist es, dass unsere Kunden einen optimalen Nutzen unserer Onlineshop Software erzielen können.

Avatar for Annkathrin Seefeldt

Annkathrin Seefeldt

Mediengestalterin bei omeco GmbH
Annkathrin ist gelernte Mediengestalterin und beschäftigt sich derzeit intensiv mit der Kreation und der Umsetzung von Onlineshop-Designs auf Basis der Onlineshop Software von MONDO MEDIA.
Avatar for Annkathrin Seefeldt

Letzte Artikel von Annkathrin Seefeldt (Alle anzeigen)

Schreibe einen Kommentar