Save 37% off PRO during our Black Friday Sale! »

Mobile Product Design for Developers

22713921a7e3a36b862b381a2197a068?s=47 Johannes Dornisch
February 11, 2016
Design
2
58

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.

22713921a7e3a36b862b381a2197a068?s=128

Johannes Dornisch

February 11, 2016
Tweet

Other Decks in Design

See All in Design
Bff39f7d4e25a30fb4d28a9005de7363?s=48 uxaustralia
PRO
0
100
Bff39f7d4e25a30fb4d28a9005de7363?s=48 uxaustralia
PRO
0
140
7eca3e06edc3c69004aaf57de51900c2?s=48 ajstarks
0
100
74e48f0d01a7fec7c579a8d370698b26?s=48 tmiket
0
130
Bff39f7d4e25a30fb4d28a9005de7363?s=48 uxaustralia
PRO
0
140
C8752623d12b45468a9cf8f13d6e8df4?s=48 hazuijunpei
0
170
Ca63f6ee64787c337d905b069085324c?s=48 juliannaromero
0
1.6k
88447dbb966c62206c23f5ffd402af3b?s=48 chuckn0risk
2
180
7b784468f7657f5d33785a16e76ab95e?s=48 morishigeyuta
0
110
8c36fb60ec838f3116b7fbebe778948e?s=48 showyingart
0
150
37228dc025342eeadeb18bf1c2976a7a?s=48 fixel_admin
0
240
5bce9e09e585aed42d646c47c7da38e0?s=48 ivettetwin
1
120

Featured

See All Featured
Fe6b81005d1553accd6b2a28f6a2bef1?s=48 phodgson
92
4.2k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
123
8.3k
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
84
3.7k
7559f6cff1f5efc2d210965febd4d71c?s=48 bermonpainter
349
27k
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
294
110k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
147
20k
E9221b172e78e888355fa2fe4541b595?s=48 mclloyd
PRO
7
7.7k
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
405
20k
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
337
30k
053e75a5b48b44d6dd0612795dfb326d?s=48 notwaldorf
55
3.5k
245cee81a9c424266e5e401d844ea881?s=48 lara
175
11k
D8fc2580cfaca035f666d9e4ee79a7f7?s=48 mongodb
25
4.2k

Transcript

  1. T Learn to: t t

  2. Xaver (3)

  3. Astronaut

  4. braucht

  5. Raumschiff

  6. Aber…

  7. Raumschiff

  8. Mobile Product Design?

  9. None

  10. Wegen…

  11. Quelle: Find my Friends App Screenshot http://sachagreif.com/flat-pixels/

  12. 2016

  13. PUL

  14. PROBLEM

  15. URSACHE

  16. LÖSUNG

  17. None

  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/.