Mobile Product Design for Developers

A solid introduction about how mobile products are being built in a „developer friendly“ way. Based on familiar models like the Lean Product Pyramid by Dan Olsen, Elements of User Experience by Jesse James Garrett and the Hierachy of Needs by Abraham Maslow. Also covering Apple HUI Guidelines and Material Design by Google.

Transcript

1. T Learn to: t t
2. Xaver (3)
3. Astronaut
4. braucht
5. Raumschiff
6. Aber…
7. Raumschiff
8. Mobile Product Design?
10. Wegen…
11. Quelle: Find my Friends App Screenshot http://sachagreif.com/flat-pixels/
13. PUL
14. PROBLEM
15. URSACHE
16. LÖSUNG
18. Man muss kein Künstler sein… Ganz im Gegenteil!
19. Ja, aber wie?
20. Modelle Leitfäden/Abläufe/Prinzipien
21. The Product Pyramid Quelle: Vgl. Dan Olsen – The Lean Product Playbook, Wiley 2015
22. Kunde/Zielgruppe Bildquelle: unsplash
23. Needs Bildquelle: unsplash
24. „Zentrale Kundenprobleme sichtbar besser lösen als Andere“
25. „Ein Raumschiff, das unserem Astronauten schnellen und sicheren Transport bietet“
26. Quelle: Peter J. Thomson – Value Proposition Canvas Template (http://www.peterjthomson.com/2013/11/value-proposition-canvas/)
27. Features Quelle: Tarmack – Star Citizen Feature Creep (https://i.ytimg.com/vi/OQcKpcYpELo/maxresdefault.jpg)
28. Features Quelle: Sebastien Roth, http://www.startupolic.com/launching-your- service-think-about-ux/, Henrik Kniberg http://blog.crisp.se/2016/01/25/henrikkniberg/making-sense-of-mvp
29. MUST HAVES KANO-MODELL PERFORMANCE DELIGHTERS
30. Flügel Tür Triebwerk
31. Düsentriebwerk Aerodynamic Große Flügel
32. Eingebauter Kran Integriertes Raumfahrzeug Aussichtsplattform
33. „As an astronaut I want to have a door to easily enter the spaceship “
34. The Product Pyramid Quelle: Vgl. Dan Olsen – The Lean Product Playbook, Wiley 2015
35. Die fünf Ebenen der User Experience Quelle: Vgl. Jesse James Garret, Die Elemente der User Experience, Addison Wesley 2012
36. Struktur W Y X Z Quelle: Jesse James Garret http://www.jjg.net/ia/visvocab/
37. Raster - Scribbles
38. Raster - Wireframes Quelle: Selbst erstellte Grafik
39. Raster - Mockups Quelle: Selbst erstellte Grafik
40. PLUS: Prototype Quelle: Selbst erstellte Grafik
41. Quelle:Vgl. d.school, https://dschool.stanford.edu/sandbox/groups/designresources/wiki/36873/attachments/74b3d/ModeGuideBOOTCAMP2010L.pdf?sessionID=2f5889768 4fb982484d0df8fbb73761194ef1158 Empathize Define Ideate Prototype Test Design Thinking
42. Oberfläche – Visual Design
43. Werden wir etwas praktischer…
44. Deference Clarity Depth Apple – HUI Guidelines
45. Material is the metaphor Bold, graphic, intentional Motion provides meaning Quelle: Google – Material Design Principles: https://www.google.com/design/spec/material-design/introduction.html# Google Material Design Principles
46. Do. Don‘t Quelle: Selbst erstellte Grafik (Bilder: unsplash)
47. Do. Don‘t Quelle: Selbst erstellte Grafik
48. Do. Don‘t Quelle: Selbst erstellte Grafik
49. Verwendet Standard- Elemente.
50. G Quelle Sketch Logo https://www.sketchapp.com/static/images/app-icon.png
51. Quelle: Sketch – iOS UI Design Template
52. Quelle: Sketch – Material Design Template
53. Live-Demo
54. „The reason designers should know about code, is the same reason developers should know about design. Not to become designers, but to empathize with them. – Jesse Weaver
55. Danke! This work is licensed under the Creative Commons Attribution 4.0 International License. To view a copy of this license, visit http://creativecommons.org/licenses/by/4.0/.