Mobile Product Design for Developers

T

Learn to:How you can

t tt

Xaver (3)

Astronaut

braucht

Raumschiff

Aber…

Raumschiff

Mobile Product Design?

Wegen…

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

2016

PUL

PROBLEM

URSACHE

LÖSUNG

Man muss kein Künstlersein… Ganz im Gegenteil!

Ja, aber wie?

Modelle

Leitfäden/Abläufe/Prinzipien

The Product Pyramid Quelle: Vgl. Dan Olsen – The Lean Product Playbook, Wiley 2015

Kunde/Zielgruppe Bildquelle: unsplash

Needs Bildquelle: unsplash

„Zentrale Kundenproblemesichtbar besser lösen alsAndere“

„Ein Raumschiff, das unseremAstronauten schnellen und sicheren Transport bietet“

Quelle: Peter J. Thomson – Value Proposition Canvas Template (http://www.peterjthomson.com/2013/11/value-proposition-canvas/)

Features Quelle: Tarmack – Star Citizen Feature Creep(https://i.ytimg.com/vi/OQcKpcYpELo/maxresdefault.jpg)

FeaturesQuelle: Sebastien Roth, http://www.startupolic.com/launching-your-

service-think-about-ux/, Henrik Kniberghttp://blog.crisp.se/2016/01/25/henrikkniberg/making-sense-of-mvp

MUST HAVES

KANO-MODELLPERFORMANCE

DELIGHTERS

Flügel

Tür

Triebwerk

Düsentriebwerk

Aerodynamic

Große Flügel

Eingebauter Kran

Integriertes Raumfahrzeug

Aussichtsplattform

„As an astronaut I want to have a door to easily enter the spaceship “

The Product Pyramid Quelle: Vgl. Dan Olsen – The Lean Product Playbook, Wiley 2015

Die fünf Ebenen der User ExperienceQuelle: Vgl. Jesse James Garret, Die

Elemente der User Experience, Addison Wesley 2012

Struktur

WY

X

Z

Quelle: Jesse James Garret http://www.jjg.net/ia/visvocab/

Raster - Scribbles

Raster - Wireframes Quelle: Selbst erstellte Grafik

Raster - Mockups Quelle: Selbst erstellte Grafik

PLUS: Prototype Quelle: Selbst erstellte Grafik

Quelle:Vgl. d.school, https://dschool.stanford.edu/sandbox/groups/designresources/wiki/36873/attachments/74b3d/ModeGuideBOOTCAMP2010L.pdf?sessionID=2f58897684fb982484d0df8fbb73761194ef1158

Empathize

Define

Ideate

Prototype

Test

Design Thinking

Oberfläche – Visual Design

Werden wir etwaspraktischer…

Deference

Clarity

Depth

🍎 Apple – HUI Guidelines

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

Do. Don‘t

Quelle: Selbst erstellte Grafik (Bilder: unsplash)

Do. Don‘t

Quelle: Selbst erstellte Grafik

Do. Don‘t

Quelle: Selbst erstellte Grafik

Verwendet Standard-Elemente.

🍎 G

Quelle Sketch Logo https://www.sketchapp.com/static/images/app-icon.png

Quelle: Sketch – iOS UI Design Template

Quelle: Sketch – Material Design Template

Live-Demo

„The reason designers shouldknow about code, is the same reason developers should knowabout design. Not to becomedesigners, but to empathizewith them.

– Jesse Weaver

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