How to prototype your mobile apps
Upcoming SlideShare
Loading in...5
×
 

How to prototype your mobile apps

on

  • 803 views

 

Statistics

Views

Total Views
803
Views on SlideShare
797
Embed Views
6

Actions

Likes
1
Downloads
5
Comments
0

2 Embeds 6

http://127.0.0.1 4
http://www.pardel.net 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

How to prototype your mobile apps How to prototype your mobile apps Presentation Transcript

  • iOS Application DevelopmentHow to prototypeyour mobile appsPaul ArdeleanuLondon, April 23, 2013
  • Skills Matter, London, April 23, 2013 Slide .About mePaul Ardeleanu- work @ Hello24.com2- teach @ Skills Matter- I build apps
  • Skills Matter, London, April 23, 2013 Slide .3clarity24.eu
  • Skills Matter, London, April 23, 2013 Slide .Social@skillsmatter@pardelapp.net/pardel4#LiTG#iOS
  • iOS Application DevelopmentPrototyping?Huh?!
  • iOS Application Development
  • iOS Application DevelopmentIt 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 downloadmy thoughts!‣ Client brief‣ List of requirements‣ Wireframes / Sketches8
  • Skills Matter, London, April 23, 2013 Slide .Wireframing vs. Prototyping9interactivity
  • iOS Application DevelopmentDelivery 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 & weaknesses13costperformancenativewebhybrid
  • iOS Application DevelopmentType of apps
  • Skills Matter, London, April 23, 2013 Slide .Type of apps15seriousnesspurposeseriousfuntool entertainment
  • Skills Matter, London, April 23, 2013 Slide .seriousnesspurposeseriousfuntool entertainmentSerious tool16
  • Skills Matter, London, April 23, 2013 Slide .seriousnesspurposeseriousfuntool entertainmentFun tool17
  • Skills Matter, London, April 23, 2013 Slide .seriousnesspurposeseriousfuntool entertainmentFun entertainment18
  • Skills Matter, London, April 23, 2013 Slide .seriousnesspurposeseriousfuntool entertainmentSerious entertainment19
  • Skills Matter, London, April 23, 2013 Slide .seriousnesspurposeseriousfuntool entertainmentUtility20http://h24.co/NearestBus
  • iOS Application DevelopmentExample App/IdeaTimers
  • 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 .23A simple to use countdown collection for timeconscious individuals.Serious ToolADSType
  • 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 app24
  • 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 collections25
  • Skills Matter, London, April 23, 2013 Slide .‣ simple countdown timer countdown‣ CRUD for timer‣ local notifications for when the timer isup‣ collection of timers‣ CRUD for collectionsSketching26
  • Skills Matter, London, April 23, 2013 Slide .More sketching27startSplashscreenList ofsequencesAddsequenceSequenceedit05:12startTimer
  • 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 time28
  • Skills Matter, London, April 23, 2013 Slide .Tools‣ Stencils‣ Omnigraffle‣ Keynote‣ Photoshop‣ Skala Preview‣ Liveview‣ Reflector29
  • Skills Matter, London, April 23, 2013 Slide .Stencils30uistencils.com
  • Skills Matter, London, April 23, 2013 Slide .31Other “hardware” solutionsflickr.com/photos/rosenfeldmedia/3978119393/
  • Skills Matter, London, April 23, 2013 Slide .Omnigraffle32
  • Skills Matter, London, April 23, 2013 Slide .Graffletopia.com33
  • Skills Matter, London, April 23, 2013 Slide .Timers app - Wireframes‣ Demo34
  • Skills Matter, London, April 23, 2013 Slide .Realistic wireframes35http://www.teehanlax.com/tools/
  • Skills Matter, London, April 23, 2013 Slide .Keynote36
  • Skills Matter, London, April 23, 2013 Slide .Keynotopia37http://keynotopia.com/iphone-prototyping/
  • Skills Matter, London, April 23, 2013 Slide .Included elements38
  • Skills Matter, London, April 23, 2013 Slide .Keynotopia example39
  • Skills Matter, London, April 23, 2013 Slide .Keynote tips&tricks40
  • Skills Matter, London, April 23, 2013 Slide .Keynote tips & tricks41
  • Skills Matter, London, April 23, 2013 Slide .Touch Gesture Reference Guide42http://www.lukew.com/ff/entry.asp?1071
  • Skills Matter, London, April 23, 2013 Slide .Demo43
  • Skills Matter, London, April 23, 2013 Slide .Keynotopia demo: Timers44
  • Skills Matter, London, April 23, 2013 Slide .45bjango.com/mac/skalapreview/
  • Skills Matter, London, April 23, 2013 Slide .46
  • Skills Matter, London, April 23, 2013 Slide .Liveview47FREE!!!
  • Skills Matter, London, April 23, 2013 Slide .Reflector48
  • Skills Matter, London, April 23, 2013 Slide .Types of prototypes‣ Web based‣ Visual based‣ Presentation based49
  • 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 experience50
  • Skills Matter, London, April 23, 2013 Slide .51
  • Skills Matter, London, April 23, 2013 Slide .52
  • Skills Matter, London, April 23, 2013 Slide .53
  • Skills Matter, London, April 23, 2013 Slide .54
  • Skills Matter, London, April 23, 2013 Slide .Visual based‣ Design rich‣ Visually correct‣ Slightly harder to communicate‣ Might lead to confusions55
  • 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 device56
  • Skills Matter, London, April 23, 2013 Slide .Types of prototypes‣ Web based‣ Visual based‣ Presentation based57
  • Skills Matter, London, April 23, 2013 Slide .Mac-specific58
  • Skills Matter, London, April 23, 2013 Slide .59iBooks Author
  • Skills Matter, London, April 23, 2013 Slide .Custom themes60
  • Skills Matter, London, April 23, 2013 Slide .XCode61
  • Skills Matter, London, April 23, 2013 Slide .62Storyboarding
  • Skills Matter, London, April 23, 2013 Slide .63
  • Skills Matter, London, April 23, 2013 Slide .64
  • Skills Matter, London, April 23, 2013 Slide .65
  • 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 .StoryboardingThe good:‣ use your existing skills‣ deploy on device‣ wysiwyg‣ can be built upon67The 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 .Experimental68
  • Skills Matter, London, April 23, 2013 Slide .Pop69
  • Skills Matter, London, April 23, 2013 Slide .Whiteboard + Liveview + phone70
  • Skills Matter, London, April 23, 2013 Slide .Collaterals71
  • Skills Matter, London, April 23, 2013 Slide .Icons72
  • Skills Matter, London, April 23, 2013 Slide .Patterns73
  • Skills Matter, London, April 23, 2013 Slide .Photoshop add-ons74
  • Skills Matter, London, April 23, 2013 Slide .paul@h24.io75@pardelapp.net/pardelQuestion Time :)
  • Skills Matter, London, April 23, 2013 Slide .76Thank you!