exkurs: save the pixel
DESCRIPTION
Die Präsentation führt in meine Grundsätze für ein schlichtes und effektives Webdesign ein. Inhalte sind Kompositionslehre, Effizienz und Schlichtheit und besucherspezifische Kommunikation.TRANSCRIPT
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
Dipl. Inf. (FH) Johannes Hoppe
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
Exkurs: Save the Pixel
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)
Exkurs: Save the Pixel
6
1. Kompositionslehre
Elemente der Komposition (2/3)
- 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)
Exkurs: Save the Pixel
7
1. Kompositionslehre
Elemente der Komposition (3/3)
- 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
Exkurs: Save the Pixel
8
1. Kompositionslehre
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
Exkurs: Save the Pixel
9
1. Kompositionslehre
Farbe
- Unterschiedliche Wirkung von Farben
- Jede einzelne Farbe hat ihre eigene Wirkung die allgemein für
jeden Menschen Gültigkeit findet
Exkurs: Save the Pixel
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
1. Kompositionslehre
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
Exkurs: Save the Pixel
22
1. Kompositionslehre
Wirkung von Farbqualität und -quantität
Dunkle Farben- Wirkung düster, schwer und drückend- Vermittlung von Geborgenheit- Gut für Texte geeignet
Exkurs: Save the Pixel
23
1. Kompositionslehre
Wirkung von Farbqualität und -quantität
Reine, gesättigte Farben- Wirkung dominant, laut und aufdringlich- Intensive Leuchtkraft- Gegenseitige Konkurrenz- Verwendung in kleinen Mengen- Zusammenwirkung mit ungesättigten
Farbtönen
Exkurs: Save the Pixel
24
1. Kompositionslehre
Wirkung von Farbqualität und -quantität
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
Exkurs: Save the Pixel
25
1. Kompositionslehre
Wirkung von Farbqualität und -quantität
Zarte Farben- Wirkung von Empfindlichkeit,
Zerbrechlichkeit- Gut geeignet für Hintergründe
Exkurs: Save the Pixel
26
1. Kompositionslehre
Wirkung von Farbqualität und -quantität
Warme Farben- Strahlen Gemütlichkeit, Wärme und
Ruhe aus
Exkurs: Save the Pixel
27
1. Kompositionslehre
Wirkung von Farbqualität und -quantität
Kalte Farben- Wirkung kalt, sachlich und funktional
Exkurs: Save the Pixel
28
1. Kompositionslehre
Wirkung von Farbqualität und -quantität
Einzelne Farben- Wirken ordnend und strukturierend- Zusammenfassung von Sachverhalten- Aufmerksamkeiten schaffen- Wichtig; Abstimmung der Farben,
deutliche Unterscheidung
Exkurs: Save the Pixel
29
1. Kompositionslehre
Wirkung von Farbqualität und -quantität
Viele Farben- Wirkung chaotisch, Unruhe und
Verwirrung- Schaffung von unangenehmer
Atmosphäre
Exkurs: Save the Pixel
30
1. Kompositionslehre
Visuelle Grunderfahrungen
• Die Schwerkraft
• Optische Mitte !!!
• Waagerecht und senkrecht
• Leserichtung
• Symmetrie
• Licht
• Räumliches Sehen
• Ergänzen und Reduzieren
Exkurs: Save the Pixel
31
1. Kompositionslehre
Exkurs: Save the Pixel
Figur-Grund-Differenzierung
Gesetz der Nähe
Gesetz der Ähnlichkeit
Gesetz der Geschlossenheit
Prägnanz-tendenz Kontraste
Gestaltungsgesetze
Goldener SchnittSymmetrie
32
1. Kompositionslehre
Exkurs: Save the Pixel
Querformat Hochformat
Vordergrund, Mittelgrund, Hintergrund Silhouette
Linienführung
Gestaltungsgesetze
PerspektiveKreis
33
1. Kompositionslehre
Gestaltungsgesetze
Exkurs: Save the Pixel
http://www.feuer-jonglage.com/
34
2. The Art of Simple Web Design
Exkurs: Save the Pixel
35
2. The Art of Simple Web Design
Themen
a) Effizienz und Schlichtheit
b) Besucherspezifische Kommunikation
Exkurs: Save the Pixel
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“
Exkurs: Save the Pixel
37
2. The Art of Simple Web Designa) Effizienz und Schlichtheit
- 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!
Exkurs: Save the Pixel
38
2. The Art of Simple Web Designa) Effizienz und Schlichtheit
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?“
Exkurs: Save the Pixel
39
2. The Art of Simple Web Designa) Effizienz und Schlichtheit
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.“
Exkurs: Save the Pixel
40
2. The Art of Simple Web Designa) Effizienz und Schlichtheit
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”
Exkurs: Save the Pixel
41
Exkurs: Save the Pixel
Verpackung / Box
Inhalt / Content
42
Exkurs: Save the Pixel
Verpackung / Box
Inhalt / Content
???
43
2. The Art of Simple Web Designa) Effizienz und Schlichtheit
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.“
Exkurs: Save the Pixel
44
2. The Art of Simple Web Design
Absichts- / Zielbestimmungen
SMART:
S – Simpel bzw. Spezifisch
M – Messbar
A – Angemessen
R – Relevant (Mehrwert)
T – Terminiert
Exkurs: Save the Pixel
45
2. The Art of Simple Web Design
An dieser Stelle wurde urheberechtlich geschütztes Material der
SAP AG, Technology Advisory Office gezeigt.
Exkurs: Save the Pixel
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)
Exkurs: Save the Pixel
47
2. The Art of Simple Web Designb) Besucherspezifische Kommunikation
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
Exkurs: Save the Pixel
48
2. The Art of Simple Web Designb) Besucherspezifische Kommunikation
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!“
Exkurs: Save the Pixel
49
2. The Art of Simple Web Designb) Besucherspezifische Kommunikation
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.“
[…]
Exkurs: Save the Pixel
50
2. The Art of Simple Web Designb) Besucherspezifische Kommunikation
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!
Exkurs: Save the Pixel
51
2. The Art of Simple Web Designb) Besucherspezifische Kommunikation
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
Exkurs: Save the Pixel
Dipl. Inf. (FH) Johannes Hoppe
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/
Exkurs: Save the Pixel