prototyping : turning ideas into reality @ devlearn

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

mailto:[email protected]

mailto:[email protected]

idea

Plan & Prototype

Launch

Development

MapDevLearn15 Prototyping: Turning Ideas into Reality 10/01/15


BrainstormingDevLearn15 Prototyping: Turning Ideas into Reality 10/01/15


Keep it Simple



3 Key Factors1. Audience

2. Technology

3. User Stories




2. Technology

3. User Stories Why?




2. Technology

3. User Stories

All of courses must work on mobile!

Why?




2. Technology

3. User Stories


Why?

Because I have a new tablet and everyone is doing it.




2. Technology

3. User Stories

We need to support the changing technology are sales team is moving from laptops to tablets.

Why?




Sketching where ideas begin



Sketch the

Concept

Prototyping on Paper

Marvel App



POP - Prototyping on Paper



Mobile Apps



Adobe Ideas



Evernote Skitch



Paper by FiftyThreeDevLearn15 Prototyping: Turning Ideas into Reality 10/01/15


MarvelApp.com



Wireframing Low / High Fidelity



Tools:

• Wireframes–Keynote / PowerPoint

Quick Prototyping Techniques



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



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.







keynotekungfu.com



keynotopia.com



Custom Template in Keynote



Adobe Acrobat



Sketchy & iMockUps



teehanlax.com/tools/



http://www.teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/


InvisionApp.com



Sketchy & iMockUps



Feedback & Iterate Evolving Ideas



Communication



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



It’s Critical



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



Discuss Discuss, Prioritize and Get on the Same Page



Getting Inspired UI/UX



Flat Pages



Apple Weather



Yahoo Weather



Tab Bar



Apple Clock



Tree Structure

One

Two

Three

Four

Five

Six



Tree Structure

< Back

Screen One >

Screen Two >

Screen Three >

Screen Four >

Screen Five >

Screen Six >



First Aid



Innovation

>



evernote



Pulse



Zite



Zite



http://www.e-learningguru.com


Zite





How



Time



Budget



Ideas



Share



GoogleDocs



WordPress.comBuddyPress

Plug-ins

Knowledge Bank



Google Hangouts



Resources To help you grow.



aBookApart.com



mural.ly



BrowserStack.com



UserTesting.com



reflectorapp.com



airserver.com



ipsum-generator.com



CupCakeIpsum.com



JingProject.com



http://www.jingproject.com

http://www.jingproject.com

What can you apply from today?



Thank You

Nick Florosealworks interactive studios

[email protected]

twitter.com/NickFloro

Download the Presentation at:http://www.slideshare.net/nickfloro

Download Handout: goo.gl/UhRzEwDownload App Prototyping on Paper (POP)



http://www.slideshare.net/nickfloro

http://www.slideshare.net/nickfloro

prototyping : turning ideas into reality @ devlearn

Education