Exkurs: Save the pixel

Vertriebssysteme / CRMJohannes HoppeDipl. Inf. (FH) Johannes Hoppe

SRH Hochschule HeidelbergFachbereich Informatik

Dipl. Inf. (FH) Johannes Hoppe

Exkurs: Save the Pixel

16.03.2009 + 23.03.2009


Exkurs1. Kompositionslehre2. The Art of Simple Web Design

a) Effizienz und Schlichtheit

b) Besucherspezifische Kommunikation

Inhalt

4

1. Mini-Kompositionslehre

Komposition

- [lateinisch] die, allgemein: Zusammensetzung, -stellung von

Dingen aus Einzelteilen

- Bezeichnung für den formalen Aufbau von Kunstwerken

- Bezieht sich auf Teile und die zw. ihnen herrschenden Relation


5

1. Kompositionslehre

Elemente der Komposition (1/3)

- Anordnung der Figuren

- Kompositionsschema (künstlerische Plan den sich der Künstler

vor Aufnahme seiner Arbeit zusammenstellt)

- Perspektive ((lat. durchschauen) Übertragung des körperlich-

räumlich Geschauten auf die Fläche des Bildes)

- Proportionslehre (Definition der Regeln, nach denen die

Verhältnisse der Teile eines Kunstwerkes untereinander als

harmonisch gelten z.B. Proportionen des menschlichen Körpers,

der goldene Schnitt)


6



- Linien

- Goldener Schnitt (Teilung einer Strecke in zwei ungleich lange

Abschnitte, so dass sich die kürzere zum längeren wie der

längere zur ganzen Strecke verhält; Teilungsverhältnis 5:8)


7



- Flächenhaftigkeit (landschaftliche und architektonische

Hintergründe sind rein flächig gedacht und geformt, so dass jede

Raumtiefe fehlt und alles in der Luft zu schwimmen scheint)

- Symmetrie

- Licht

- Reihung

- Farbe


8


Farbe

- Wirkung auf vielfältige Weise

- Einwirkung der Farbschwingungen auf Organismus und Psyche

- Hohen Einfluss auf Wohlbefinden und Lebensgefühl

- Symbolcharakter von Kulturkreis abhängig


9


Farbe

- Unterschiedliche Wirkung von Farben

- Jede einzelne Farbe hat ihre eigene Wirkung die allgemein für

jeden Menschen Gültigkeit findet


10

- Erregt Aufmerksamkeit- Vitalität- Energie- Liebe & Leidenschaft- Aggressivität- Wut- Brutalität

11

- Optimismus - Lebensfreude- Aufgeschlossenheit- Leichtlebig- Selbstvertrauen

12

- Licht- Heiterkeit - Wissen- Weisheit- Vernunft

- Schmutzige Gelbtöne- Täuschung- Pessimismus

13

- Beruhigend- Harmonie- Hoffnung

Aber auch- Gleichgültigkeit- Stagnation

14

- Wachheit- Offenheit- Freiheit

Aber auch:- Kühle- Distanz - Leere

15

- Kühle Farbe- Ruhe - Vertrauen- Sehnsucht

Aber auch- „Traumtänzer“- Melancholie

16

- Würdevolle Farbe- Kunst- Frömmigkeit- Stolz

Aber auch- Arrogant- Unmoralisch

17

- Idealismus- Dankbarkeit- Mitgefühl

Aber auch - Arroganz- Dominanz

18

- Reinheit- Klarheit- Erhabenheit- Unschuld

Aber auch- Unnahbarkeit- Reserviertheit

19

- vollkommende Neutralität- Zurückhaltung- Kompromissbereitschaft

Aber auch- Langeweile- Eintönigkeit- Unsicherheit- Lebensangst

20

- Trauer- Unergründlichkeit- Unabänderlichkeit

Aber auch- Würde- Ansehen- feierlichen Charakter

21


Wirkung von Farbqualität und -quantität

- Abhängigkeit der Wirkung von Anzahl, Sättigung, Helligkeit und

Temperatur einer Farbe

Helle Farben- Wirkung leicht und freundlich- Ausdruck von Weite, Raum und von Leere- Lebendigkeit und Frische - Gut geeignet als Hintergrund


22



Dunkle Farben- Wirkung düster, schwer und drückend- Vermittlung von Geborgenheit- Gut für Texte geeignet


23



Reine, gesättigte Farben- Wirkung dominant, laut und aufdringlich- Intensive Leuchtkraft- Gegenseitige Konkurrenz- Verwendung in kleinen Mengen- Zusammenwirkung mit ungesättigten

Farbtönen


24



Entsättigte Farbtöne- Wirkung zurückhaltend, sanft und

schmeichelnd

- Einbüßung der Leuchtkraft

- Verwendung in der Modebranche als „Puderfarben“

und zur Darstellung von Perspektive

- Lassen Objekte im Hintergrund weiter entfernt wirken


25



Zarte Farben- Wirkung von Empfindlichkeit,

Zerbrechlichkeit- Gut geeignet für Hintergründe


26



Warme Farben- Strahlen Gemütlichkeit, Wärme und

Ruhe aus


27



Kalte Farben- Wirkung kalt, sachlich und funktional


28



Einzelne Farben- Wirken ordnend und strukturierend- Zusammenfassung von Sachverhalten- Aufmerksamkeiten schaffen- Wichtig; Abstimmung der Farben,

deutliche Unterscheidung


29



Viele Farben- Wirkung chaotisch, Unruhe und

Verwirrung- Schaffung von unangenehmer

Atmosphäre


30


Visuelle Grunderfahrungen

• Die Schwerkraft

• Optische Mitte !!!

• Waagerecht und senkrecht

• Leserichtung

• Symmetrie

• Licht

• Räumliches Sehen

• Ergänzen und Reduzieren


31



Figur-Grund-Differenzierung

Gesetz der Nähe

Gesetz der Ähnlichkeit

Gesetz der Geschlossenheit

Prägnanz-tendenz Kontraste

Gestaltungsgesetze

Goldener SchnittSymmetrie

32



Querformat Hochformat

Vordergrund, Mittelgrund, Hintergrund Silhouette

Linienführung

Gestaltungsgesetze

PerspektiveKreis

33


Gestaltungsgesetze


http://www.feuer-jonglage.com/

http://www.feuer-jonglage.com/

34

2. The Art of Simple Web Design


35


Themen

a) Effizienz und Schlichtheit

b) Besucherspezifische Kommunikation


36

2. The Art of Simple Web Designa) Effizienz und Schlichtheit

Ziele von jedem Webdesign:

Effizienz und Schlichtheit

Die Dinge sollen sich einfach „anfühlen“


37


- Aufmerksamkeitsspanne sehr gering

„elevator pitch“ , Chunking-Hypothese (7 ± 2)

- Menge an Design-Elementen:

So viele wie nötig, und mehr nicht!

Disziplin: Pixel sparen

Denn Pixel sind eine begrenzte Ressource!


38


Entscheidungs-Fragen

1. Befördert es wichtige Informationen?

2. Fügt es der Marke Bedeutung bei?

3. Hilft es bei den folgenden Fragen:

1. „Bin ich am richtigen Ort?“

2. „Bin ich auf dem richtigen Weg um das zu bekommen,

was ich will?“


39


Effekt

• mehr Seriosität

• weniger Arbeit!

• Bessere Wartung usw.

• die Seite wird leichter „erfassbar“ („getable“) „Ich bin am richtigen Ort, um das zu bekommen, was ich möchte“

• Die Seite macht Lust auf mehr („keep the scent“) „Ich werde das bekommen, was ich hier erreichen möchte.“


40


Feststellungen

- Design ist nicht Kunst

- Design dient der Kommunikation mit einer Absicht

- Der Inhalt muss designt werden, nicht nur die Verpackung- Die Verpackung wird schnell ignoriert

Ergo: Design hört nicht bei HTML Templates auf

Nicht: „…hier Inhalt einfügen…“

„Design the content, not the box it comes in”


41


Verpackung / Box

Inhalt / Content

42


Verpackung / Box

Inhalt / Content

???

43


Absichts- / Zielbestimmungen

- Ein Ziel entspricht einem zu erreichenden Endpunkt!

- Design: Der Weg ist nicht das Ziel! Gefahr: kontinuierliche

Updates, keine Konzentration auf das Wesentliche

- Ein Ziel sollten SMART* sein

- Kein Ziel: „Eine coole Website designen“

- Richtiges Ziel: „Eine Seite besitzen, die 20% mehr Umsatz

erzeugt.“


44


Absichts- / Zielbestimmungen

SMART:

S – Simpel bzw. Spezifisch

M – Messbar

A – Angemessen

R – Relevant (Mehrwert)

T – Terminiert


45


An dieser Stelle wurde urheberechtlich geschütztes Material der

SAP AG, Technology Advisory Office gezeigt.


Mit freundlicher Genehmigung von

46

2. The Art of Simple Web Designb) Besucherspezifische Kommunikation

Besucherspezifisch

- Eine Website sollte für ihre Besucher entworfen sein!

Wer sind die tatsächlichen Besucher?

(Zielgruppenbestimmung und Eingrenzung!)

Was ist notwendig, um sie eine Stufe weiter zu bringen?

(Stufe: Conversion Rate… / Usebility, Joy of Use)


47


Joy of Use

- Mögliche passende Übersetzung: „Nutzerspaß“

- Beispiele:

– Angenehme visuelle Gestaltung (angepasst an die Zielgruppe)– Eindeutige, kurze Navigationsbegriffe, Menüeinträge,

Buttonbeschriftungen– Klare Rückmeldung, aussagekräftige Anweisungen &

Fehlermeldungen– Einleuchtende Navigation– Gefühl, die Anwendung zu beherrschen– Erfüllung der Erwartungen


48


Freundlichkeit

- Die Benutzer bleiben nur so lange auf der Website, wie sie das

Gefühl haben, das zu bekommen, was sie wollen

- Der Besucher ist bereits da, er darf nicht wieder verschreckt

werden!!

- Der Besucher erwartet positive Bestätigung

„Bin ich am richtigen Ort?“

„Du bist genau hier richtig!“


49


Positive Bestätigung

Beispiel Shop-Besucher:

„Ich möchte ein Unternehmen, dem ich vertrauen kann.“

„Die Produkte sollten nicht zu teuer sein.“

„Ich möchte bei Fragen jemanden telefonisch erreichen können.“

[…]


50


Wertvolle Worte

- Positive Differenzierung (auf keinen Fall „Un“-Wörter)

- Das gegenteilige Wort sollte nicht negativ besetzt sein!

Beispiel:

„Das Senioren-Handy ist sicher und verlässlich.“

Gegenteil: Unsicher / Unzuverlässig

Niemand würde damit werben, dass das Produkt unsicher oder

unzuverlässig ist. Es wird vorausgesetzt!

Pixel verschenkt!


51


Wertvolle Worte

- Zweiter Versuch:

„Das Senioren-Handy ist sehr einfach und auf das Wesentliche

reduziert.“

Gegenteil: Komplex / Komplett (beides nicht unbedingt schlecht)

Differenzierung, Herausstellung einer bestimmten Position



Vielen Dank für eure Aufmerksamkeit!

ENDE

53

Quellen

[1] Franz von Kutschera

„Ästhetik“ – ISBN 978-3110162769

[2] Kindlers Malereilexikon: Komposition / Directmedia Publishing

GmbH (CD)

[3] Stefanie Panitz „Gestaltungsgesetze“

http://online-zeichenkurs.de/

[4] Ben Hunt

„Save the Pixel: The Art of Simple Web Design“

http://savethepixel.org/




http://savethepixel.org/