How to prototype your mobile apps

How to prototype your mobile apps
iOS Application Development How to prototype your mobile apps Paul Ardeleanu London, April 23, 2013
Skills Matter, London, April 23, 2013 Slide . About me Paul Ardeleanu - work @ Hello24.com 2 - teach @ Skills Matter - I build apps
Skills Matter, London, April 23, 2013 Slide .3 clarity24.eu
Skills Matter, London, April 23, 2013 Slide . Social @skillsmatter @pardel app.net/pardel 4 #LiTG #iOS
iOS Application Development Prototyping? Huh?!
iOS Application Development
iOS Application Development It starts with an idea
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
Skills Matter, London, April 23, 2013 Slide . Wireframing vs. Prototyping 9 interactivity
iOS Application Development Delivery methods
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!
Skills Matter, London, April 23, 2013 Slide .12
Skills Matter, London, April 23, 2013 Slide . Strengths & weaknesses 13 cost performance native web hybrid
iOS Application Development Type of apps
Skills Matter, London, April 23, 2013 Slide . Type of apps 15 seriousness purpose serious fun tool entertainment
Skills Matter, London, April 23, 2013 Slide . seriousness purpose serious fun tool entertainment Serious tool 16
Skills Matter, London, April 23, 2013 Slide . seriousness purpose serious fun tool entertainment Fun tool 17
Skills Matter, London, April 23, 2013 Slide . seriousness purpose serious fun tool entertainment Fun entertainment 18
Skills Matter, London, April 23, 2013 Slide . seriousness purpose serious fun tool entertainment Serious entertainment 19
Skills Matter, London, April 23, 2013 Slide . seriousness purpose serious fun tool entertainment Utility 20 http://h24.co/NearestBus
iOS Application Development Example App/Idea Timers
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
Skills Matter, London, April 23, 2013 Slide .23 A simple to use countdown collection for time conscious individuals. Serious Tool ADS Type
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
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
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
Skills Matter, London, April 23, 2013 Slide . More sketching 27 start Splash screen List of sequences Add sequence Sequence edit 05:12 start Timer
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
Skills Matter, London, April 23, 2013 Slide . Tools ‣ Stencils ‣ Omnigraffle ‣ Keynote ‣ Photoshop ‣ Skala Preview ‣ Liveview ‣ Reflector 29
Skills Matter, London, April 23, 2013 Slide . Stencils 30 uistencils.com
Skills Matter, London, April 23, 2013 Slide .31 Other “hardware” solutions flickr.com/photos/rosenfeldmedia/3978119393/
Skills Matter, London, April 23, 2013 Slide . Omnigraffle 32
Skills Matter, London, April 23, 2013 Slide . Graffletopia.com 33
Skills Matter, London, April 23, 2013 Slide . Timers app - Wireframes ‣ Demo 34
Skills Matter, London, April 23, 2013 Slide . Realistic wireframes 35 http://www.teehanlax.com/tools/
Skills Matter, London, April 23, 2013 Slide . Keynote 36
Skills Matter, London, April 23, 2013 Slide . Keynotopia 37 http://keynotopia.com/iphone-prototyping/
Skills Matter, London, April 23, 2013 Slide . Included elements 38
Skills Matter, London, April 23, 2013 Slide . Keynotopia example 39
Skills Matter, London, April 23, 2013 Slide . Keynote tips&tricks 40
Skills Matter, London, April 23, 2013 Slide . Keynote tips & tricks 41
Skills Matter, London, April 23, 2013 Slide . Touch Gesture Reference Guide 42 http://www.lukew.com/ff/entry.asp?1071
Skills Matter, London, April 23, 2013 Slide . Demo 43
Skills Matter, London, April 23, 2013 Slide . Keynotopia demo: Timers 44
Skills Matter, London, April 23, 2013 Slide .45bjango.com/mac/skalapreview/
Skills Matter, London, April 23, 2013 Slide . Liveview 47 FREE!!!
Skills Matter, London, April 23, 2013 Slide . Reflector 48
Skills Matter, London, April 23, 2013 Slide . Types of prototypes ‣ Web based ‣ Visual based ‣ Presentation based 49
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
Skills Matter, London, April 23, 2013 Slide . Visual based ‣ Design rich ‣ Visually correct ‣ Slightly harder to communicate ‣ Might lead to confusions 55
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
Skills Matter, London, April 23, 2013 Slide . Types of prototypes ‣ Web based ‣ Visual based ‣ Presentation based 57
Skills Matter, London, April 23, 2013 Slide . Mac-specific 58
Skills Matter, London, April 23, 2013 Slide .59 iBooks Author
Skills Matter, London, April 23, 2013 Slide . Custom themes 60
Skills Matter, London, April 23, 2013 Slide . XCode 61
Skills Matter, London, April 23, 2013 Slide .62 Storyboarding
Skills Matter, London, April 23, 2013 Slide . http://www.raywenderlich.com/5138/ beginning-storyboards-in-ios-5-part-1 66
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
Skills Matter, London, April 23, 2013 Slide . Experimental 68
Skills Matter, London, April 23, 2013 Slide . Pop 69
Skills Matter, London, April 23, 2013 Slide . Whiteboard + Liveview + phone 70
Skills Matter, London, April 23, 2013 Slide . Collaterals 71
Skills Matter, London, April 23, 2013 Slide . Icons 72
Skills Matter, London, April 23, 2013 Slide . Patterns 73
Skills Matter, London, April 23, 2013 Slide . Photoshop add-ons 74
Skills Matter, London, April 23, 2013 Slide . paul@h24.io 75 @pardel app.net/pardel Question Time :)
Skills Matter, London, April 23, 2013 Slide .76 Thank you!

Check these out next

How to prototype your mobile apps

Recommended

More Related Content

Viewers also liked(20)

Similar to How to prototype your mobile apps(20)

More from Paul Ardeleanu(20)

Recently uploaded(20)

How to prototype your mobile apps