Die Wirkung visueller Gestaltungsmittel

Man sagt, dass visuelle Eindrücke unterbewusst innerhalb weniger Sekunden vom Menschen aufgenommen und bewertet werden. Wir zeigen Ihnen, wie Sie mit Hilfe der nachstehenden Tipps Ihren Online Auftritt attraktiver gestalten und folglich, durch den gezielten Einsatz von Reizen, dem Nutzerverhalten einen bewussten Impuls geben können.

Autor: trafficdesign

· Veröffentlicht: · Zuletzt aktualisiert: ·

Online Marketing

· 6 Min. Lesezeit

Überblick über die Gestaltungsmittel

Wir unterteilen zunächst in die wichtigsten Kategorien von Gestaltungsmitteln, die den größten Einfluss erzielen:

  1. Farbe: Die richtige Farbwahl, um Emotionen zu transportieren und Reize zu setzen.
  2. Typografie: Die richtigen Schriftarttypen und Textformatierung für eine bessere Leserlichkeit.
  3. Formen: Durch den Einsatz von geometrischen Formen, Statik und Ausgeglichenheit in Ihre Gestaltung bringen.
  4. Bilder: Mit ausdrucksstarken Bildern, mehr Lebendigkeit in Ihrer Gestaltung setzen.

1. Die Wirkung und der Einsatz von Farben

Das Erste, was der User auf einer Website wahrnimmt, ist zu 90 % die Dominanz der Farbgebung, welche Ihr Online Profil umgibt. Unser Gehirn ist mit einer Farbkarte ausgestattet, die im Unterbewusstsein Eindrücke und Emotionen für jede Farbe verknüpft hat.

Eine gezielt gesetzte Wirkung kann demnach Ihren Online Erfolg entscheidend beeinflussen. Die richtige Farbwahl ist mithin entscheidend für den ersten Eindruck, wenn wir eine Website besuchen. So wird beispielsweise der Wiedererkennungswert eines Unternehmens oftmals mit einer bestimmten Farbgebung assoziiert. Beispielsweise: Gelb → Deutsche Post oder Blau → Facebook.

Bevor Sie sich jedoch für die Farbwahl Ihrer Website entscheiden, ist es vorab wichtig zu wissen:

1. Wie will ich auftreten (seriös? verspielt? modern?)?
2. Was möchte ich vermitteln? Welche Assoziation möchte ich erreichen?
3. Wer ist meine Zielgruppe?

Eine Auswahl der Farbpsychologie

Rot = #passion #dringlichkeit #dynamik #stärke
Gelb = #klareit #impuls #wärme #kommunikation
Grün = #natur #entspannung #gesundheit #wachstum
Blau = #ruhe #produktivität #vertrauen #sehnsucht

2. Typografische Aspekte und ihre Wirkung

Typografische Aspekte finden sich natürlich in jedem Schriftstück wieder. Viele Besonderheiten und mehr Möglichkeiten bietet aber im Gegensatz zum Print natürlich die Online Typografie. Sie liefert uns Orientierung, Kommunikation und verbreitet in erster Linie Information.

Was während des Lesens im Unterbewusstsein passiert und wie wertvoll dieses Gestaltungsmittel in seiner Wirkung ist, hat der ein oder andere möglicherweise schon bemerkt. Typografie weckt Interesse und Erwartung, steuert die Leserichtung sowie die Geschwindigkeit, in der wir einen Text lesen.

Alles eine Frage der Leserlichkeit

Ein Text mit einer guten Leserlichkeit hat eine positive Wirkung auf den Nutzer (er bleibt dran!). Dies setzt sich vor allem aus der Wahl der Schriftart, als auch der Textformatierung zusammen. Entscheide ich mich für einen Flattersatz oder Blocksatz? Habe ich ausreichend Absätze eingefügt (lange Texte auflockern!)? Und wie ist es mit dem Zeilenabstand? Auf diese sieben Punkte sollten Sie auf jeden Fall Acht geben:

  • Schriftarten mischen
    Versuchen Sie nicht mehr als 2 Schriftarten zu kombinieren und achten Sie darauf, harmonierende Schrifttypen zu wählen.
  • Mischregel
    Achten Sie darauf, ähnliche Strukturen zu verwenden. Serife nicht mit Serifenloser Schrift kombinieren.
  • Achten Sie auf die Schriftgröße
    Mindestens 16 Pixel. Wenn Sie zwei Schriftarten im Fließtext kombinieren, gleichen Sie die Größenunterschiede aus.
  • Unterstreichungen meiden
    Unterstreichungen hemmen den Lesefluss. Um Wörter hervorzuheben, nutzen Sie lieber fett oder kursiv.
  • Aufgepasst bei der Farbwahl
    Setzen Sie auf Kontraste. Ein roter Text auf grünem Hintergrund sieht optisch nett aus, ist jedoch weniger attraktiv zu lesen.
  • Nutzen Sie gut lesbare Online Typografien
    …wie zum Beispiel Helvetica, Frutiger oder Roboto
  • Flattersatz (offener Zeilenfall)
    Gibt Kontrast durch kurze und lange Zeilen und vermittelt ein harmonisches Gesamtbild. Gut zu Wissen: Einzeiler sollten nicht zu lang und Satzteile nicht auseinander gerissen werden
  • Blocksatz (geschlossener Zeilenfall)
    Vermittelt ein stimmiges Gesamtbild, mit einheitlicher Grauwirkung. Stellt eine optische Dichte dar, ohne „Löcher im Text“. Gut zu Wissen: Worttrennungen sollten richtig gesetzt werden, sodass die Wortzwischenräume ausgeglichen sind

Die Wirkung von Schrift und Farbe in Kombination

Kombinieren Sie Farbe und Schrift ganz gezielt. Hierbei kommt es u.a. darauf an, inwiefern Sie eine Signalwirkung durch Ihren Text erzielen wollen. Lenken Sie Aufmerksamkeit auf ein Wort, indem Sie es farblich hervorheben. Zum Beispiel das Wort STOPP. Eine weitere Möglichkeit, Farbe und Schrift zu kombinieren besteht darin, die Schrift auf einen farblichen Hintergrund zu legen.

Interessant ist im folgenden Beispiel vor allem die Wahrnehmung, aufgrund der Hintergrundfarbe. Grün steht in diesem Fall, wie wir bereits gelernt haben, für Entspannung. Das Rot vermittelt u. a. Dringlichkeit.

WELCHEM PFEIL WÜRDEN SIE AN DIESER STELLE INTUITIV FOLGEN?

3. Die Wirkung geometrischer Formen

Es gibt eine Reihe psychologischer Aspekte, die man beim Einsatz von Rechtecken, Kreisen oder Dreiecken in der visuellen Gestaltung beachten sollte. Formen werden, wie auch Farben, primär und am stärksten vom Betrachter wahrgenommen. Sie vermitteln ebenso wie Farben, Assoziationen und Emotionen im Unterbewusstsein des Betrachters. Durch ihren Einfluss können auch hier ganz gezielte Reize in der Optimierung Ihres Online Auftritts gesetzt werden.

Statische Quadrate

Quadratische Formen verleihen in der visuellen Gestaltung vor allem Statik und Ausgeglichenheit. Sie vermitteln dem Nutzer Stabilität und Sicherheit. Quadratische Formen sollten Sie einsetzen, wenn Sie auf Solidität und Zuverlässigkeit setzen.

Fortschrittliche Dreiecke

Dreieckeckige Formen gelten als richtungsweisend und stehen für Fortschritt. Sie verkörpern einen dynamischen Charakter und assoziieren Wachstum. Nutzen Sie das dynamische Dreieck, wenn Sie Erfolge erkennbar machen wollen.

Vollkommene Kreise

Kreise vermitteln Vollkommenheit und stehen für Einheit. Im Großen und Ganzen wirkt der Einsatz von Kreisen positiv auf den Nutzer. Sind neben Kreisen andere geometrische Elemente eingesetzt worden, wird sich das Auge zuerst auf den Kreis stürzen. Nutzen Sie diesen Aspekt, um wichtige Bereiche besonders hervorzuheben.

Abrunden: Es kann hilfreich sein, Ecken und Kanten abzurunden, um ein weicheres Gesamtbild zu vermitteln. Ecken und Kanten wirken grundsätzlich eher hart und je nachdem, wie sie eingesetzt werden, aggressiv. 

4. Die Wahrnehmung und der Einsatz von Bildern

Durch das Verwenden von Bildern gestalten Sie Ihre Website lebendiger und bieten dem Nutzer die Möglichkeit, das Visuelle noch intensiver zu erleben. Positive Emotionen zu wecken, ist auch hier der Schlüssel zum Erfolg. Wenn Sie sich entscheiden, Ihren Online Auftritt durch den Einsatz von Bildern zu intensivieren, achten Sie auch hier gezielt auf die folgenden Tipps und Tricks.

Auch bei Bildern sollte das Arbeiten mit visuellen Reizen und Emotionen im Vordergrund stehen. Sorgen Sie dafür, dass sich der Betrachter in das Bild hineinversetzen kann. Der Nutzer soll sich beim Betrachten der Bilder in erster Linie wohlfühlen. Nutzen Sie gezielt Bilder mit Menschen, im Vergleich zum Stillleben. Das stärkt den Bezug des Betrachters. Achten Sie darauf, besondere Detailaufnahmen gekonnt hervorzuheben und setzen Sie auf ausdrucksstarke Bilder.

Bei dem Einsatz von Bildern gilt es drei wichtige Aspekte zu beachten: die Pixelanzahl (Bildgröße), die Dateigröße (wählen Sie eine kleine Dateigröße für schnellere Ladezeit) und das Dateiformat.

Vor- und Nachteile der unterschiedlichen Dateiformate

JPG (Joint Photographic Experts Group)

  • Vorteil: Gut zu komprimieren, ohne großartigen Verlust am Bild
  • Nachteil: Relativ hohe Datengröße. Geringer Verlust von Tiefenschärfe bei Komprimierung. Keine Tranzparenzfunkion

PNG (Portable Network Graphic)

  • Vorteil: Kann wie JPG ebenfalls komprimiert werden und hat eine Tranzparenzoption
  • Nachteil: Hier wird, anders als beim JPG, über die Farbe komprimiert. Dies kann einen Farbverlust zur Folge haben

GIF (Graphics Interchance Format)

  • Vorteil: Animation und Transparenz
  • Nachteil: mit nur 256 Farben kann es bei der Bildwiedergabe, von JPG und PNG nicht mithalten

WEBP (Dateiformat von Google)

  • Vorteil: Vereint die Vorteile aus JPG und PNG in einer Datei
  • Nachteil: Aktuell nur unterstützt von Google Chrome, Opera und Irfan View (mit Hilfe Plugins)

Unsere Tipps, wie Sie die gewünschte Wirkung von Gestaltungsmitteln erzielen:

Selbst schießen!
Ziehen Sie eigene Bilder den gekauften vor. Damit umgehen Sie die Gefahr, dass dieses Bild bereits genutzt und in einem anderen Zusammenhang auftaucht. Ihr Bild ist mithin ein Unikat und wird ausschließlich mit dem von Ihnen gesetzten Inhalt in Verbindung gebracht.

Ein echter EyeCatcher!
Kombinieren Sie Bilder mit geometrischen Formen, nutzen Sie nicht nur Vertikale oder Horizontalformate oder lassen Sie Ihr Bild durch eine runde Form hervorstechen. Oder alles zusammen!

Brauchen Sie Unterstützung bei diesem Thema?

Sprechen Sie uns unverbindlich an und lassen Sie sich von uns beraten.

Anfrage schicken!

  • Awareness & Consideration: Die drei Schritte des Phasen-Modells

    Eine Customer Journey bezeichnet den Weg Ihrer Nutzer von dem ersten Kontakt mit Ihrer Website bis zum Kauf oder – im weniger erfreulichen Fall – zum Absprung. Diese Reise lässt sich in verschiedene Phasen unterteilen. Betrachten Sie die Customer Journey…

  • Attribution Modelling – Was ist der wahre Wert deiner Marketingkanäle?

    Den Wert der Online-Marketing-Aktivitäten zu bestimmen, scheint auf den ersten Blick vielleicht einfach. In Google Analytics oder dem Tool deiner Wahl reinschauen – und schon siehst du, wie viele Conversions z. B. Google Ads generiert hat. Doch was genau wird…

  • 22 Online Marketing Tools: Der ultimative Tool-Guide für deinen Erfolg

    Als Online Marketing Agentur konnten wir bei unserer Arbeit in den Bereichen SEA, SEO, Content und Analyse im Laufe der Zeit ein breites Know-How in Bezug auf Marketing Tools aufbauen, die uns bei den täglichen Aufgaben extrem unterstützen – dieses…