Slides of my talk about design basics for developers.

1. Benjamin Reimold | Codenauts
$foo-design basics
for (iOS-)developers
Mittwoch, 5. September 12

2. This presentation is licenced under
CC BY-NC-SA 3.0
visit www.creativecommons.org
for more information
Mittwoch, 5. September 12

3. Benjamin Reimold
@elektrojunge
tausendsassaesk.de
Mittwoch, 5. September 12

4. “Challenge accepted!“
Mittwoch, 5. September 12

5. Kommunikation
You make my NSLog(@“You suck!“)
eyes water!
Kommunikation
Mittwoch, 5. September 12

6. Mittwoch, 5. September 12

7. Design-Grundlagen
Mittwoch, 5. September 12

8. $foo-Design
Mittwoch, 5. September 12

9. $foo-Design
User Experience Design
Sound Design Interface Design
Interaction Design
Human Factors
Human-
Computer
Interaction
Information Architecture
Mittwoch, 5. September 12

10. Interaction Design
Mittwoch, 5. September 12

11. Interaction Design
Mittwoch, 5. September 12

12. Interaction Design
Mittwoch, 5. September 12

13. Interaction Design
Mittwoch, 5. September 12

14. Interaction Design
Mittwoch, 5. September 12

15. Die Idee
Mittwoch, 5. September 12

16. Die Idee
App
Mittwoch, 5. September 12

17. Die Idee
App M-Payment
Mittwoch, 5. September 12

18. Die Idee
App M-Payment Essen
Mittwoch, 5. September 12

19. Die Idee
App M-Payment Essen Nerd
Mittwoch, 5. September 12

20. Die Idee
App M-Payment Essen Nerd
Mittwoch, 5. September 12

21. Interaction Design
Mittwoch, 5. September 12

22. Interaction Design
Mittwoch, 5. September 12

23. Interaction Design
Mittwoch, 5. September 12

24. Interaction Design
Mittwoch, 5. September 12

25. Interaction Design
Mittwoch, 5. September 12

26. Vorgehensweise
Mittwoch, 5. September 12

27. Erforschung & Beobachtungen
# Beobachten
# Interviews
# Aktivitäten
Mittwoch, 5. September 12

28. Analysierung & Strukturierung
# Visualisierung
# Diagramme / Listen
# Konzeptionelles Modell
# Personas
Mittwoch, 5. September 12

29. Mittwoch, 5. September 12

30. Mittwoch, 5. September 12

31. Mittwoch, 5. September 12

32. Ideenfindung & Lösung
# Konzepte
# Brainstorming-Techniken
# Design-Prinzipien
Mittwoch, 5. September 12

33. Details & Überarbeitung
# Mentales Modell
# $foo-Design Grundlagen
Mittwoch, 5. September 12

34. # Beobachten
# Interviews # Mentales Modell
# Aktivitäten # $foo-Design Grundlagen
Forschen & Beobachtungen Details & Überarbeitung
Analysierung & Strukturierung Ideenfindung & Lösung
# Visualisierung # Konzepte
# Diagramme / Listen # Brainstorming-Techniken
# Konzeptionelles Modell # Design-Prinzipien
# Personas
Mittwoch, 5. September 12

35. „Und was is‘ mit Tee Entwicklung?“
Mittwoch, 5. September 12

36. # Beobachten
# Interviews # Mentales Modell
# Aktivitäten # $foo-Design Grundlagen
Forschen & Beobachtungen Details & Überarbeitung
Analysierung & Strukturierung Ideenfindung & Lösung
# Visualisierung # Konzepte
# Diagramme / Listen # Brainstorming-Techniken
# Konzeptionelles Modell # Design-Prinzipien
# Personas
Mittwoch, 5. September 12

37. Ich bin nur das
Erinnerungs-La
m a
Mittwoch, 5. September 12

38. # Beobachten
# Interviews # Mentales Modell
# Aktivitäten # $foo-Design Grundlagen
Forschen & Beobachtungen Details & Überarbeitung
Analysierung & Strukturierung Ideenfindung & Lösung
# Visualisierung # Konzepte
# Diagramme / Listen # Brainstorming-Techniken
# Konzeptionelles Modell # Design-Prinzipien
# Personas
Mittwoch, 5. September 12

39. Grundprinzipien
Mittwoch, 5. September 12

40. Grundprinzipien
Stat
us
Mittwoch, 5. September 12

41. Grundprinzipien
Stat
us
Me
tap
he
r
Mittwoch, 5. September 12

42. Grundprinzipien
Stat
us
Me
tap
he
r
Freih
eit/Ko
ntrol
le
Mittwoch, 5. September 12

43. Grundprinzipien
Stat
us
Me
tap
he
r
Freih
eit/Ko
ntrol
le
Konsistenz/Standards
Mittwoch, 5. September 12

44. Grundprinzipien
Stat
us
Me
tap
he
r
Freih
eit/Ko
ntrol
le
Konsistenz/Standards
ng
e idu
rverm
hl e
Fe
Mittwoch, 5. September 12

45. n
Grundprinzipien
erinner
en statt
Stat
us
Me
tap
Erkenn
he
r
Freih
eit/Ko
ntrol
le
Konsistenz/Standards
ng
e idu
rverm
hl e
Fe
Mittwoch, 5. September 12

46. n
Grundprinzipien
erinner
z n
en statt
Stat
zie
Effi
us
Me
ät/
tap
Erkenn
ilit
he
xi b
r
Fle
Freih
eit/Ko
ntrol
le
Konsistenz/Standards
ng
e idu
rverm
hl e
Fe
Mittwoch, 5. September 12

47. n
Grundprinzipien
erinner
z n
en statt
Stat
zie
Effi
us
Me
ät/
tap
Erkenn
ilit
he
xi b
r
Fle
Freih
eit/Ko m alismus
ntrol
le Ästet hik/Mini
Konsistenz/Standards
ng
e idu
rverm
hl e
Fe
Mittwoch, 5. September 12

48. n
Grundprinzipien
erinner
z n
en statt
Stat
zie
Effi
us
Me
ät/
tap
Erkenn
ilit
he
xi b
r
Fle
Freih
eit/Ko m alismus
ntrol
le Ästet hik/Mini
Konsistenz/Standards Fehlererkennung
ng
e idu
rverm
hl e
Fe
Mittwoch, 5. September 12

49. n
Grundprinzipien
erinner
z n
en statt
Stat
zie
Effi
us
Me
ät/
tap
Erkenn
ilit
he
xi b
r
Fle
Freih
eit/Ko m alismus
ntrol
le Ästet hik/Mini
Konsistenz/Standards Fehlererkennung
Dok
ume
ntati
ng on/H
e idu i lfe
rverm
hl e
Fe
Mittwoch, 5. September 12

50. n
Grundprinzipien
erinner
z n
en statt
Stat
zie
Effi
us
Me
ät/
tap
Erkenn
ilit
he
xi b
r
Fle
Freih
eit/Ko m alismus
ntrol
le Ästet hik/Mini
Konsistenz/Standards Fehlererkennung
Dok
ume
ntati
ng on/H
e idu Ge i lfe
rverm
sch
hl e
Fe
w
ind
igk
eit
Mittwoch, 5. September 12

51. n
Grundprinzipien
erinner
z n
en statt
Stat
zie
Effi
us
Me
ät/
tap
Erkenn
ilit
he
xi b
r
Fle
Freih
eit/Ko m alismus
ntrol
le Ästet hik/Mini
Konsistenz/Standards Fehlererkennung
Dok
ume
ntati
ng on/H
e idu Ge i lfe
keit
rverm
sch
e
lich
hl
Fe
w
sön
ind
igk
Per
eit
Mittwoch, 5. September 12

52. # Mentales Modell
# $foo-Design Grundlagen
Mittwoch, 5. September 12

53. # Mentales Modell
# $foo-Design Grundlagen
Das mentale Modell
Mittwoch, 5. September 12

54. # Mentales Modell
# $foo-Design Grundlagen
Das mentale Modell
Das UI-Modell
Mittwoch, 5. September 12

55. # Mentales Modell
# $foo-Design Grundlagen
Das mentale Modell
Das UI-Modell
Das Implementierungsmodell
Mittwoch, 5. September 12

56. Mittwoch, 5. September 12

57. Mittwoch, 5. September 12

58. Mittwoch, 5. September 12

59. # Mentales Modell
# $foo-Design Grundlagen
Realismus
Mittwoch, 5. September 12

60. # Mentales Modell
# $foo-Design Grundlagen
Mittwoch, 5. September 12

61. # Mentales Modell
# $foo-Design Grundlagen
Skeuomorphismen
Mittwoch, 5. September 12

62. Mittwoch, 5. September 12

63. 1 Tuna 1,11 1 Tuna 1,11
2. Sake 2.22 2. Sake 2.22
3. Avocado 3.33. 3. Avocado 3.33.
4. Tomate 4.44 4. Tomate 4.44
5. Gurke 5.55 5. Gurke 5.55
1 Tuna 1,11 1 Tuna 1,11
2. Sake 2.22 2. Sake 2.22
3. Avocado 3.33. 3. Avocado 3.33.
4. Tomate 4.44 4. Tomate 4.44
5. Gurke 5.55 5. Gurke 5.55
1 Tuna 1,11 1 Tuna 1,11
2. Sake 2.22 2. Sake 2.22
3. Avocado 3.33. 3. Avocado 3.33.
4. Tomate 4.44 4. Tomate 4.44
5. Gurke 5.55 5. Gurke 5.55
1 Tuna 1,11 1 Tuna 1,11
2. Sake 2.22 2. Sake 2.22
3. Avocado 3.33. 3. Avocado 3.33.
4. Tomate 4.44 4. Tomate 4.44
5. Gurke 5.55 5. Gurke 5.55
1 Tuna 1,11 1 Tuna 1,11
Mittwoch, 5. September 12

64. # Mentales Modell
# $foo-Design Grundlagen
Gestaltgesetz der…
…Prägnanz …gem. Bewegung
…Nähe …gemeinsamen Region
…Ähnlichkeit …Gleichzeitigkeit
…Kontinuität …verbundenen Elemente
…Geschlossenheit …fortgesetzt
durchgehenden Linie
Mittwoch, 5. September 12

65. # Mentales Modell
# $foo-Design Grundlagen
Affordances
Mittwoch, 5. September 12

66. Mittwoch, 5. September 12

67. # Mentales Modell
# $foo-Design Grundlagen
Feedback
Mittwoch, 5. September 12

68. Mittwoch, 5. September 12

69. Mittwoch, 5. September 12

70. # Mentales Modell
# $foo-Design Grundlagen
Feedforward
Mittwoch, 5. September 12

71. Mittwoch, 5. September 12

72. Mittwoch, 5. September 12

73. vs
Mittwoch, 5. September 12

74. vs
Mittwoch, 5. September 12

75. # Mentales Modell
# $foo-Design Grundlagen
Direkte Manipulation
Mittwoch, 5. September 12

76. Mittwoch, 5. September 12

77. # Mentales Modell
# $foo-Design Grundlagen
Indirekte Manipulation
Mittwoch, 5. September 12

78. Mittwoch, 5. September 12

79. # Mentales Modell
# $foo-Design Grundlagen
Fitts‘s Law
Mittwoch, 5. September 12

80. # Mentales Modell
# $foo-Design Grundlagen
Mittwoch, 5. September 12

81. # Mentales Modell
# $foo-Design Grundlagen
Mittwoch, 5. September 12

82. # Mentales Modell
# $foo-Design Grundlagen
Die Wurstfinger-Regel
Mittwoch, 5. September 12

83. # Mentales Modell
# $foo-Design Grundlagen
Poka-Yoke
Mittwoch, 5. September 12

84. Mittwoch, 5. September 12

85. # Mentales Modell
# $foo-Design Grundlagen
Hierarchie
Mittwoch, 5. September 12

86. Mittwoch, 5. September 12

87. Mittwoch, 5. September 12

88. # Mentales Modell
# $foo-Design Grundlagen
Animationen
Mittwoch, 5. September 12

89. Mittwoch, 5. September 12

90. # Mentales Modell
# $foo-Design Grundlagen
Konsistenz
Mittwoch, 5. September 12

91. # Mentales Modell
# $foo-Design Grundlagen
Mittwoch, 5. September 12

92. Realismus Fitts‘s Law
Affordances Die Wurstfinger-Regel
Feedback Poka-Yoke
Feedforward Hierarchie
Direkte Manipulation Animationen
Indirekte Manipulation Konsistenz
Mittwoch, 5. September 12

93. # Mentales Modell
# $foo-Design Grundlagen
Habt eine Meinung!
Mittwoch, 5. September 12

94. # Mentales Modell
# $foo-Design Grundlagen
Mittwoch, 5. September 12

95. # Mentales Modell
# $foo-Design Grundlagen
Features
Mittwoch, 5. September 12

96. Mittwoch, 5. September 12

97. Design-Prozess
Mittwoch, 5. September 12

98. Design-Prozess
+
Mittwoch, 5. September 12

99. Design-Prozess
+
$foo-Design basics
Mittwoch, 5. September 12

100. Design-Prozess
+
$foo-Design basics
=
Mittwoch, 5. September 12

101. Design-Prozess
+
$foo-Design basics
=
einfachere Kommunikation
Mittwoch, 5. September 12

102. Design-Prozess
+
$foo-Design basics
=
einfachere Kommunikation
+
Mittwoch, 5. September 12

103. Design-Prozess
+
$foo-Design basics
=
einfachere Kommunikation
+
bessere Apps
Mittwoch, 5. September 12

104. Mittwoch, 5. September 12