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

1. Web Design
/ Inhalte, Interfaces und Interaktion /
- Björn Wilmsmann -

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. Dieter Rams

4. http://ikono.org/2013/01/dieter-rams-braun-design-collection-for-sale/

5. http://weandthecolor.com/braun-old-minimalistic-industrial-design-by-dieter-rams/10299

6. http://www.paulhazel.com/2012/02/05/dieter-rams/

7. http://huminimal.com/442/

8. 10 Principles of Good
Design

9. Gutes Design ist
innovativ

10. Gutes Design macht ein
Produkt brauchbar

11. Gutes Design ist
ästhetisch

12. Gutes Design macht ein
Produkt verständlich

13. Gutes Design ist
unaufdringlich

14. Gutes Design ist
ehrlich

15. Gutes Design ist
langlebig

16. Gutes Design ist
konsequent bis ins
letzte Detail

17. Gutes Design ist
umweltfreundlich

18. Gutes Design ist so
wenig Design wie
möglich

19. Industriedesign
• Klassisches Produktdesign
• Design von materiellen Produkten
• Industrie- und Massenprodukte
• Produktlinien
• Eingebettet im Entwicklungsprozess

20. Grafikdesign
• Entwurf und Gestaltung von visuellen
Inhalten
• Illustrationen
• Bilder
• Typografie

21. Interfacedesign
• Gestaltung von Benutzeroberflächen
• Mensch-Maschine Schnittstellen
• Nutzererwartung
• Betrachtet Ziele und Aufgaben des Nutzers
in Bezug auf ein Produkt

22. Interaktionsdesign
• Unterstützt Ziele des Nutzers
• Unterbrechungsfreie, einfache und
zielgerichtete Interaktion zwischen Nutzer
und Produkt
• Kriterien: Stabilität, Nützlichkeit, Ästhetik

23. Affordanz
http://blogs.technet.com/b/ewan/archive/2007/04/04/the-design-of-everyday-things.aspx

24. http://www.mobypicture.com/user/ToiVillar/view/10818690

25. http://www.yourpr.de/2009/11/17/skurriles-zum-welttoilettentag-den-19-november-2009-62118622.html

26. User Experience
Design
• Nutzererlebnis
• Wahrnehmung des Nutzers
• Reaktion des Nutzers auf Gestaltung und
Funktionalität
• Abhängig von Vorkenntnissen und Erfahrung

27. Was ist Web Design?

28. Bedeutung
• Web Design ist allgegenwärtig
• Digitale Inhalte
• Nachrichten
• Browser-basierte Anwendungen

29. Rahmenbedingungen
• Browser
• Betriebssystem
• Bildschirmauflösung
• Installierte Schriftarten
• Bandbreite

30. Inhalte
• Nachrichten
• Längere Texte
• Bilder
• Videos

31. Typografie

32. Schriftsatz
http://freelancefolder.com

33. Schriftarten
• Serifen: Times New Roman
• Serifenlos / Sans Serif: Arial, Helvetica
• Festbreite: Courier

34. The quick brown fox jumps over the lazy dog.

35. Volkswagen. Das Auto.

36. Ein kleine Typografie
Demo

37. Web Anwendungen
• Interaktion
• Erwartungen und Ziele des Nutzers
• Ergonomie
• Affordanz
• Bedienelemente leicht erreichbar
• kurze Wege

38. Fokus
http://www.funkydigital.co/website/conversion-rat/usability

39. Beispiel: Google Mail

40. Beispiel: Pinterest

41. Mobile Web Design

42. Rahmenbedingungen
• Formfaktor / Bildschirmgröße
• Eingabemethoden
• Bandbreite
• Speicherplatz, Prozessorleistung
• Batterielaufzeit

43. Responsive Design
• Geräte- und Bildschirmgrößen
• Fließende Raster
• Proportionale Größen

44. Methoden
• Design Patterns - Entwurfsmuster
• Feedback
• Kontext
• Fokus

45. Barrierefreies Design

46. Barrierefreiheit
• Visueller Kontrast
• Bedienbarkeit ohne Maus
• Anpassung an Ausgabegeräte
• Screen Reader

47. „Design is not just what it looks like
and feels like. Design is how it works.“
„Design ist nicht nur, wie etwas
aussieht und sich anfühlt. Design ist,
wie es funktioniert“
- Steve Jobs -