Web Design/ Inhalte, Interfaces und Interaktion /                                          - Björn Wilmsmann -
Was ist Design?• Planvoller Entwurf• Design ist eine Methode der  Problemlösung• Design ist eine Denkweise• Design orienti...
Dieter Rams
http://ikono.org/2013/01/dieter-rams-braun-design-collection-for-sale/
http://weandthecolor.com/braun-old-minimalistic-industrial-design-by-dieter-rams/10299
http://www.paulhazel.com/2012/02/05/dieter-rams/
http://huminimal.com/442/
10 Principles of Good       Design
Gutes Design ist   innovativ
Gutes Design macht ein  Produkt brauchbar
Gutes Design ist  ästhetisch
Gutes Design macht ein Produkt verständlich
Gutes Design ist unaufdringlich
Gutes Design ist    ehrlich
Gutes Design ist   langlebig
Gutes Design istkonsequent bis ins  letzte Detail
Gutes Design istumweltfreundlich
Gutes Design ist so wenig Design wie     möglich
Industriedesign• Klassisches Produktdesign• Design von materiellen Produkten• Industrie- und Massenprodukte• Produktlinien...
Grafikdesign• Entwurf und Gestaltung von visuellen  Inhalten• Illustrationen• Bilder• Typografie
Interfacedesign• Gestaltung von Benutzeroberflächen• Mensch-Maschine Schnittstellen• Nutzererwartung• Betrachtet Ziele und ...
Interaktionsdesign• Unterstützt Ziele des Nutzers• Unterbrechungsfreie, einfache und  zielgerichtete Interaktion zwischen ...
Affordanzhttp://blogs.technet.com/b/ewan/archive/2007/04/04/the-design-of-everyday-things.aspx
http://www.mobypicture.com/user/ToiVillar/view/10818690
http://www.yourpr.de/2009/11/17/skurriles-zum-welttoilettentag-den-19-november-2009-62118622.html
User Experience         Design• Nutzererlebnis• Wahrnehmung des Nutzers• Reaktion des Nutzers auf Gestaltung und  Funktion...
Was ist Web Design?
Bedeutung• Web Design ist allgegenwärtig• Digitale Inhalte• Nachrichten• Browser-basierte Anwendungen
Rahmenbedingungen• Browser• Betriebssystem• Bildschirmauflösung• Installierte Schriftarten• Bandbreite
Inhalte• Nachrichten• Längere Texte• Bilder• Videos
Typografie
Schriftsatz http://freelancefolder.com
Schriftarten• Serifen: Times New Roman• Serifenlos / Sans Serif: Arial, Helvetica• Festbreite: Courier
The quick brown fox jumps over the lazy dog.
Volkswagen. Das Auto.
Ein kleine Typografie        Demo
Web Anwendungen• Interaktion• Erwartungen und Ziele des Nutzers• Ergonomie • Affordanz • Bedienelemente leicht erreichbar ...
Fokushttp://www.funkydigital.co/website/conversion-rat/usability
Beispiel: Google Mail
Beispiel: Pinterest
Mobile Web Design
Rahmenbedingungen• Formfaktor / Bildschirmgröße• Eingabemethoden• Bandbreite• Speicherplatz, Prozessorleistung• Batteriela...
Responsive Design• Geräte- und Bildschirmgrößen• Fließende Raster• Proportionale Größen
Methoden• Design Patterns - Entwurfsmuster• Feedback• Kontext• Fokus
Barrierefreies Design
Barrierefreiheit• Visueller Kontrast• Bedienbarkeit ohne Maus• Anpassung an Ausgabegeräte• Screen Reader
„Design is not just what it looks likeand feels like. Design is how it works.“„Design ist nicht nur, wie etwasaussieht und...
Nächste SlideShare
Wird geladen in …5
×

Web Design - Inhalte, Interfaces und Interaktion

906 Aufrufe

Veröffentlicht am

Präsentation über Designgrundlagen, Prinzipien guten Designs und Web Design

Veröffentlicht in: Design
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
906
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
4
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Web Design - Inhalte, Interfaces und Interaktion

  1. 1. Web Design/ Inhalte, Interfaces und Interaktion / - Björn Wilmsmann -
  2. 2. Was ist Design?• Planvoller Entwurf• Design ist eine Methode der Problemlösung• Design ist eine Denkweise• Design orientiert sich am Menschen• Design orientiert sich an Rahmenbedingungen
  3. 3. Dieter Rams
  4. 4. http://ikono.org/2013/01/dieter-rams-braun-design-collection-for-sale/
  5. 5. http://weandthecolor.com/braun-old-minimalistic-industrial-design-by-dieter-rams/10299
  6. 6. http://www.paulhazel.com/2012/02/05/dieter-rams/
  7. 7. http://huminimal.com/442/
  8. 8. 10 Principles of Good Design
  9. 9. Gutes Design ist innovativ
  10. 10. Gutes Design macht ein Produkt brauchbar
  11. 11. Gutes Design ist ästhetisch
  12. 12. Gutes Design macht ein Produkt verständlich
  13. 13. Gutes Design ist unaufdringlich
  14. 14. Gutes Design ist ehrlich
  15. 15. Gutes Design ist langlebig
  16. 16. Gutes Design istkonsequent bis ins letzte Detail
  17. 17. Gutes Design istumweltfreundlich
  18. 18. Gutes Design ist so wenig Design wie möglich
  19. 19. Industriedesign• Klassisches Produktdesign• Design von materiellen Produkten• Industrie- und Massenprodukte• Produktlinien• Eingebettet im Entwicklungsprozess
  20. 20. Grafikdesign• Entwurf und Gestaltung von visuellen Inhalten• Illustrationen• Bilder• Typografie
  21. 21. Interfacedesign• Gestaltung von Benutzeroberflächen• Mensch-Maschine Schnittstellen• Nutzererwartung• Betrachtet Ziele und Aufgaben des Nutzers in Bezug auf ein Produkt
  22. 22. Interaktionsdesign• Unterstützt Ziele des Nutzers• Unterbrechungsfreie, einfache und zielgerichtete Interaktion zwischen Nutzer und Produkt• Kriterien: Stabilität, Nützlichkeit, Ästhetik
  23. 23. Affordanzhttp://blogs.technet.com/b/ewan/archive/2007/04/04/the-design-of-everyday-things.aspx
  24. 24. http://www.mobypicture.com/user/ToiVillar/view/10818690
  25. 25. http://www.yourpr.de/2009/11/17/skurriles-zum-welttoilettentag-den-19-november-2009-62118622.html
  26. 26. User Experience Design• Nutzererlebnis• Wahrnehmung des Nutzers• Reaktion des Nutzers auf Gestaltung und Funktionalität• Abhängig von Vorkenntnissen und Erfahrung
  27. 27. Was ist Web Design?
  28. 28. Bedeutung• Web Design ist allgegenwärtig• Digitale Inhalte• Nachrichten• Browser-basierte Anwendungen
  29. 29. Rahmenbedingungen• Browser• Betriebssystem• Bildschirmauflösung• Installierte Schriftarten• Bandbreite
  30. 30. Inhalte• Nachrichten• Längere Texte• Bilder• Videos
  31. 31. Typografie
  32. 32. Schriftsatz http://freelancefolder.com
  33. 33. Schriftarten• Serifen: Times New Roman• Serifenlos / Sans Serif: Arial, Helvetica• Festbreite: Courier
  34. 34. The quick brown fox jumps over the lazy dog.
  35. 35. Volkswagen. Das Auto.
  36. 36. Ein kleine Typografie Demo
  37. 37. Web Anwendungen• Interaktion• Erwartungen und Ziele des Nutzers• Ergonomie • Affordanz • Bedienelemente leicht erreichbar • kurze Wege
  38. 38. Fokushttp://www.funkydigital.co/website/conversion-rat/usability
  39. 39. Beispiel: Google Mail
  40. 40. Beispiel: Pinterest
  41. 41. Mobile Web Design
  42. 42. Rahmenbedingungen• Formfaktor / Bildschirmgröße• Eingabemethoden• Bandbreite• Speicherplatz, Prozessorleistung• Batterielaufzeit
  43. 43. Responsive Design• Geräte- und Bildschirmgrößen• Fließende Raster• Proportionale Größen
  44. 44. Methoden• Design Patterns - Entwurfsmuster• Feedback• Kontext• Fokus
  45. 45. Barrierefreies Design
  46. 46. Barrierefreiheit• Visueller Kontrast• Bedienbarkeit ohne Maus• Anpassung an Ausgabegeräte• Screen Reader
  47. 47. „Design is not just what it looks likeand feels like. Design is how it works.“„Design ist nicht nur, wie etwasaussieht und sich anfühlt. Design ist,wie es funktioniert“ - Steve Jobs -

×