great mobile product design: tools und methoden zur entwicklung großartiger apps

96
mobl.co Mark Jäger CPO Stuffle

Upload: mark-jaeger

Post on 29-Nov-2014

543 views

Category:

Mobile


1 download

DESCRIPTION

Workshop Mobiletechcon 2014 @mark_jager http://about.me/markjaeger http://mobiletechcon.de/2014/sessions/einfuehrung-die-mobile-produktentwicklung-konzeption-design-entwicklung-vermarktung-von Mehr als ein Buzzword: Design Thinking bedeutet, dass wir in jedem kleinen Schritt von der Idee bis zum Release daran denken, Menschen das Leben besser zu machen. Nur dann werden sie uns ihre gerne ihre Aufmerksamkeit geben. Und dein Geld. So wird Design vom notwendigen Übel zum Erfolgsfaktor von Apps. In diesem Workshop beleuchten wir anhand konkreter Beispiele, Techniken und Tools aus der Praxis, wie man Design in Projekten verankert und mit dem richtigen Interaktions- und Grafikdesign schneller zu besseren Ergebnissen kommt.

TRANSCRIPT

Page 1: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Mark JägerCPO Stuffle

Page 2: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Mark Jäger

Page 3: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

DesignProductMobile

Page 4: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

DesignProductMobileGreat

Page 5: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Mobile DesignProduct

Page 6: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Mobile

Wgsimon on Wikipedia: Transistor Count and Moore's Law, http://bit.ly/1qTnwgb

Page 7: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Mobile

IBM 704, NASA on wikipedia, Public domain, http://bit.ly/1nacT40

Page 8: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Mobile

HP 1000 E-Series, Autopilot on wikipedia, CC BY-SA 3.0, http://bit.ly/1tYujW1

Page 9: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Mobile

Original Macintosh 128k, Grm wnr on wikipedia, CC BY-SA 3.0, http://bit.ly/1vWRUqz

Page 10: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Mobile

Toschiba T110, Johann H. Addicks on wikipedia, CC BY-SA 3.0, http://bit.ly/1tkbz5E

Page 11: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Mobile

Original iPhone, DanielZanetti on wikicommons, GNU, http://bit.ly/1pudmDG

Page 12: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Mobile

Apple Gebäude für die iPhone 6 Präsentation, Macrumors, http://bit.ly/1tf9isk

Page 13: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Mobile

Page 14: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Product DesignMobile

Page 15: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Product

„anything … that might satisfy a want or need“

Wikipedia, eigene Hervorhebung, http://en.wikipedia.org/wiki/Product_(business)

Page 16: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Product DesignMobile

Page 17: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Design

Sachen bauen

Entwerfen und Gestalten

Page 18: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Design

Sachen bauen

Page 19: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Design

„Design is a funny word. Some people think design means how it looks.

But of course … it's really how it works.“

Steve Jobs

Steve Jobs im Interview mit Wired 1996, eigene Hervorhebung, http://wrd.cm/1pnnXQX

Page 20: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

DesignService

Interface

Page 21: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Service

improve the productivity and quality

of services

Page 22: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Sachen für Menschen bauen

Service

Page 23: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Für wen macht ihr eure App?

Service

Page 24: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Service

Kinder mit Lernschwierigkeiten?

Page 25: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Fußballfans mit Geschmacksproblemen?

Service

Page 26: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Personas

Service

Page 27: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Personas

Willy, 53Der Hobbybastler

wohnt auf dem LandHaus neben der Mutter

Hobby ist seine Leidenschaft (z.B. Eisenbahnen)

mittleres EinkommenalleinstehendHTC Wildfire S

Service

Page 28: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Was soll eure App für diese Menschen tun?

Service

Page 29: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Service

Sachen beibringen

Page 30: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Service

Motivation durch Freude und schnelle Erfolge

Page 31: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Jobs-to-be-done

Service

Page 32: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Jobs-to-be-done

Service

Page 33: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

DesignService

Jobs-to-be-doneLeonhard, 38Der Altkreative

Architekt, angestellt in kleinem BüroApple-Fan, aus Gründen

trinkt nur Weinelegant aber dezent gekleidetdesillusioniert pragmatisch

bisschen Ökoqualitätsbewusst

iPhone

• schöne Schnäppchen suchen• Regionales finden

Jobs• Ausmisten• Müll vermeiden

Page 34: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Service

Storyboard

Page 35: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Storyboard

Page 36: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Runtastic

Great DesignServiceMobile

Page 37: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Runtastic

Situativer Kontext

Great DesignServiceMobile

Page 38: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

Runtastic Story Runs

Great DesignServiceMobile

Page 39: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Great Mobile DesignService

Runtastic Story Runs

Page 40: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Menschen

Great DesignServiceMobile

Page 41: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

Yahoo News Digest

Great DesignServiceMobile

Page 42: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Neue Anwendungen

Great DesignServiceMobile

Page 43: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

car2go

Great DesignServiceMobile

Page 44: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

DesignGreat

ServiceInterface

Page 45: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

DesignServiceInterfaceInterface

„shaping digital things for people’s use“

Page 46: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

„shaping digital things for people’s use“

Interface

Page 47: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Butter bei die Fische

Was sind die wichtigsten Funktionen?

Interface

Page 48: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Interface

Elemente

Beziehung

Interaktion

Page 49: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Page 50: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Interface

Skizzen

Page 51: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Page 52: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Interface

Wireframes

Page 53: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Wireframes

Page 54: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Interface

Screen Collage

Page 55: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

Screen Collage

Screenshots

Page 56: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

Keynote Powerpoint

Sketch

Screen Collage

Page 57: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

Klaut!

Screen Collage

Page 58: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

Teehan & Lax GUI Templates

4 21

AirPlayAirDrop:

1:09:36 -2:47

The Gently Mad - Adam Clark - The Gently Mad034: Jon Lax

Screen Collage

Page 59: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

Nicht schön – aber echt

Screen Collage

Page 60: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

Flinto InVision

Screen Collage

Page 61: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

Flinto InVision

Screen Collage

Page 62: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

Flinto InVision

Screen Collage

Page 63: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Animation

Interface

Page 64: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Keynote

Animation

Page 65: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

HTML Prototyp

Keynote

Animation

Page 66: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

HTML Prototyp

Interface

FramerJS

Keynote

Page 67: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

FramerJS

HTML Prototyp

Page 68: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

DesignGreat Interface

Page 69: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Touch & Gesten

Clear

DesignGreat Interface

Page 70: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

DesignGreat Interface

Hilfreiche Animationen

Vesper

Page 71: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Design

Page 72: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Design = Prozess

Page 73: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Page 74: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Page 75: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Testen

Prozess

Page 76: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

usertesting.com

Testen

Prozess

Page 77: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Prozess

Team on Site

Page 78: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Prozess

MVP

Page 79: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Prozess

MLP

Page 80: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Minimal Lovable Product

Prozess

M L P

Page 81: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Plattformen

Prozess

Page 82: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Plattformen

Page 83: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Plattformen

Page 84: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Plattformen

Page 85: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Plattformen

Android Material Design iOS 7

Page 86: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Plattformen

Typographie

Deference

Flat

Page 87: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Plattformen

TypographieDeferenceFlatTwo designs to rule them all

Page 88: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Plattformen

Page 89: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Plattformen

TypographieDeferenceFlatAußer: native Elemente

Page 90: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Plattformen

iMessage

Page 91: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Nie fertig

Prozess

Page 92: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Sprint

Prozess

Page 93: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Marathon

Prozess

Page 94: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Danke

Page 95: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Mark Jäger

@mark_jaeger

Page 96: Great Mobile Product Design: Tools und Methoden zur Entwicklung großartiger Apps

mobl.co

Junior DesigneriOS Entwickler