SRH Hochschule Heidelberg<br />Fachbereich Informatik<br />
Exkurs: Save the Pixel<br />16.03.2009 + 23.03.2009<br />
Inhalt<br />Exkurs<br />Kompositionslehre<br />The Art of Simple Web Design<br />Effizienz und Schlichtheit<br />Besuchers...
4<br />1. Mini-Kompositionslehre<br />Komposition <br /><ul><li>[lateinisch] die,allgemein: Zusammensetzung, -stellung von...
Bezeichnung für den formalen Aufbau von Kunstwerken
Bezieht sich auf Teile und die zw. ihnen herrschenden Relation</li></ul>Exkurs: Save the Pixel<br />
5<br />1. Kompositionslehre<br />Elemente der Komposition (1/3)<br /><ul><li>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 harmon...
6<br />1. Kompositionslehre<br />Elemente der Komposition (2/3)<br /><ul><li>Linien
Goldener Schnitt (Teilung einer Strecke in zwei ungleich lange Abschnitte, so dass sich die kürzere zum längeren wie der l...
7<br />1. Kompositionslehre<br />Elemente der Komposition (3/3)<br /><ul><li>Flächenhaftigkeit (landschaftliche und archit...
Symmetrie
Licht
Reihung
Farbe</li></ul>Exkurs: Save the Pixel<br />
8<br />1. Kompositionslehre<br />Farbe <br /><ul><li>Wirkung auf vielfältige Weise
Einwirkung der Farbschwingungen auf Organismus und Psyche
Hohen Einfluss auf Wohlbefinden und Lebensgefühl
Symbolcharakter von Kulturkreis abhängig</li></ul>Exkurs: Save the Pixel<br />
9<br />1. Kompositionslehre<br />Farbe<br /><ul><li>Unterschiedliche Wirkung von Farben
Jede einzelne Farbe hat ihre eigene Wirkung die allgemein für jeden Menschen Gültigkeit findet</li></ul>Exkurs: Save the P...
10<br /><ul><li> Erregt Aufmerksamkeit
 Vitalität
 Energie
 Liebe & Leidenschaft
 Aggressivität
 Wut
 Brutalität</li></li></ul><li>11<br /><ul><li> Optimismus
 Lebensfreude
 Aufgeschlossenheit
 Leichtlebig
 Selbstvertrauen </li></li></ul><li>12<br /><ul><li> Licht
 Heiterkeit
 Wissen
 Weisheit
 Vernunft
 Schmutzige Gelbtöne
 Täuschung
 Pessimismus </li></li></ul><li>13<br /><ul><li> Beruhigend
 Harmonie
 Hoffnung</li></ul>Aber auch<br /><ul><li> Gleichgültigkeit
 Stagnation</li></li></ul><li>14<br /><ul><li> Wachheit
 Offenheit
 Freiheit</li></ul>Aber auch:<br /><ul><li> Kühle
 Distanz
 Leere</li></li></ul><li>15<br /><ul><li> Kühle Farbe
 Ruhe
 Vertrauen
 Sehnsucht</li></ul>Aber auch<br /><ul><li> „Traumtänzer“
  Melancholie</li></li></ul><li>16<br /><ul><li> Würdevolle Farbe
 Kunst
Nächste SlideShare
Wird geladen in …5
×

Exkurs: Save the pixel

928 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Design, Technologie, Business
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
928
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
149
Aktionen
Geteilt
0
Downloads
12
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Exkurs: Save the pixel

  1. 1. SRH Hochschule Heidelberg<br />Fachbereich Informatik<br />
  2. 2. Exkurs: Save the Pixel<br />16.03.2009 + 23.03.2009<br />
  3. 3. Inhalt<br />Exkurs<br />Kompositionslehre<br />The Art of Simple Web Design<br />Effizienz und Schlichtheit<br />Besucherspezifische Kommunikation<br />
  4. 4. 4<br />1. Mini-Kompositionslehre<br />Komposition <br /><ul><li>[lateinisch] die,allgemein: Zusammensetzung, -stellung von Dingen aus Einzelteilen
  5. 5. Bezeichnung für den formalen Aufbau von Kunstwerken
  6. 6. Bezieht sich auf Teile und die zw. ihnen herrschenden Relation</li></ul>Exkurs: Save the Pixel<br />
  7. 7. 5<br />1. Kompositionslehre<br />Elemente der Komposition (1/3)<br /><ul><li>Anordnung der Figuren
  8. 8. Kompositionsschema (künstlerische Plan den sich der Künstler vor Aufnahme seiner Arbeit zusammenstellt)
  9. 9. Perspektive ((lat. durchschauen) Übertragung des körperlich- räumlich Geschauten auf die Fläche des Bildes)
  10. 10. 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)</li></ul>Exkurs: Save the Pixel<br />
  11. 11. 6<br />1. Kompositionslehre<br />Elemente der Komposition (2/3)<br /><ul><li>Linien
  12. 12. 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) </li></ul>Exkurs: Save the Pixel<br />
  13. 13. 7<br />1. Kompositionslehre<br />Elemente der Komposition (3/3)<br /><ul><li>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)
  14. 14. Symmetrie
  15. 15. Licht
  16. 16. Reihung
  17. 17. Farbe</li></ul>Exkurs: Save the Pixel<br />
  18. 18. 8<br />1. Kompositionslehre<br />Farbe <br /><ul><li>Wirkung auf vielfältige Weise
  19. 19. Einwirkung der Farbschwingungen auf Organismus und Psyche
  20. 20. Hohen Einfluss auf Wohlbefinden und Lebensgefühl
  21. 21. Symbolcharakter von Kulturkreis abhängig</li></ul>Exkurs: Save the Pixel<br />
  22. 22. 9<br />1. Kompositionslehre<br />Farbe<br /><ul><li>Unterschiedliche Wirkung von Farben
  23. 23. Jede einzelne Farbe hat ihre eigene Wirkung die allgemein für jeden Menschen Gültigkeit findet</li></ul>Exkurs: Save the Pixel<br />
  24. 24. 10<br /><ul><li> Erregt Aufmerksamkeit
  25. 25. Vitalität
  26. 26. Energie
  27. 27. Liebe & Leidenschaft
  28. 28. Aggressivität
  29. 29. Wut
  30. 30. Brutalität</li></li></ul><li>11<br /><ul><li> Optimismus
  31. 31. Lebensfreude
  32. 32. Aufgeschlossenheit
  33. 33. Leichtlebig
  34. 34. Selbstvertrauen </li></li></ul><li>12<br /><ul><li> Licht
  35. 35. Heiterkeit
  36. 36. Wissen
  37. 37. Weisheit
  38. 38. Vernunft
  39. 39. Schmutzige Gelbtöne
  40. 40. Täuschung
  41. 41. Pessimismus </li></li></ul><li>13<br /><ul><li> Beruhigend
  42. 42. Harmonie
  43. 43. Hoffnung</li></ul>Aber auch<br /><ul><li> Gleichgültigkeit
  44. 44. Stagnation</li></li></ul><li>14<br /><ul><li> Wachheit
  45. 45. Offenheit
  46. 46. Freiheit</li></ul>Aber auch:<br /><ul><li> Kühle
  47. 47. Distanz
  48. 48. Leere</li></li></ul><li>15<br /><ul><li> Kühle Farbe
  49. 49. Ruhe
  50. 50. Vertrauen
  51. 51. Sehnsucht</li></ul>Aber auch<br /><ul><li> „Traumtänzer“
  52. 52. Melancholie</li></li></ul><li>16<br /><ul><li> Würdevolle Farbe
  53. 53. Kunst
  54. 54. Frömmigkeit
  55. 55. Stolz</li></ul>Aber auch<br /><ul><li> Arrogant
  56. 56. Unmoralisch</li></li></ul><li>17<br /><ul><li> Idealismus
  57. 57. Dankbarkeit
  58. 58. Mitgefühl</li></ul>Aber auch <br /><ul><li> Arroganz
  59. 59. Dominanz</li></li></ul><li>18<br /><ul><li> Reinheit
  60. 60. Klarheit
  61. 61. Erhabenheit
  62. 62. Unschuld</li></ul> Aber auch<br /><ul><li> Unnahbarkeit
  63. 63. Reserviertheit</li></li></ul><li>19<br /><ul><li> vollkommende Neutralität
  64. 64. Zurückhaltung
  65. 65. Kompromissbereitschaft</li></ul>Aber auch<br /><ul><li> Langeweile
  66. 66. Eintönigkeit
  67. 67. Unsicherheit
  68. 68. Lebensangst</li></li></ul><li>20<br /><ul><li> Trauer
  69. 69. Unergründlichkeit
  70. 70. Unabänderlichkeit</li></ul>Aber auch<br /><ul><li> Würde
  71. 71. Ansehen
  72. 72. feierlichen Charakter</li></li></ul><li>21<br />1. Kompositionslehre<br />Wirkung von Farbqualität und -quantität<br /><ul><li>Abhängigkeit der Wirkung von Anzahl, Sättigung, Helligkeit und Temperatur einer Farbe</li></ul>Helle Farben<br /><ul><li>Wirkung leicht und freundlich
  73. 73. Ausdruck von Weite, Raum und von Leere
  74. 74. Lebendigkeit und Frische
  75. 75. Gut geeignet als Hintergrund </li></ul>Exkurs: Save the Pixel<br />
  76. 76. 22<br />1. Kompositionslehre<br />Exkurs: Save the Pixel<br />Wirkung von Farbqualität und -quantität<br />Dunkle Farben<br /><ul><li>Wirkung düster, schwer und drückend
  77. 77. Vermittlung von Geborgenheit
  78. 78. Gut für Texte geeignet</li></li></ul><li>23<br />1. Kompositionslehre<br />Exkurs: Save the Pixel<br />Wirkung von Farbqualität und -quantität<br />Reine, gesättigte Farben<br /><ul><li>Wirkung dominant, laut und aufdringlich
  79. 79. Intensive Leuchtkraft
  80. 80. Gegenseitige Konkurrenz
  81. 81. Verwendung in kleinen Mengen
  82. 82. Zusammenwirkung mit ungesättigten </li></ul> Farbtönen<br />
  83. 83. 24<br />1. Kompositionslehre<br />Exkurs: Save the Pixel<br />Wirkung von Farbqualität und -quantität<br />Entsättigte Farbtöne<br /><ul><li>Wirkung zurückhaltend, sanft und schmeichelnd
  84. 84. Einbüßung der Leuchtkraft
  85. 85. Verwendung in der Modebranche als „Puderfarben“</li></ul> und zur Darstellung von Perspektive<br /><ul><li>Lassen Objekte im Hintergrund weiter entfernt wirken </li></li></ul><li>25<br />1. Kompositionslehre<br />Exkurs: Save the Pixel<br />Wirkung von Farbqualität und -quantität<br />Zarte Farben<br /><ul><li>Wirkung von Empfindlichkeit, Zerbrechlichkeit
  86. 86. Gut geeignet für Hintergründe</li></li></ul><li>26<br />1. Kompositionslehre<br />Exkurs: Save the Pixel<br />Wirkung von Farbqualität und -quantität<br />Warme Farben<br /><ul><li>Strahlen Gemütlichkeit, Wärme und Ruhe aus</li></li></ul><li>27<br />1. Kompositionslehre<br />Exkurs: Save the Pixel<br />Wirkung von Farbqualität und -quantität<br />Kalte Farben<br /><ul><li>Wirkung kalt, sachlich und funktional</li></li></ul><li>28<br />1. Kompositionslehre<br />Exkurs: Save thePixel<br />Wirkung von Farbqualität und -quantität<br />Einzelne Farben<br /><ul><li>Wirken ordnend und strukturierend
  87. 87. Zusammenfassung von Sachverhalten
  88. 88. Aufmerksamkeiten schaffen
  89. 89. Wichtig; Abstimmung der Farben, </li></ul> deutliche Unterscheidung<br />
  90. 90. 29<br />1. Kompositionslehre<br />Exkurs: Save thePixel<br />Wirkung von Farbqualität und -quantität<br />Viele Farben<br /><ul><li>Wirkung chaotisch, Unruhe und Verwirrung
  91. 91. Schaffung von unangenehmer Atmosphäre</li></li></ul><li>30<br />1. Kompositionslehre<br />Visuelle Grunderfahrungen<br />Die Schwerkraft<br />Optische Mitte  !!!<br />Waagerecht und senkrecht<br />Leserichtung<br />Symmetrie<br />Licht<br />Räumliches Sehen<br />Ergänzen und Reduzieren<br />Exkurs: Save the Pixel<br />
  92. 92. 31<br />1. Kompositionslehre<br />Exkurs: Save the Pixel<br />Gestaltungsgesetze<br />Figur-Grund-<br />Differenzierung<br />Gesetz der Nähe<br />Gesetz der Ähnlichkeit<br />Gesetz der Geschlossenheit<br />Prägnanz-tendenz<br />Goldener Schnitt<br />Kontraste<br />Symmetrie<br />
  93. 93. 32<br />1. Kompositionslehre<br />Exkurs: Save the Pixel<br />Gestaltungsgesetze<br />Vordergrund, Mittelgrund, Hintergrund<br />Querformat<br />Hochformat<br />Silhouette<br />Perspektive<br />Kreis<br />Linienführung<br />
  94. 94. 33<br />1. Kompositionslehre<br />Gestaltungsgesetze<br />Exkurs: Save the Pixel<br />http://www.feuer-jonglage.com/<br />
  95. 95. 34<br />2. The Art of Simple Web Design<br />Exkurs: Save the Pixel<br />
  96. 96. 35<br />2. The Art of Simple Web Design<br />Themen<br />a) Effizienz und Schlichtheit<br />b) Besucherspezifische Kommunikation<br />Exkurs: Save the Pixel<br />
  97. 97. 36<br />2. The Art of Simple Web Designa) Effizienz und Schlichtheit<br />Ziele von jedem Webdesign:<br /> Effizienz und Schlichtheit <br />  Die Dinge sollen sich einfach „anfühlen“<br />Exkurs: Save the Pixel<br />
  98. 98. 37<br />2. The Art of Simple Web Designa) Effizienz und Schlichtheit<br /><ul><li>Aufmerksamkeitsspanne sehr gering</li></ul> „elevatorpitch“ , Chunking-Hypothese (7 ± 2)<br /><ul><li>Menge an Design-Elementen:</li></ul>  So viele wie nötig, und mehr nicht!<br />  Disziplin: Pixel sparen <br /> Denn Pixel sind eine begrenzte Ressource!<br />Exkurs: Save the Pixel<br />
  99. 99. 38<br />2. The Art of Simple Web Designa) Effizienz und Schlichtheit<br />Entscheidungs-Fragen<br />Befördert es wichtige Informationen?<br />Fügt es der Marke Bedeutung bei?<br />Hilft es bei den folgenden Fragen:<br />„Bin ich am richtigen Ort?“<br />„Bin ich auf dem richtigen Weg um das zu bekommen,<br /> was ich will?“<br />Exkurs: Save the Pixel<br />
  100. 100. 39<br />2. The Art of Simple Web Designa) Effizienz und Schlichtheit<br />Effekt<br />mehr Seriosität<br />weniger Arbeit!<br />Bessere Wartung usw.<br />die Seite wird leichter „erfassbar“ („getable“)<br /><ul><li>„Ich bin am richtigen Ort, um das zu bekommen, was ich möchte“</li></ul>Die Seite macht Lust auf mehr („keepthescent“)<br /> „Ich werde das bekommen, was ich hier erreichen möchte.“<br />Exkurs: Save the Pixel<br />
  101. 101. 40<br />2. The Art of Simple Web Designa) Effizienz und Schlichtheit<br />Feststellungen<br /><ul><li>Design ist nicht Kunst
  102. 102. Design dient der Kommunikation mit einer Absicht
  103. 103. Der Inhalt muss designt werden, nicht nur die Verpackung
  104. 104. Die Verpackung wird schnell ignoriert
  105. 105. Ergo: Design hört nicht bei HTML Templates auf
  106. 106. Nicht: „…hier Inhalt einfügen…“</li></ul>„Design the content, not the box it comes in”<br />Exkurs: Save the Pixel<br />
  107. 107. 41<br />Exkurs: Save the Pixel<br />Verpackung / Box<br />Inhalt / Content<br />
  108. 108. 42<br />Exkurs: Save the Pixel<br />Verpackung / Box<br /> ???<br />Inhalt / Content<br />
  109. 109. 43<br />2. The Art of Simple Web Designa) Effizienz und Schlichtheit<br />Absichts- / Zielbestimmungen<br /><ul><li>Ein Ziel entspricht einem zu erreichenden Endpunkt!
  110. 110. Design: Der Weg ist nicht das Ziel!  Gefahr: kontinuierliche Updates, keine Konzentration auf das Wesentliche
  111. 111. Ein Ziel sollten SMART* sein
  112. 112. Kein Ziel: „Eine coole Website designen“
  113. 113. Richtiges Ziel: „Eine Seite besitzen, die 20% mehr Umsatz erzeugt.“</li></ul>Exkurs: Save the Pixel<br />
  114. 114. 44<br />2. The Art of Simple Web Design<br />Absichts- / Zielbestimmungen<br />SMART: <br />S – Simpel bzw. Spezifisch<br />M – Messbar<br />A – Angemessen<br />R – Relevant (Mehrwert)<br />T – Terminiert<br />Exkurs: Save the Pixel<br />
  115. 115. 45<br />2. The Art of Simple Web Design<br />Exkurs: Save the Pixel<br />An dieser Stelle wurde urheberechtlich geschütztes Material der SAP AG, Technology Advisory Officegezeigt.<br />Mit freundlicher Genehmigung von<br />
  116. 116. 46<br />2. The Art of Simple Web Designb) Besucherspezifische Kommunikation<br />Besucherspezifisch<br /><ul><li>Eine Website sollte für ihre Besucher entworfen sein!</li></ul>  Wer sind die tatsächlichen Besucher? (Zielgruppenbestimmung und Eingrenzung!)<br />  Was ist notwendig, um sie eine Stufe weiter zu bringen?<br /> (Stufe: Conversion Rate… / Usebility, Joy of Use)<br />Exkurs: Save the Pixel<br />
  117. 117. 47<br />2. The Art of Simple Web Designb) Besucherspezifische Kommunikation<br />Joy of Use<br /><ul><li>Mögliche passende Übersetzung: „Nutzerspaß“
  118. 118. Beispiele:</li></ul>Angenehme visuelle Gestaltung (angepasst an die Zielgruppe)<br />Eindeutige, kurze Navigationsbegriffe, Menüeinträge, Buttonbeschriftungen<br />Klare Rückmeldung, aussagekräftige Anweisungen & Fehlermeldungen<br />Einleuchtende Navigation<br />Gefühl, die Anwendung zu beherrschen<br />Erfüllung der Erwartungen<br />Exkurs: Save the Pixel<br />
  119. 119. 48<br />2. The Art of Simple Web Designb) Besucherspezifische Kommunikation<br />Freundlichkeit<br /><ul><li>Die Benutzer bleiben nur so lange auf der Website, wie sie das Gefühl haben, das zu bekommen, was sie wollen
  120. 120. Der Besucher ist bereits da, er darf nicht wieder verschreckt werden!!
  121. 121. Der Besucher erwartet positive Bestätigung</li></ul> „Bin ich am richtigen Ort?“<br /> „Du bist genau hier richtig!“<br />Exkurs: Save the Pixel<br />
  122. 122. 49<br />2. The Art of Simple Web Designb) Besucherspezifische Kommunikation<br />Positive Bestätigung<br />Beispiel Shop-Besucher:<br />„Ich möchte ein Unternehmen, dem ich vertrauen kann.“<br />„Die Produkte sollten nicht zu teuer sein.“<br />„Ich möchte bei Fragen jemanden telefonisch erreichen können.“<br />[…]<br />Exkurs: Save the Pixel<br />
  123. 123. 50<br />2. The Art of Simple Web Designb) Besucherspezifische Kommunikation<br />Wertvolle Worte<br /><ul><li>Positive Differenzierung (auf keinen Fall „Un“-Wörter)
  124. 124. Das gegenteilige Wort sollte nicht negativ besetzt sein!</li></ul>Beispiel:<br /> „Das Senioren-Handy ist sicher und verlässlich.“<br /> Gegenteil: Unsicher / Unzuverlässig<br /> Niemand würde damit werben, dass das Produkt unsicher oder unzuverlässig ist. Es wird vorausgesetzt!<br /> Pixel verschenkt!<br />Exkurs: Save the Pixel<br />
  125. 125. 51<br />2. The Art of Simple Web Designb) Besucherspezifische Kommunikation<br />Wertvolle Worte<br /><ul><li>Zweiter Versuch:</li></ul> „Das Senioren-Handy ist sehr einfach und auf das Wesentliche reduziert.“<br /> Gegenteil: Komplex / Komplett (beides nicht unbedingt schlecht)<br /> Differenzierung, Herausstellung einer bestimmten Position<br />Exkurs: Save the Pixel<br />
  126. 126. Vielen Dank für eure Aufmerksamkeit!<br />ENDE<br />
  127. 127. 53<br />Quellen<br />Exkurs: Save the Pixel<br />[1] Franz von Kutschera<br /> „Ästhetik“ – ISBN 978-3110162769<br />[2] Kindlers Malereilexikon: Komposition / Directmedia Publishing GmbH (CD)<br />[3] Stefanie Panitz „Gestaltungsgesetze“<br />http://online-zeichenkurs.de/<br />[4] Ben Hunt<br /> „Save the Pixel: The Art of Simple Web Design“<br />http://savethepixel.org/<br />

×