Screen-Layout Struktur- und Farbeinsatz am Bildschirm.

26
Screen-Layout Struktur- und Farbeinsatz am Bildschirm

Transcript of Screen-Layout Struktur- und Farbeinsatz am Bildschirm.

Page 1: Screen-Layout Struktur- und Farbeinsatz am Bildschirm.

Screen-Layout

Struktur- und Farbeinsatz am Bildschirm

Page 2: Screen-Layout Struktur- und Farbeinsatz am Bildschirm.

Sehen

• Sehen = aktiver Prozess• Wir sehen was wir erwarten und wissen• Bildschirm wird als Komposition

verschiedener Elemente wahrgenommen• „Verstehen“ wird durch eine übersichtliche

Gestaltung erleichtert

Page 3: Screen-Layout Struktur- und Farbeinsatz am Bildschirm.

Visuelle Kommunikation

Prinzipien der visuellen Kommunikation nach Aaron Marcus:

• Organisations-Prinzip: einfache, klare Struktur• Ökonomie-Prinzip: wenig Hilfsmittel effizient

einsetzen• Kommunikations-Prinzip: Anpassung des

Konzepts an die Aufnahmefähigkeit des Nutzers

Page 4: Screen-Layout Struktur- und Farbeinsatz am Bildschirm.

Strukturierung des Bildschirminhalts

• Struktur erleichtert die Wahrnehmung• Hintergrund = optischer Rahmen, gibt Halt

soll nicht dominant sein, sondern zurücktreten große Flächen, wenige Farben, Unschärfe

Page 5: Screen-Layout Struktur- und Farbeinsatz am Bildschirm.

Gestaltgesetze

Gesetzmäßigkeiten menschlicher Wahrnehmung

• Zu Beginn des 20. Jahrhunderts von den Psychologen Koffka, Köhler, Wertheimer, Arnheim u. a. beschrieben.

• Ihre Beachtung bei der Komposition kommt der menschlichen Wahrnehmung entgegen.

Page 6: Screen-Layout Struktur- und Farbeinsatz am Bildschirm.

Gestaltgesetze

• Gesetz der Nähe • Gesetz der Ähnlichkeit • Gesetz der Symmetrie• Gesetz der guten Fortsetzung • Gesetz der Prägnanz • Gesetz der Erfahrung

Page 7: Screen-Layout Struktur- und Farbeinsatz am Bildschirm.

Farben

• suggerieren unterschwellig eine Botschaft• lösen Gefühle aus• sind Orientierungshilfe• strukturieren Informationen

Page 8: Screen-Layout Struktur- und Farbeinsatz am Bildschirm.

Subjektive Farbwahrnehmung

1. Biologische Grundlagen – Rot nehmen wir intensiver wahr als Blau.

2. Kulturelle Grundlagen– Schwarz symbolisiert in der westlichen Kultur Tod,

das Böse; steht in Ägypten für Wiedergeburt und Auferstehung.

3. Individuelle Grundlagen– Vorliebe/Abneigung gegenüber bestimmten Farben– Mode

Page 9: Screen-Layout Struktur- und Farbeinsatz am Bildschirm.

Farbsysteme HLS-Farbraum

drei Arten von Farbempfindungen1. Farbton (Hue)

– definiert in 360°-Schritten Rot 0°, Gelb 60°, Grün 120°, Cyan 180°, Blau 240°, Magenta 300°

2. Farbhelligkeit (Lightness) – definiert in Prozent von 0-100%. Weiß 100%;

Schwarz 0%3. Farbsättigung (Saturation)

– Farbreinheit; definiert den Grauanteil in Prozent von 0-100%.

Page 10: Screen-Layout Struktur- und Farbeinsatz am Bildschirm.

FarbsystemeRGB-Farbraum

• Drei Elektronenstrahlen, die auf eine phosphorbeschichtete Glasscheibe geschossen werden, bilden die unterschiedlichen Farben auf dem Bildschirm.

• Das Raster ist aus den drei Grundfarben Rot, Grün und Blau zusammengesetzt: Intensität von 256 Stufen je Farbe ergibt 16 Mio. darstellbare Farben!

Page 11: Screen-Layout Struktur- und Farbeinsatz am Bildschirm.

FarbsystemeFarbmischungen

• Additive Farbmischung (Lichtfarben)– Alle drei Farben leuchten zusammen: höchste

Intensität Weiß, geringste Intensität Schwarz.

• Subtraktive Farbmischung (Körperfarben)– beim CMYK-Modell für den Druck

Page 12: Screen-Layout Struktur- und Farbeinsatz am Bildschirm.

Farbeinsatz• Kalte Farben

dezent, zurückhaltend, gut als Hintergrundfarben

• Warme Farben lebendig, aktiv, laut; sollten gezielt eingesetzt werden

• Kombination Kalt-Warm Aufbau von Spannung

• Einsatz begrenzter Anzahl von Farben, die zueinander passen (zwei bis drei)

• grelle, schreiende Farben unruhiges Gesamtbild

• Ungesättigte Farben, Pastellfarben freundlich, zurückhaltend

Page 13: Screen-Layout Struktur- und Farbeinsatz am Bildschirm.

Farbeinsatz

Auf dezenten Farbenlässt sich leicht etwashervorheben.

Auf schreienden Farbenist es schwer, Dingehervorzuheben

Page 14: Screen-Layout Struktur- und Farbeinsatz am Bildschirm.

Rot

• Kraftvollste, dominanteste Farbe

• Assoziationen: Blut, Feuer, Liebe, Erotik, Leidenschaft

• Russland Anfang 20. Jh. Farbe der Revolution

• Arbeiterbewegung, Kommunismus

• Signalfarbe Stopp-, Warnschilder

• China Glück, Freude, Hochzeit

• Hinduismus Aktivität, Kreativität

• Japan aufgehende Sonne, Gefahr, Wut

• Ägypten Zerstörung, Böses

Page 15: Screen-Layout Struktur- und Farbeinsatz am Bildschirm.

Gelb

• Wärme, Sommer, Sonne, Behaglichkeit

• Farbe des Goldes• Wohlstand• sauer, bitter• Farbe der Geächteten

in der Geschichte (Prostituierte, Juden)

• US-Indianer Tod• China Farbe des

Kaisers• Japan Anmut,

Grazie, Freude• Hebräische Kultur

Schönheit• Eifersucht, Neid

Page 16: Screen-Layout Struktur- und Farbeinsatz am Bildschirm.

Grün

• Natur, Frische, Leben, Wachstum

• Stabilität, Ruhe, Friede• entspannend und

beruhigend• Farbe des Lebens im

Buddhismus• Us-Indianer Friede• Christentum Hl. Geist

• Islam Farbe des Propheten

• China Fruchtbarkeit• Nationalfarbe in Irland• Farbe des Giftes • Hindus Grün = Tod • Unglücksfarbe in

Frankreich grüne Autos unbeliebt!

Page 17: Screen-Layout Struktur- und Farbeinsatz am Bildschirm.

Blau

• Farbe des Himmels • Weite, Tiefe• Unendlichkeit• Treue, Freundschaft• nobel, elegant, kühl• Männlichkeit• Blaue Blume der

Romantik

• Berufsbekleidung der Arbeiter

• Japan Farbe der Bösewichte

• Buddhismus Weisheit

• Blau in fast allen Religionen göttliche Farbe

Page 18: Screen-Layout Struktur- und Farbeinsatz am Bildschirm.

Schwarz

• Westliche Kultur Tod, Trauer

• Unglück• Dunkelheit, Nacht• Schwarz = Farbe der

protestantischen Talare streng, nüchtern

• Seit den 70er Jahren Modefarbe

• Hebräer Verständnis

• Schwarz gilt in Afrika als schönste Farbe fruchtbare Erde = schwarz Wohlstand

• Ägypten Wiedergeburt, Auferstehung

• Buddhismus Unterdrückung

• China Yin und Yang• Hindus Untergang

Page 19: Screen-Layout Struktur- und Farbeinsatz am Bildschirm.

Weiß

• westliche Kultur Reinheit, Sauberkeit

• klar, sachlich, ordentlich

• funktional• In vielen Religionen

steht Weiß für Göttlichkeit, Licht

• Unschuld• US-Indianer

Geburt, Leben• Farbe der Toten:

weißes Totenhemd• Gespenster• Asien Weiß ist

Farbe der Trauer

Page 20: Screen-Layout Struktur- und Farbeinsatz am Bildschirm.

Quellen• Literatur

– Thissen, Frank: Kompendium Screen-Design. Effektiv informieren und kommunizieren mit Multimedia, 3. Auflage, Berlin 2003

• Links– http://www.be-lufthansa.com/jobs_und_karrier

e.html in der Fassung vom 11.8.2006

– http://www.google.de/dirhp?hl=de in der Fassung vom 11.8.2006

Page 21: Screen-Layout Struktur- und Farbeinsatz am Bildschirm.

Quellen• Links

– https://www.amazon.de/gp/yourstore/302-8069261-4676051?ie=UTF8&path=%2Fgp%2Fyourstore&signIn=1&useRedirectOnSuccess=1&action=sign-out in der Fassung vom 11.8.2006

– http://www.nestle.com/Interest_Areas/Cooking/Home+cooking/ in der Fassung vom 3.8.2006

– http://www.cosmopolitan.com/ in der Fassung vom 11.8.2006

Page 22: Screen-Layout Struktur- und Farbeinsatz am Bildschirm.
Page 23: Screen-Layout Struktur- und Farbeinsatz am Bildschirm.
Page 24: Screen-Layout Struktur- und Farbeinsatz am Bildschirm.
Page 25: Screen-Layout Struktur- und Farbeinsatz am Bildschirm.
Page 26: Screen-Layout Struktur- und Farbeinsatz am Bildschirm.