Das Dokument behandelt das Thema 'tragbares Design' aus der Perspektive von Benjamin Reimold und stellt die Bedeutung von Design in der App-Entwicklung heraus. Es werden verschiedene Aspekte von Design, wie Methoden, Hintergrundwissen und praktische Anwendungen, diskutiert, um die Bedeutung von Benutzererfahrung und Interaktion zu betonen. Reimold kritisiert auch die Herausforderungen im App-Design und die Notwendigkeit für vielseitige Ansätze in der Gestaltung.

1. „Tragbares“
Designsprech
Benjamin Reimold

3. by Michael Rose @mmistakes
iOS & Android
@elektrojunge
tausendsassaesk.de
benny.reimold@me.com
Benjamin Reimold
Codenauts
codenauts.de
iOS & Android
Rails
HockeyAppPS:

4. Tragbares Designsprech Benjamin Reimold
Mobile Maultaschen
Ping me!

5. Tragbares Designsprech Benjamin Reimold
tl;dr
Intro
Design (Begriff)
Design (Vorgehensweisen)
Design (Hintergrundwissen)
Design (Praxis)

6. Tragbares Designsprech Benjamin Reimold

7. Tragbares Designsprech Benjamin Reimold
Apps sind lauwarmer Kaffee!

8. Tragbares Designsprech Benjamin Reimold
Apps sind lauwarmer Kaffee!
Appland - das Land der 1000 Kontexte

9. Tragbares Designsprech Benjamin Reimold
Apps sind lauwarmer Kaffee!
Appland - das Land der 1000 Kontexte
Apps sind eine ERNSTE Sache

10. Tragbares Designsprech Benjamin Reimold
Wir brauchen Designsprech!

11. Tragbares Designsprech Benjamin Reimold
Designers to the rescue!

12. Tragbares Designsprech Benjamin Reimold
Designers to the rescue!
„Spezifikation“ der App

13. Tragbares Designsprech Benjamin Reimold
Designers to the rescue!
„Spezifikation“ der App
Designerin beauftragen

14. Tragbares Designsprech Benjamin Reimold
Designers to the rescue!
„Spezifikation“ der App
Designerin beauftragen
„tragbares“ Designsprech

15. Tragbares Designsprech Benjamin Reimold
Designers to the rescue!
„Spezifikation“ der App
Designerin beauftragen
„tragbares“ Designsprech
alle sind froh

16. Tragbares Designsprech Benjamin Reimold
Designers to the rescue!
„Spezifikation“ der App
Designerin beauftragen
„tragbares“ Designsprech
alle sind froh
€€€€€€€€

17. Tragbares Designsprech Benjamin Reimold
Nö!

18. Tragbares Designsprech Benjamin Reimold
Augenkrebs! NSLog(@“You suck!“);

19. Tragbares Designsprech Benjamin Reimold
Die Praxis™ zeigt:

20. Tragbares Designsprech Benjamin Reimold
Die Praxis™ zeigt:
Jede Softwareentwicklerin ist auch Designerin.

21. Tragbares Designsprech Benjamin Reimold
Kreativität
Nutzungskontext
Hardware
Ökosysteme
Trends
Subjektivität
Wahrnehmung
Psychologie
Schnellebigkeit
Was ist „Design“ überhaupt?
Werkzeuge / Tools
Ich kann doch nicht
„zeichnen“
Erfahrung
Typographie
User Experience
Buzzword-Bingo
...
UX
UI
Farbenlehre

22. Tragbares Designsprech Benjamin Reimold
Know your enemy.

23. Tragbares Designsprech Benjamin Reimold
Know your enemy.
Design (Begriff)

24. Tragbares Designsprech Benjamin Reimold
Know your enemy.
Design (Begriff)
Design (Vorgehensweisen)

25. Tragbares Designsprech Benjamin Reimold
Know your enemy.
Design (Begriff)
Design (Vorgehensweisen)
Design (Hintergrundwissen)

26. Tragbares Designsprech Benjamin Reimold
Know your enemy.
Design (Begriff)
Design (Vorgehensweisen)
Design (Hintergrundwissen)
Design (Praxis)

27. Tragbares Designsprech Benjamin Reimold
User Experience Design
Interface Design
Interaction Design
Sound Design
Human Factors
Human-
Computer
Interaction
Information Architecture
Design (Begriff)

28. Tragbares Designsprech Benjamin Reimold
Namen sind nur Schall und Rauch.

29. Tragbares Designsprech Benjamin Reimold
Namen sind nur Schall und Rauch.
Apps sind Werkzeuge.

30. Tragbares Designsprech Benjamin Reimold
Namen sind nur Schall und Rauch.
Apps sind Werkzeuge.
Ein Werkzeug erledigt seinen Job.

31. Tragbares Designsprech Benjamin Reimold
Namen sind nur Schall und Rauch.
Apps sind Werkzeuge.
Ein Werkzeug erledigt seinen Job.
Ein Werkzeug lässt sich gut in die Hand nehmen.

32. Tragbares Designsprech Benjamin Reimold
Namen sind nur Schall und Rauch.
Apps sind Werkzeuge.
Ein Werkzeug erledigt seinen Job.
Ein Werkzeug lässt sich gut in die Hand nehmen.
Keine Nutzerin juckt, wie es dazu kam.

33. Tragbares Designsprech Benjamin Reimold
Design (Vorgehensweisen)

34. Tragbares Designsprech Benjamin Reimold

35. Tragbares Designsprech Benjamin Reimold

36. Tragbares Designsprech Benjamin Reimold

37. Tragbares Designsprech Benjamin Reimold

38. Tragbares Designsprech Benjamin Reimold

39. Tragbares Designsprech Benjamin Reimold

40. Tragbares Designsprech Benjamin Reimold

41. Tragbares Designsprech Benjamin Reimold

42. Tragbares Designsprech Benjamin Reimold

43. Tragbares Designsprech Benjamin Reimold

44. Tragbares Designsprech Benjamin Reimold

45. Tragbares Designsprech Benjamin Reimold

46. Tragbares Designsprech Benjamin Reimold
Details &
Überarbeitung
Ideenfindung &
Lösungen
Analyse &
Strukturierung
Erforschung &
Beobachtung
Personas

47. Tragbares Designsprech Benjamin Reimold
Personas

48. Tragbares Designsprech Benjamin Reimold

49. Tragbares Designsprech Benjamin Reimold
Details &
Überarbeitung
Ideenfindung &
Lösungen
Analyse &
Strukturierung
Erforschung &
Beobachtung
Personas

50. Tragbares Designsprech Benjamin Reimold
Details &
Überarbeitung
Ideenfindung &
Lösungen
Analyse &
Strukturierung
Erforschung &
Beobachtung
Personas
Mentales Modell

51. Tragbares Designsprech Benjamin Reimold
Das mentale Modell

52. Tragbares Designsprech Benjamin Reimold

53. Tragbares Designsprech Benjamin Reimold

54. Tragbares Designsprech Benjamin Reimold

55. Tragbares Designsprech Benjamin Reimold

56. Tragbares Designsprech Benjamin Reimold
Design (Hintergrundwissen)

57. Tragbares Designsprech Benjamin Reimold
App-Design ist KALTER Kaffee.

58. Tragbares Designsprech Benjamin Reimold
seit Mitte der 1970er
Gutes Design ist innovativ.
Gutes Design macht ein Produkt brauchbar.
Gutes Design ist ästethisch.
Gutes Design ist verständlich.
Gutes Design ist unaufdringlich.
Gutes Design ist ehrlich.
Gutes Design ist langlebig.
Gutes Design ist konsequent bis in‘s letzte Detail.
Gutes Design ist umweltfreundlich.
Gutes Design ist so wenig Design wie möglich.

59. Tragbares Designsprech Benjamin Reimold
seit Mitte der 1970er
Gutes Design ist innovativ.
Gutes Design macht ein Produkt brauchbar.
Gutes Design ist ästethisch.
Gutes Design ist verständlich.
Gutes Design ist unaufdringlich.
Gutes Design ist ehrlich.
Gutes Design ist langlebig.
Gutes Design ist konsequent bis in‘s letzte Detail.
Gutes Design ist umweltfreundlich.
Gutes Design ist so wenig Design wie möglich.
DieterRams:10ThesenfürgutesDesign.

60. Tragbares Designsprech Benjamin Reimold
seit ca. 1990
Status
Metapher/Mentales Modell
Freiheit/Kontrolle
Konsistenz/Standards
Fehlervermeidung
Erkennen statt Erinnern
Flexibilität/Effizienz bei der Nutzung
Ästhetik/Minimalismus
Fehlererkennung & Fehlerbehebung
Dokumentation
JacobNielsen:10UsabilityHeuristics

61. Tragbares Designsprech Benjamin Reimold
Wieso ist App-Design dann schwierig non-
trivial einfach hart Hexenwerk Teufelszeug
komplex nicht immer einfach?

62. Tragbares Designsprech Benjamin Reimold

63. Tragbares Designsprech Benjamin Reimold
„Wir haben doch nur Informatik studiert!“

64. Tragbares Designsprech Benjamin Reimold
„Wir haben doch nur Informatik studiert!“
NUI

65. Tragbares Designsprech Benjamin Reimold
„Wir haben doch nur Informatik studiert!“
NUI
Appland, das Land der 1000 Kontexte

66. Tragbares Designsprech Benjamin Reimold
„Wir haben doch nur Informatik studiert!“
NUI
Appland, das Land der 1000 Kontexte
Menschen haben diese...Finger.

67. Tragbares Designsprech Benjamin Reimold
„Wir haben doch nur Informatik studiert!“
NUI
Appland, das Land der 1000 Kontexte
Menschen haben diese...Finger.
Die Wortwolke von vorhin, ihr erinnert euch...

68. Tragbares Designsprech Benjamin Reimold
„Wir haben doch nur Informatik studiert!“
NUI
Appland, das Land der 1000 Kontexte
Menschen haben diese...Finger.
Die Wortwolke von vorhin, ihr erinnert euch...
1000 Wege...

69. Tragbares Designsprech Benjamin Reimold
Was hilft?

70. Tragbares Designsprech Benjamin Reimold
10 Usability Heuristics
Status
Metapher/Mentales Modell
Freiheit/Kontrolle
Konsistenz/Standards
Fehlervermeidung
Erkennen statt Erinnern
Flexibilität/Effizienz bei der Nutzung
Ästhetik/Minimalismus
Fehlererkennung & Fehlerbehebung
Dokumentation
JacobNielsen:10UsabilityHeuristics

71. Tragbares Designsprech Benjamin Reimold
MOAR basic knowledge about „design“!

72. Tragbares Designsprech Benjamin Reimold
Skeuomorphismen™

73. Tragbares Designsprech Benjamin Reimold
Affordances

74. Tragbares Designsprech Benjamin Reimold
Feedback

75. Tragbares Designsprech Benjamin Reimold
Feedforward

76. Tragbares Designsprech Benjamin Reimold
Direct Manipulation Pattern

77. Tragbares Designsprech Benjamin Reimold
Fitts‘s Law

78. Tragbares Designsprech Benjamin Reimold

79. Tragbares Designsprech Benjamin Reimold

80. Tragbares Designsprech Benjamin Reimold
Geschwindigkeit

81. Tragbares Designsprech Benjamin Reimold
„Persönlichkeit“

82. Tragbares Designsprech Benjamin Reimold
Und noch soooooo vieles mehr...

83. Tragbares Designsprech Benjamin Reimold
Design (Praxis)

84. Tragbares Designsprech Benjamin Reimold
Guidelines™
1996 (!) Zen of Palm

85. Tragbares Designsprech Benjamin Reimold
iOS != Android != Windows Phone != ...

86. Tragbares Designsprech Benjamin Reimold
iOS != Android != Windows Phone != ...
„So du gestaltest für ein dir
nicht eigen gemachtes
Betriebssystem, nutze es vorab
für einige Zeit.“
Captain Obvious, 2013

87. Tragbares Designsprech Benjamin Reimold
cmd + c / ctrl + c

88. Tragbares Designsprech Benjamin Reimold
cmd + c / ctrl + c
Was machen „die anderen“?

89. Tragbares Designsprech Benjamin Reimold
cmd + c / ctrl + c
Was machen „die anderen“?
Was funktioniert (nicht)?

90. Tragbares Designsprech Benjamin Reimold
cmd + c / ctrl + c
Was machen „die anderen“?
Was funktioniert (nicht)?
Was bringt mir das?

91. Tragbares Designsprech Benjamin Reimold
cmd + c / ctrl + c
Was machen „die anderen“?
Was funktioniert (nicht)?
Was bringt mir das?
cmd + c / ctrl + c mit Stil.

92. Tragbares Designsprech Benjamin Reimold
UI-Elemente

93. Tragbares Designsprech Benjamin Reimold
Features

94. Tragbares Designsprech Benjamin Reimold
Beherrsche dein Werkzeug!

95. Tragbares Designsprech Benjamin Reimold
Beherrsche dein Werkzeug!
Stift + Papier

96. Tragbares Designsprech Benjamin Reimold
Beherrsche dein Werkzeug!
Stift + Papier
Photoshop (Pixelmator/Sketch/...)

97. Tragbares Designsprech Benjamin Reimold
Beherrsche dein Werkzeug!
Stift + Papier
Photoshop (Pixelmator/Sketch/...)
UI-Mockup-Tools (Briefsapp, Sketch ...)

98. Tragbares Designsprech Benjamin Reimold
Beherrsche dein Werkzeug!
Stift + Papier
Photoshop (Pixelmator/Sketch/...)
UI-Mockup-Tools (Briefsapp, Sketch ...)
„echter“ Prototyp

99. Tragbares Designsprech Benjamin Reimold
Beherrsche dein Werkzeug!
Stift + Papier
Photoshop (Pixelmator/Sketch/...)
UI-Mockup-Tools (Briefsapp, Sketch ...)
„echter“ Prototyp
...

100. Tragbares Designsprech Benjamin Reimold
______________ *
* Schlussstrich™

101. Tragbares Designsprech Benjamin Reimold
______________ *
Design (Vorgehensweise)
* Schlussstrich™

102. Tragbares Designsprech Benjamin Reimold
______________ *
Design (Vorgehensweise)
+
* Schlussstrich™

103. Tragbares Designsprech Benjamin Reimold
______________ *
Design (Vorgehensweise)
+
Design (Hintergrundwissen)
* Schlussstrich™

104. Tragbares Designsprech Benjamin Reimold
______________ *
Design (Vorgehensweise)
+
Design (Hintergrundwissen)
+
* Schlussstrich™

105. Tragbares Designsprech Benjamin Reimold
______________ *
Design (Vorgehensweise)
+
Design (Hintergrundwissen)
+
Design (Praxis)
* Schlussstrich™

106. Tragbares Designsprech Benjamin Reimold
______________ *
Design (Vorgehensweise)
+
Design (Hintergrundwissen)
+
Design (Praxis)
=
* Schlussstrich™

107. Tragbares Designsprech Benjamin Reimold
______________ *
Design (Vorgehensweise)
+
Design (Hintergrundwissen)
+
Design (Praxis)
=
Tragbares Designsprech
* Schlussstrich™

108. Tragbares Designsprech Benjamin Reimold
Fin. *
* Merci.