Exkurs: Save the pixel
Upcoming SlideShare
Loading in...5
×
 

Exkurs: Save the pixel

on

  • 819 views

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.

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.

Statistics

Views

Total Views
819
Views on SlideShare
701
Embed Views
118

Actions

Likes
0
Downloads
11
Comments
0

1 Embed 118

http://blog.johanneshoppe.de 118

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Exkurs: Save the pixel Exkurs: Save the pixel Presentation Transcript

  • SRH Hochschule Heidelberg
    Fachbereich Informatik
  • Exkurs: Save the Pixel
    16.03.2009 + 23.03.2009
  • Inhalt
    Exkurs
    Kompositionslehre
    The Art of Simple Web Design
    Effizienz und Schlichtheit
    Besucherspezifische Kommunikation
  • 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
    Exkurs: Save the Pixel
    Wirkung von Farbqualität und -quantität
    Dunkle Farben
    • Wirkung düster, schwer und drückend
    • Vermittlung von Geborgenheit
    • Gut für Texte geeignet
  • 23
    1. Kompositionslehre
    Exkurs: Save the Pixel
    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
  • 24
    1. Kompositionslehre
    Exkurs: Save the Pixel
    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
  • 25
    1. Kompositionslehre
    Exkurs: Save the Pixel
    Wirkung von Farbqualität und -quantität
    Zarte Farben
    • Wirkung von Empfindlichkeit, Zerbrechlichkeit
    • Gut geeignet für Hintergründe
  • 26
    1. Kompositionslehre
    Exkurs: Save the Pixel
    Wirkung von Farbqualität und -quantität
    Warme Farben
    • Strahlen Gemütlichkeit, Wärme und Ruhe aus
  • 27
    1. Kompositionslehre
    Exkurs: Save the Pixel
    Wirkung von Farbqualität und -quantität
    Kalte Farben
    • Wirkung kalt, sachlich und funktional
  • 28
    1. Kompositionslehre
    Exkurs: Save thePixel
    Wirkung von Farbqualität und -quantität
    Einzelne Farben
    • Wirken ordnend und strukturierend
    • Zusammenfassung von Sachverhalten
    • Aufmerksamkeiten schaffen
    • Wichtig; Abstimmung der Farben,
    deutliche Unterscheidung
  • 29
    1. Kompositionslehre
    Exkurs: Save thePixel
    Wirkung von Farbqualität und -quantität
    Viele Farben
    • Wirkung chaotisch, Unruhe und Verwirrung
    • Schaffung von unangenehmer Atmosphäre
  • 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
    Gestaltungsgesetze
    Figur-Grund-
    Differenzierung
    Gesetz der Nähe
    Gesetz der Ähnlichkeit
    Gesetz der Geschlossenheit
    Prägnanz-tendenz
    Goldener Schnitt
    Kontraste
    Symmetrie
  • 32
    1. Kompositionslehre
    Exkurs: Save the Pixel
    Gestaltungsgesetze
    Vordergrund, Mittelgrund, Hintergrund
    Querformat
    Hochformat
    Silhouette
    Perspektive
    Kreis
    Linienführung
  • 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
     „elevatorpitch“ , 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
    Befördert es wichtige Informationen?
    Fügt es der Marke Bedeutung bei?
    Hilft es bei den folgenden Fragen:
    „Bin ich am richtigen Ort?“
    „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 („keepthescent“)
     „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
    Exkurs: Save the Pixel
    An dieser Stelle wurde urheberechtlich geschütztes Material der SAP AG, Technology Advisory Officegezeigt.
    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
  • Vielen Dank für eure Aufmerksamkeit!
    ENDE
  • 53
    Quellen
    Exkurs: Save the Pixel
    [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/