Räumlichkeit

Wie funktioniert visuelle Tiefenstaffelung?

Mit zunehmendem Abstand erscheinen uns Dinge:

kleiner

mit weniger Kontrast

mit weniger warmen und gesättigten Farben

./images/playmobil-edit-01.png

Mit zunehmendem Abstand erscheinen uns Dinge …

./images/playmobil-edit-02.png

kleiner …

./images/playmobil-edit-03.png

mit weniger Kontrast …

./images/playmobil-edit-04.png

mit weniger gesättigten Farben.

Ich bin die Headline Ja, wir finden auch, dass man über die Copy noch mal reden sollte. Das hier kann es jedenfalls nicht sein. Das klingt ja wie auf dem Totenbett getextet. Da muss wesentlich mehr Produktaussage rein.
Ich bin die Headline Ja, wir finden auch, dass man über die Copy noch mal reden sollte. Das hier kann es jedenfalls nicht sein. Das klingt ja wie auf dem Totenbett getextet. Da muss wesentlich mehr Produktaussage rein.
Ich bin die Headline Ja, wir finden auch, dass man über die Copy noch mal reden sollte. Das hier kann es jedenfalls nicht sein. Das klingt ja wie auf dem Totenbett getextet. Da muss wesentlich mehr Produktaussage rein.

Größe

Große Elemente werden gegenüber kleinen Elementen als im Vordergrund stehend wahrgenommen.
images/raeumlichkeit-groesse-01.png
images/raeumlichkeit-groesse-02.png

Kontrast

Kontrastreiche Elemente werden gegenüber kontrastarmen Elementen als im Vordergrund stehend wahrgenommen.
images/raeumlichkeit-kontrast-01.png
images/raeumlichkeit-kontrast-02.png

Sättigung

Elemente in warmen und gesättigten Farben werden gegenüber Elementen in kalten und ungesättigten Farben als im Vordergrund stehend wahrgenommen.
images/raeumlichkeit-farbe-01.png
images/raeumlichkeit-farbe-02.png

Überdeckung

Elemente, die andere Elemente überdecken, werden als im Vordergrund stehend wahrgenommen.
images/raeumlichkeit-ueberdeckung-01.png
images/raeumlichkeit-ueberdeckung-02.png
images/raeumlichkeit-ueberdeckung-03.png

Animation

Bewegte Bilder oder Elemente werden von uns bevorzugt wahrgenommen.
images/animation-1.png
images/animation-2.gif

Anwendungsbeispiele

./images/apple.jpg

Welche Regeln werden hier genutzt?

./images/arte.jpg

Welche Regeln werden hier genutzt?

./images/fhd.jpg

Welche Regeln werden hier genutzt?

./images/kalender.jpg

Welche Regeln werden hier genutzt?

./images/steam.png

Welche Regeln werden hier genutzt?

./images/cleo.png

Welche Regeln werden hier genutzt?

./images/audi.jpg

Welche Regeln werden hier genutzt?

./images/notice-2.jpg
./images/notice-1.jpg
./images/visual-h.jpg

Welche Regeln werden hier genutzt?

./images/visual-hierarchy.jpg

Welche Regeln werden hier genutzt?

Danke für's Mitmachen

https://christiannoss.de