106
Prototyping: Turning Ideas Into Reality Nick Floro [email protected] @NickFloro

Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Embed Size (px)

DESCRIPTION

Prototyping is an increasingly important need in eLearning. In this session you will learn how to design new courses and apps to gather feedback before starting development; about paper prototyping to tools that help simplify sharing concepts and testing ideas; to create fully interactive previews for desktop and mobile delivery; and which tools you can use as soon as you get back to your office.

Citation preview

Page 1: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Prototyping: Turning Ideas Into RealityNick [email protected]@NickFloro

Page 2: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Resources

Page 3: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Experiment

experiment

Page 4: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14
Page 5: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Stakeholder

Page 6: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Project Manager

Page 7: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Designer

Page 8: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Developer

Page 9: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Architect

Page 10: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

idea

Plan & Prototype

Launch

Development

Map

Page 11: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14
Page 12: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Keep it Simple

Page 13: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

3 Key Factors1. Audience

2. Technology

3. User Stories

Page 14: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

3 Key Factors1. Audience

2. Technology

3. Use Stories Why?

Page 15: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Sketching where ideas begin

Page 16: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Sketch the

Concept

Page 17: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Visual Thinking

Page 18: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14
Page 19: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Mobile Apps

Page 20: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Adobe Ideas

Page 21: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Evernote Skitch

Page 22: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Paper by FiftyThree

Page 24: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Prototyping test driving your idea

Page 25: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Tools:

• Wireframes–Keynote / PowerPoint

Quick Prototyping Techniques

Page 26: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

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

Page 27: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

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.

Page 28: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

keynotekungfu.com

Page 29: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

keynotopia.com

Page 30: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Custom Template in Keynote

Page 31: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Adobe Acrobat

Page 32: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

InvisionApp.com

Page 33: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

POP - Prototyping on Paper

Page 34: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

POP - Prototyping on Paper

Page 35: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

POP - Prototyping on Paper

Page 36: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

POP - Prototyping on Paper

Page 37: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

POP - Prototyping on Paper

Page 39: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

balsamiq.com

Page 40: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Sketchy & iMockUps

Page 41: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Understand Your

Audience

Page 42: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14
Page 43: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14
Page 44: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

ReviewsDaily & Weekly Updates

Page 45: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Communication

Page 46: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

The Good The Ugly The Bad

Page 47: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

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.Task

The Good The Ugly The Bad

Page 48: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

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

Page 49: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

It’s Critical

Page 50: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

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 CriticalTa

sk

The Good The Ugly The Bad

Page 51: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

DiscussDiscuss, Prioritize and Get on the Same Page

Page 52: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14
Page 53: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Getting InspiredUI/UX

Page 54: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Flat Pages

Page 55: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Apple Weather

Page 56: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Yahoo Weather

Page 57: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Tab Bar

Page 58: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Apple Clock

Page 59: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Tree Structure

One

Two

Three

Four

Five

Six

Page 60: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Tree Structure

< Back

Screen One >

Screen Two >

Screen Three >

Screen Four >

Screen Five >

Screen Six >

Page 61: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

First Aid

Page 62: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Innovation

>

Page 63: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

evernote

Page 64: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

evernote

Page 65: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Pulse

Page 66: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Pulse

Page 67: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Zite

Page 68: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Zite

Page 71: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

How

Page 72: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14
Page 73: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14
Page 74: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Time

Page 75: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Budget

Page 76: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Ideas

Page 77: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Share

Page 78: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

GoogleDocs

Page 79: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

WordPress.comBuddyPress

Plug-ins

Knowledge Bank

Page 80: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Google Hangouts

Page 81: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

ResourcesTo help you grow.

Page 82: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

LaunchCycle.com

Page 83: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

aBookApart.com

Page 84: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

mural.ly

Page 85: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

mural.ly

Page 86: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

mural.ly

Page 87: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

BrowserStack.com

Page 89: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

zurb.com

Page 90: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

UserTesting.com

Page 91: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

kuler.adobe.com

Page 92: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Adobe Kuler kuler.adobe.com

Page 93: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

proto.io

Page 94: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

reflectorapp.com

Page 95: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

airserver.com

Page 96: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

ipsum-generator.com

Page 97: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

CupCakeIpsum.com

Page 98: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

storyboardthat.com

Page 100: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Capture & Analyze

Page 101: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Using CoverFlow view and Preview of Graphics

Page 102: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14
Page 103: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14
Page 104: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14
Page 105: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

What can you apply from today? 30 | 60 | 90

Page 106: Prototyping Your Learning from Idea to Interactive Visualization #DevLearn14

Thank You

Nick [email protected]/NickFloro

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