Prototyping : Turning Ideas into Reality @ DevLearn

Prototyping: Turning Ideas Into RealityNick Floro Nick@sealworks.com @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

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!

2. Technology

3. User Stories

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.

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/

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.

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

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

< Back

Screen One >

Screen Two >

Screen Three >

Screen Four >

Screen Five >

Screen Six >

First Aid

Innovation

evernote

Budget

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

What can you apply from today?

Thank You

Nick Florosealworks interactive studios

nick@sealworks.comwww.sealworks.com

twitter.com/NickFloro

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

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

Prototyping : Turning Ideas into Reality @ DevLearn

Education

Learning Pool DevLearn - Adapt Learning Presentation

Future of Learning #astd #lrnchat #eldc2011 #devlearn

Developing Better PhoneGap Apps Session 608 / DevLearn 2013 Daniel Pfeiffer Lead Developer / Float Mobile Learning

Future of Learning Trends - Where Should I Focus Today #LSCON17 #DevLearn

DevLearn 2016: Busting the Myths Around Gamification

Lean prototyping: Prototyping for Lean Process

77 Tips on Todays Hottest Topics from Devlearn Thought ... articles/misc/77... · will be leading workshops on these topics at the DevLearn 2015 Conference & Expo. These experts explore

DevLearn ILS slides

DevLearn 2015 - Beyond Badges - Game Dynamics in Learning v1

Best of DevLearn 12 course samples

1 Lecture 16 Prototyping Software Engineering. 2 Outline Definitions Uses of prototyping in the design process Prototyping approaches Prototyping “technologies”

25+ mLearning Tools in 60 Minutes - DevLearn 2010

DevLearn 2016 Creative Cloud hands-on Pre-con

DevLearn 2016 designing effective Social Learning workshop v2

Content Strategy Across Connected Devices (DevLearn 2011)

User Interface Prototyping Techniques: Low Fidelity Prototyping

Prototyping center and its capabilities · 2019-10-05 · The Prototyping Center also offers practical courses for groups of students up to 15 people: ★ Machining (Turning, Milling)

#DevLearn 2011: some snaps

#DevLearn 2015 - 10 cool tools to support learning

Understanding HTML5 DevLearn