how to prototype your mobile apps

76
iOS Application Development How to prototype your mobile apps Paul Ardeleanu London, April 23, 2013

Upload: hello24com

Post on 28-Jan-2015

111 views

Category:

Travel


2 download

DESCRIPTION

 

TRANSCRIPT

Page 1: How to prototype your mobile apps

iOS Application Development

How to prototypeyour mobile apps

Paul Ardeleanu

London, April 23, 2013

Page 2: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

About me

Paul Ardeleanu

- work @ Hello24.com

2

- teach @ Skills Matter

- I build apps

Page 3: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .3

clarity24.eu

Page 4: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

Social

@skillsmatter

@pardel

app.net/pardel

4

#LiTG

#iOS

Page 5: How to prototype your mobile apps

iOS Application Development

Prototyping?Huh?!

Page 6: How to prototype your mobile apps

iOS Application Development

Page 7: How to prototype your mobile apps

iOS Application Development

It starts with an idea

Page 8: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

What to expect?

‣ “I have this idea...”

‣ I want to build the next Angry Birds

‣ I want to build an app that does ...

‣ I want my phone to connect to my brain and download my thoughts!

‣ Client brief

‣ List of requirements

‣ Wireframes / Sketches

8

Page 9: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

Wireframing vs. Prototyping

9

inte

ract

ivit

y

Page 10: How to prototype your mobile apps

iOS Application Development

Delivery methods

Page 11: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

3 ways to deliver mobile content

‣ web app [dedicated]

‣ native app

‣ hybrid...

11

^H^H^H‣ there is no 3rd way!

Page 12: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .12

Page 13: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

Strengths & weaknesses

13

cost

performance

native

web

hybrid

Page 14: How to prototype your mobile apps

iOS Application Development

Type of apps

Page 15: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

Type of apps

15

seri

ou

snes

s

purposeserious

fun

tool entertainment

Page 16: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

seri

ou

snes

s

purposeserious

fun

tool entertainment

Serious tool

16

Page 17: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

seri

ou

snes

s

purposeserious

fun

tool entertainment

Fun tool

17

Page 18: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

seri

ou

snes

s

purposeserious

fun

tool entertainment

Fun entertainment

18

Page 19: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

seri

ou

snes

s

purposeserious

fun

tool entertainment

Serious entertainment

19

Page 20: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

seri

ou

snes

s

purposeserious

fun

tool entertainment

Utility

20

http://h24.co/NearestBus

Page 21: How to prototype your mobile apps

iOS Application Development

Example App/Idea Timers

Page 22: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

Features

‣ simple countdown timer

‣ with local notifications

‣ group timers in sequences

‣ pomodoro (25min + 5 min)

‣ gym training (5 mins, etc. )

22

Page 23: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .23

A simple to use countdown collection for time conscious individuals.

Serious Tool

ADS

Type

Page 24: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

Wireframing

‣ identify main areas of the app

‣ identify screens

‣ identify relations between screens

‣ start from the simplest things and build up

‣ start from the main task of the app

24

Page 25: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

Timers app - Features

‣ simple countdown timer countdown

‣ CRUD for timer

‣ local notifications for when the timer is up

‣ collection of timers (i.e. sequences)

‣ CRUD for collections

25

Page 26: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

‣ simple countdown timer countdown

‣ CRUD for timer

‣ local notifications for when the timer is up

‣ collection of timers

‣ CRUD for collections

Sketching

26

Page 27: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

More sketching

27

start

Splashscreen

List ofsequences

Add sequence

Sequenceedit

05:12

start

Timer

Page 28: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

Sketching

‣ start from the most important task

‣ identify main areas of the app

‣ identify screens

‣ identify relations between screens

‣ Don’t worry! You won’t get it right the first time

28

Page 29: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

Tools

‣ Stencils

‣ Omnigraffle

‣ Keynote

‣ Photoshop

‣ Skala Preview

‣ Liveview

‣ Reflector

29

Page 30: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

Stencils

30

uistencils.com

Page 31: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .31

Other “hardware” solutions

flickr.com/photos/rosenfeldmedia/3978119393/

Page 32: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

Omnigraffle

32

Page 33: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

Graffletopia.com

33

Page 34: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

Timers app - Wireframes

‣ Demo

34

Page 35: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

Realistic wireframes

35

http://www.teehanlax.com/tools/

Page 36: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

Keynote

36

Page 37: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

Keynotopia

37

http://keynotopia.com/iphone-prototyping/

Page 38: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

Included elements

38

Page 39: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

Keynotopia example

39

Page 40: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

Keynote tips&tricks

40

Page 41: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

Keynote tips & tricks

41

Page 42: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

Touch Gesture Reference Guide

42

http://www.lukew.com/ff/entry.asp?1071

Page 43: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

Demo

43

Page 44: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

Keynotopia demo: Timers

44

Page 45: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .45bjango.com/mac/skalapreview/

Page 46: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .46

Page 47: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

Liveview

47

FREE!!!

Page 48: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

Reflector

48

Page 49: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

Types of prototypes

‣Web based

‣ Visual based

‣ Presentation based

49

Page 50: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

Web based

‣ (almost) No technical skills required

‣ Easy to communicate with the client

‣ Possible offline access

‣ Can run on the device

‣ but can deviate from the native experience

50

Page 51: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .51

Page 52: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .52

Page 53: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .53

Page 54: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .54

Page 55: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

Visual based

‣ Design rich

‣ Visually correct

‣ Slightly harder to communicate

‣ Might lead to confusions

55

Page 56: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

Presentation based

‣ Use your existing skills

‣ The client can possibly create/amend these

‣ Offline access

‣ Easy to communicate

‣ Can run on the device

56

Page 57: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

Types of prototypes

‣Web based

‣ Visual based

‣ Presentation based

57

Page 58: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

Mac-specific

58

Page 59: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .59

iBooks Author

Page 60: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

Custom themes

60

Page 61: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

XCode

61

Page 62: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .62

Storyboarding

Page 63: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .63

Page 64: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .64

Page 65: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .65

Page 67: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

Storyboarding

The good:

‣ use your existing skills

‣ deploy on device

‣ wysiwyg

‣ can be built upon

67

The not so good:

‣ must be a developer

‣ ad-hoc distribution

‣ client must have a device

‣ dev collaboration painful

Page 68: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

Experimental

68

Page 69: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

Pop

69

Page 70: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

Whiteboard + Liveview + phone

70

Page 71: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

Collaterals

71

Page 72: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

Icons

72

Page 73: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

Patterns

73

Page 74: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

Photoshop add-ons

74

Page 75: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .

[email protected]

75

@pardel

app.net/pardel

Question Time :)

Page 76: How to prototype your mobile apps

Skills Matter, London, April 23, 2013 Slide .76

Thank you!