Prototyping Mobile Learning 051413b

Prototyping ideas formobile devices

Nick FloroNick@sealworks.comTwitter.com/NickFloro

Linda Danielslinda.dnls@gmail.comTwitter.com/ldaniels_design

Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning

Nick@sealworks.com | Linda.dnls@gmail.com 05/14/13 1 of 64

Whose your audience?Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning

What devices do you support?Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning

desktop tablet

Designing Mobile First

Web App

What tools are you using?Designing Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning

iOS AndroidWindowsBlackberry

Design. Code. Innovate.

Mozilla OS

Responsive DesignDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning

Design

Flat Pages

Tab Bar

Tree Structure

< Back

Screen One >

Screen Two >

Screen Three >

Screen Four >

Screen Five >

Screen Six >

Innovation

Sketching

Just Sketch It!

1.Think for 30 seconds - Doodle sketch a concept for your mobile project.

ExerciseDesigning Learning for Mobile Devices ASTD PHL Conference #ASTD #Mobile #eLearning

? I am not sure what device to choose,how do I begin?

YES!(a mobile project)

Audience

AudienceTimeframes

AudienceTimeframes Prototype

AudienceTimeframes PrototypeDevelop

? How is planning for mobile differentthan planning for my other projects?

Sketching where real ideas begin

Encourage your team to be creative.

Selecting a SizePixels & Aspect Ratio

iPhone 4960 x 640

iPhone480 x 320

iPhone 51136 x 640

Android Xoom1280 x 720Galaxy SIII

1280 x 720

Droid960 x 540

Kindle Fire 71024 x 600

Galaxy Note 21280 x 720

Android Xoom1280 x 720

HTC Incredible800 x 480

iPad1024 x 768

iPhone 4960 x 640

iPhone480 x 320

Droid854 x 480

? Are sketches professional enoughto present ideas?

1. Two minutes - Sketch a Menu / Screen 1 and then Internal Screen

2. Show & Tell

Exercise

✓ Who’s the audience?✓ How will they use it?

Prototyping test driving your idea

Wireframes Tools:– Pencil / Paper– Powerpoint / Keynote– Balsamiq / Omnigraffle– Illustrator / InDesign– Many more!– Use what you are

comfortable with

Quick Prototyping Techniques

Paper by FiftyThree

Adobe Acrobat

POP - Prototyping on Paper

Briefs

Custom Template in Keynote

keynotekungfu.com

balsamiq.com

Sketchy & iMockUps

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

? Is prototyping really necessary?Can anyone do it?

What’s next...

ResourcesTo help you grow.

960.gs

Capture & Analyze

abookapart.com

solidify.com

reflectorapp.com

Expand your Career Opportunities Take some time to explore these resources to find out what is new in our creative industry for 2013. Expand your technical skills in this ever-changing technology landscape to keep your work and portfolio fresh! The list to the right offers insights and tutorials on various segments in our niche industry for print and digital spaces. Open this interactive PDF in Acrobat or Acrobat Reader, click on any resource link and enjoy!

We’ve got some pretty fun stuff happening all over the web. Join us on LinkedIn, Twitter and Facebook for the latest in events, jobs, contests and more!

Typography Typophile Fontshop The Type Studio Veer Dafont

Graphics/Video/Audio iStockphoto VectorStock Shutterstock Revostock Stockfuel

Adobe CS4 & 5 Adobe TV Layers Magazine Photoshop Support Mashable lynda.com

Front-End Development A List Apart W3schools CSS Zen Garden HTML5 Sites lynda.com

E-learning Articulate Captivate Lectora e-Learning Guild lynda.com

Content Management WordPress Joomla Drupal Blog Tips lynda.com

Video Vimeo PCWorld VideoToolbox Mashable lynda.com

This work is licensed underhttp://creativecommons.org/licenses/by-nc-nd/3.0/

2013 Resources GuideIndustry insight for our creative, design, interactive, development, marketing, writing, and e-learning professionals.

Download this 2013 Resource Guide to keep your work on the cutting edge www.thebossgroup.com/Job-Seekers/

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

Thank You

Nick Floronick@sealworks.comtwitter.com/NickFloro

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

Prototyping Mobile Learning 051413b

Technology

Mobile Prototyping Essentials Workshop - Part One

Mobile Prototyping

Mobile Prototyping Essentials Workshop: Part 1

Functional Prototyping For Mobile Apps

Mobile Prototyping Essentials - Part II

Mobile Prototyping Tool CHIKUWA

Mobile Prototyping with Axure RP 6.5

Prototyping Mobile Applications with Spring

Bochmann | Ritz · Bochmann | Ritz Prototyping Tools for Mobile Applications Sandra Bochmann | Thomas Ritz Prototyping Tools for Mobile Applications Mobile Applications became a hype

Code Blast 2012 - Fast Mobile Prototyping

Mobile prototyping kaziak - Codemotion Rome 2015

Prototyping Learning - NESTA

Rapid Prototyping in Mobile – From Paper to Digital

Mobile Design and Prototyping

Visualizing & Prototyping Mobile Design

Mobile python rapid prototyping of applications on the mobile platform (2007)

Ogdc 2013 prototyping mobile games

Mobile Prototyping Essentials Workshop: Part 2

Mobile app prototyping for coastal hazards response

iStuff Mobile: Rapidly Prototyping New Mobile …iStuff Mobile: Rapidly Prototyping New Mobile Phone Interfaces for Ubiquitous Computing Rafael Ballagas, Faraz Memon, Ren´e Reiners,