Your SlideShare is downloading. ×
Prototyping saves your bacon
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Prototyping saves your bacon

592
views

Published on

As presented at DevWeek 2014 http://devweek.com/ …

As presented at DevWeek 2014 http://devweek.com/
Prototyping is often a misunderstood subject, especially when it comes to mobile apps. It is often mistaken for wire-framing or detailed project specifications. In this session, Ardeleanu will explore the tools and techniques available to create an agile environment where the client can participate in the process. He will take an app from the idea stage and progress it through the list of features, writing the Application Definition Statement (ADS), sketching, paper prototyping and eventually on to something that can run on the actual device. Clients love that! And it could save your bacon.

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
592
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. iOS Application Development Prototyping saves your …
  • 2. iOS Application Development Prototyping will save your
  • 3. iOS Application Development http://www.jasonmecier.com/fkevinbacon.html
  • 4. iOS Application Development Prototyping will save your mmmm… bacon
  • 5. iOS Application Development
  • 6. iOS Application Development
  • 7. iOS Application Development
  • 8. iOS Application Development We’re building an app…
  • 9. iOS Application Development https://www.flickr.com/photos/13102974@N00/2736544035/
  • 10. iOS Application Development https://www.flickr.com/photos/officenow/2631533044/
  • 11. iOS Application Development Analysis
  • 12. iOS Application Development
  • 13. iOS Application Development Time for lunch…
  • 14. iOS Application Development
  • 15. iOS Application Development IT’S 2014 !!!
  • 16. iOS Application Development </rant>
  • 17. Prototyping? Huh?!
  • 18. iOS Application Development Starts with an idea
  • 19. What to expect? ‣ “I have this idea...” ‣ I want to build the next Angry Birds ‣ I want to build an app that does ... ‣ Client brief ‣ List of requirements ‣ Wireframes / Sketches
  • 20. New paradigms ‣ Constraints ‣ small size ‣ limited hardware ‣ one screen at a time ‣ one application at a time * ‣ touch input ‣ Interactions ‣ gestures ‣ shake ‣ orientation ‣ audio switch, volume buttons ‣ home & power buttons
  • 21. Wireframing vs. Prototypinginteractivity
  • 22. iOS Application Development Building great apps
  • 23. List of features too many features? Filter Yes Application Definition Statement App features User journeys Wirefames Prototype
  • 24. Application Definition Statement “A concise, concrete declaration of the app’s main purpose and its intended audience.” https://developer.apple.com/library/ios/documentation/ UserExperience/Conceptual/MobileHIG/
  • 25. Solve real problems "An app must solve a user's problem clearly and elegantly." Eric Hope, User Experience Evangelist, Apple
  • 26. iOS Application Development Delivery methods
  • 27. 3 ways to deliver mobile content ‣ web app [dedicated] ‣ native app ‣ there is no 3rd way!
  • 28. Strengths & weaknesses cost performance native web hybrid
  • 29. iOS Application Development </rant>
  • 30. iOS Application Development Types of apps
  • 31. Types of apps seriousness purpose serious fun tool entertainment
  • 32. Serious tool seriousness purpose serious fun tool entertainment
  • 33. Fun tool seriousness purpose serious fun tool entertainment
  • 34. Fun entertainment seriousness purpose serious fun tool entertainment
  • 35. Serious entertainment seriousness purpose serious fun tool entertainment
  • 36. Utility seriousness purpose serious fun tool entertainment http://h24.co/NearestBus
  • 37. iOS Application Development An example
  • 38. Features ‣ simple countdown timer ‣ with local notifications ‣ group timers in sequences ‣ pomodoro (25min + 5 min) ‣ gym training (5 mins, etc. )
  • 39. ADS A simple to use countdown collection for time conscious individuals. Type Serious Tool
  • 40. iOS Application Development Wireframing
  • 41. 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
  • 42. Demo app: Timers ‣ simple countdown timer countdown ‣ CRUD for timer ‣ local notifications for when the timer is up ‣ collection of timers (i.e. sequences) ‣ CRUD for collections
  • 43. Paper by FiftyThree
  • 44. ‣ simple countdown timer countdown ‣ CRUD for timer ‣ local notifications for when the timer is up ‣ collection of timers ‣ CRUD for collections Sketching
  • 45. ‣ simple countdown timer countdown ‣ CRUD for timer ‣ local notifications for when the timer is up ‣ collection of timers ‣ CRUD for collections Sketching
  • 46. ‣ simple countdown timer countdown ‣ CRUD for timer ‣ local notifications for when the timer is up ‣ collection of timers ‣ CRUD for collections Sketching
  • 47. ‣ simple countdown timer countdown ‣ CRUD for timer ‣ local notifications for when the timer is up ‣ collection of timers ‣ CRUD for collections Sketching
  • 48. ‣ simple countdown timer countdown ‣ CRUD for timer ‣ local notifications for when the timer is up ‣ collection of timers ‣ CRUD for collections Sketching
  • 49. ‣ simple countdown timer countdown ‣ CRUD for timer ‣ local notifications for when the timer is up ‣ collection of timers ‣ CRUD for collections Sketching
  • 50. ‣ CRUD for timer ‣ local notifications for when the timer is up ‣ collection of timers ‣ CRUD for collections Sketching
  • 51. ‣ CRUD for timer ‣ local notifications for when the timer is up ‣ collection of timers ‣ CRUD for collections Sketching
  • 52. ‣ CRUD for timer ‣ local notifications for when the timer is up ‣ collection of timers ‣ CRUD for collections Sketching
  • 53. ‣ local notifications for when the timer is up ‣ collection of timers ‣ CRUD for collectionsSketching
  • 54. ‣ local notifications for when the timer is up ‣ collection of timers ‣ CRUD for collectionsSketching
  • 55. ‣ local notifications for when the timer is up ‣ collection of timers ‣ CRUD for collectionsSketching
  • 56. Sketching
  • 57. More sketching start Splash screen List of sequences Add sequence Sequence edit 05:12start Timer start Add timer
  • 58. 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
  • 59. Wireframing tools ‣ Stencils ‣ Omnigraffle ‣ Photoshop ‣ Skala Preview ‣ Liveview ‣ Reflector
  • 60. Stencils uistencils.com
  • 61. Stencils flickr.com/photos/rosenfeldmedia/3978119393/
  • 62. Omnigraffle
  • 63. Omnigraffle
  • 64. graffletopia.com
  • 65. Realistic wireframes http://www.teehanlax.com/tools/
  • 66. Photoshop add-ons
  • 67. Skala Preview http://bjango.com/mac/skalapreview/
  • 68. Skala Preview
  • 69. Liveview http://www.zambetti.com/projects/liveview/ FREE!!!
  • 70. Reflector http://www.airsquirrels.com/reflector/
  • 71. iOS Application Development Prototyping
  • 72. Types of prototypes ‣ Web based ‣ Visual ‣ Presentation based
  • 73. 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
  • 74. Visual tools ‣ Design rich ‣ Visually correct ‣ Slightly harder to communicate ‣ Might lead to confusions
  • 75. Briefs http://giveabrief.com/
  • 76. Presentation based ‣ Use your existing skills ‣ The client can possibly create/amend these ‣ Offline access ‣ Easy to communicate ‣ Can run on the device
  • 77. Keynote
  • 78. Keynotopia
  • 79. Included elements
  • 80. Included elements
  • 81. Gestures lukew.com/touch
  • 82. Keynote settings
  • 83. Keynote export
  • 84. Demo
  • 85. iOS Application Development Xcode
  • 86. Storyboards
  • 87. Storyboards
  • 88. Storyboards The good: ‣ use your existing skills ‣ deploy on device ‣ wysiwyg ‣ can be built upon The not so good: ‣ must be a developer ‣ ad-hoc distribution ‣ client must have a device ‣ collaboration painful
  • 89. iOS Application Development Experimental
  • 90. Pop
  • 91. Whiteboard + Liveview + phone
  • 92. iOS Application Development Ruby
  • 93. iOS Application Development Collaterals
  • 94. Icons
  • 95. Patterns
  • 96. iOS Application Development Why prototyping?
  • 97. iOS Application Development 1
  • 98. iOS Application Development 2
  • 99. Questions @pardel ! hello24.com paul@hello24.com
  • 100. Thank you! @pardel ! hello24.com paul@hello24.com
  • 101. Skills Matter, London, April 23, 2013 Slide . ` Thank you!

×