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

Mobile Product Design for Developers

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

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