prototyping : turning ideas into reality @ devlearn
TRANSCRIPT
Prototyping: Turning Ideas Into RealityNick Floro [email protected] @NickFloro
Download Handout: goo.gl/UhRzEwDownload App Prototyping on Paper (POP)
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 1 of 97
idea
Plan & Prototype
Launch
Development
MapDevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 2 of 97
BrainstormingDevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 3 of 97
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 4 of 97
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 5 of 97
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 6 of 97
Keep it Simple
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 7 of 97
3 Key Factors1. Audience
2. Technology
3. User Stories
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 8 of 97
3 Key Factors1. Audience
2. Technology
3. User Stories Why?
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 9 of 97
3 Key Factors1. Audience
2. Technology
3. User Stories
All of courses must work on mobile!
Why?
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 10 of 97
3 Key Factors1. Audience
2. Technology
3. User Stories
All of courses must work on mobile!
Why?
Because I have a new tablet and everyone is doing it.
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 11 of 97
3 Key Factors1. Audience
2. Technology
3. User Stories
We need to support the changing technology are sales team is moving from laptops to tablets.
Why?
All of courses must work on mobile!
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 12 of 97
Sketching where ideas begin
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 13 of 97
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 14 of 97
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 15 of 97
Sketch the
Concept
Prototyping on Paper
Marvel App
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 16 of 97
POP - Prototyping on Paper
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 17 of 97
POP - Prototyping on Paper
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 18 of 97
POP - Prototyping on Paper
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 19 of 97
POP - Prototyping on Paper
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 20 of 97
POP - Prototyping on Paper
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 21 of 97
Mobile Apps
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 22 of 97
Adobe Ideas
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 23 of 97
Evernote Skitch
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 24 of 97
Paper by FiftyThreeDevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 25 of 97
MarvelApp.com
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 26 of 97
Wireframing Low / High Fidelity
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 27 of 97
Tools:
• Wireframes–Keynote / PowerPoint
Quick Prototyping Techniques
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 28 of 97
This is my question example where you would tell a story and ask for a response?
option 1
option 2
option 3
option 4
option 5
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 29 of 97
This is my question example where you would tell a story and ask for a response?
Answer example the user could select from one of the options.
Answer example the user could select from one of the options.
Answer example the user could select from one of the options.
Answer example the user could select from one of the options.
Answer example the user could select from one of the options.
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 30 of 97
keynotekungfu.com
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 31 of 97
keynotopia.com
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 32 of 97
Custom Template in Keynote
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 33 of 97
Adobe Acrobat
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 34 of 97
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 35 of 97
Sketchy & iMockUps
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 36 of 97
teehanlax.com/tools/
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 37 of 97
InvisionApp.com
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 38 of 97
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 39 of 97
Sketchy & iMockUps
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 40 of 97
Feedback & Iterate Evolving Ideas
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 41 of 97
Communication
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 42 of 97
Date Description Details Screen/Video Results Estimate
4/11/14 The screen flashes.When I click on the screen it flashes. Its not suppose to.
Attached. Could not recreate.
Task
The Good The Ugly The Bad
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 43 of 97
It’s Critical
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 44 of 97
Date Description Details Screen/Video Results Estimate
4/11/14 The screen flashes.When I click on the screen it flashes. Its not suppose to.
Attached. Attached screen shows how it was recreated. 1 Critical
Task
The Good The Ugly The Bad
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 45 of 97
Discuss Discuss, Prioritize and Get on the Same Page
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 46 of 97
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 47 of 97
Getting Inspired UI/UX
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 48 of 97
Flat Pages
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 49 of 97
Apple Weather
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 50 of 97
Yahoo Weather
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 51 of 97
Yahoo Weather
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 52 of 97
Yahoo Weather
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 53 of 97
Tab Bar
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 54 of 97
Apple Clock
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 55 of 97
Tree Structure
One
Two
Three
Four
Five
Six
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 56 of 97
Tree Structure
< Back
Screen One >
Screen Two >
Screen Three >
Screen Four >
Screen Five >
Screen Six >
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 57 of 97
First Aid
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 58 of 97
First Aid
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 59 of 97
First Aid
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 60 of 97
First Aid
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 61 of 97
Innovation
>
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 62 of 97
evernote
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 63 of 97
evernote
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 64 of 97
Pulse
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 65 of 97
Pulse
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 66 of 97
Pulse
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 67 of 97
Zite
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 68 of 97
Zite
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 69 of 97
Zite
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 70 of 97
Zite
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 71 of 97
How
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 72 of 97
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 73 of 97
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 74 of 97
Time
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 75 of 97
Budget
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 76 of 97
Ideas
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 77 of 97
Share
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 78 of 97
GoogleDocs
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 79 of 97
WordPress.comBuddyPress
Plug-ins
Knowledge Bank
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 80 of 97
Google Hangouts
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 81 of 97
Resources To help you grow.
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 82 of 97
aBookApart.com
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 83 of 97
mural.ly
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 84 of 97
mural.ly
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 85 of 97
mural.ly
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 86 of 97
BrowserStack.com
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 87 of 97
BrowserStack.com
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 88 of 97
UserTesting.com
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 89 of 97
reflectorapp.com
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 90 of 97
airserver.com
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 91 of 97
ipsum-generator.com
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 92 of 97
CupCakeIpsum.com
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 93 of 97
JingProject.com
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 94 of 97
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 95 of 97
What can you apply from today?
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 96 of 97
Thank You
Nick Florosealworks interactive studios
twitter.com/NickFloro
Download the Presentation at:http://www.slideshare.net/nickfloro
Download Handout: goo.gl/UhRzEwDownload App Prototyping on Paper (POP)
DevLearn15 Prototyping: Turning Ideas into Reality 10/01/15
nickfloro.com sealworks.com 97 of 97