> > > Die Wirkung visueller Gestaltungsmittel

Die Wirkung visueller Gestaltungsmittel

Die Wirkung visueller Gestaltungsmittel
TrafficDesign
https://www.trafficdesign.de/sites/all/themes/trafficdesign/images/trafficdesign-250.png
Hinweis: Dieser KnowHow-Artikel wurde von Sandra innerhalb eines Praktikums verfasst und von uns vor der Veröffentlichung auf Richtigkeit überprüft.

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.


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

  1. FARBE: Die richtige Farbwahl, um Emotionen zu transportieren und Reize zu setzen
  2. TYPOGRAPHIE: 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 ganz 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 Unternehens oftmals mit einer bestimmten Farbgebung assoziiert.
Gelb → Deutsche Post , 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. Typographische Aspekte und ihre Wirkung

Es wird grundsätzlich unterschieden zwischen Online -und Printmedien. Wir widmen uns hier der Online Typographie. 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. Typographie weckt Interesse und Ewartung, steuert die Leserichtung sowie die Geschwindigkeit in der wir einen Text lesen.

2.1 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? Ein weiterer Aspekt ist die Pixelgröße. So wird bei Online Medien von mindestens 16 Pixel ausgegangen. Ebenso gilt es aber auch, auf die inhaltliche Komponente zu achten; trennen Sie Texte inhaltlich! 

 

  • 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 Typographien
    ...wie zum Beispiel Helvetica, Frutiger oder Roboto 

  • Flattersatz (offener Zeilenfall)
    Wirkung: 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)
    Wirkung: 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


2.2 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.

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. 

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.

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.

 

TIPP: 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, dass 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. Arbeiten Sie auch an dieser Stelle mit visuellen Reizen und Emotionen. 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 3 wichtige Aspekte zu beachten. Zum einen die Pixelanzahl (Bildgröße), 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 Tranzparenz
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)

 

TIPP: Ziehen Sie eigene Bilder den gekauften vor. Damit umgehen Sie der 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.
Lassen Sie Ihr Bild durch eine runde Form hervorstechen. 
       

https://www.trafficdesign.de/sites/default/files/styles/twittercard/public/TC_sandra2_0.jpg?itok=6T3nbrst
Fanden Sie den Artikel hilfreich?
Noch keine Stimmen
Sandra Salzwedel
Als Praktikantin bei TrafficDesign bin ich in der Online Redaktion und im Content Marketing tätig. Ich liebe es die Welt zu entdecken, bin Kreativkopf und Musikerin.

Kostenlose Erstanalyse

Tragen Sie Ihre Website ein und erhalten Sie eine kostenlose Einschätzung Ihres Online Marketing Potenzials.

Oder schicken Sie uns eine Kontaktanfrage

Fragen oder Probleme zu diesem Thema?

Einfach kommentieren und wir helfen Ihnen kostenlos und zeitnah weiter.

Kommentar verfassen

Vergessen Sie nicht Ihr Neukundenangebot!

Zurück zum Angebot

Nicht mehr anzeigen