Download - Designing Mobile Learning

DesigningMobile Learning Design & Strategy

Nick [email protected]/NickFloro

mLearnCon Nick Floro sealworks.com

Designing Mobile Learning 06/24/14 1 of 105

Learning & Training

deliver everywhere

replace

compliment



desktoptabletphone

Content StrategymLearnCon Nick Floro sealworks.com


Content StrategymLearnCon Nick Floro sealworks.com


Adaptive A unique version for each device type.

desktoptabletphone

Requires maintenance on each version.



desktoptabletphone

Think Mobile FirstmLearnCon Nick Floro sealworks.com


desktoptabletphone

Think Mobile First

Progressive Enhancement



Things to consider

Browser Support

Content

Current technology or solution in place?

TimePerformance



Specifications



Selecting a SizePixels & Aspect Ratio

iPhone 4960 x 640

iPhone480 x 320

iPhone 51136 x 640



Android Xoom1280 x 720

HTC Incredible800 x 480


iPad1024 x 768

iPhone 4960 x 640iPhone

480 x 320

iPhone 51136-by-640

Galaxy1280 x 720

Galaxy S41920 x1080



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


iPad 3rd gen +2048 x 1536

iPad1024 x 768



Classifying Apps



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



Responsive Design



getskeleton.com



http://getskeleton.com




twitter.github.io/bootstrap/



http://twitter.github.io/bootstrap/




Focus on the

Audience



Sketching where ideas begin



Visual Thinking



Adobe IdeasEvernote Skitch



Prototyping test driving your idea



Tools:

• Wireframes– Powerpoint / Keynote

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.







simplify everything



keynotekungfu.com



Custom Template in Keynote



Adobe Acrobat



Adobe Acrobat Pro | Building Prototypes with PDF Links



POP - Prototyping on Paper



balsamiq.com



Sketchy & iMockUps



www.teehanlax.com/tools/



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




User Interface | UI



User Experience | UX



AmazonA Quick Example



Amazon Windowshop



Design for Flexibility



Challenges



TestingmLearnCon Nick Floro sealworks.com


Test on Mobile− iOS 4.x - 6.x− Android 2.x - 4.x− Amazon Fire− Windows 8− Tablet vs Phablet vs Phone− Portrait vs Landscape

Test on Windows 8, 7, Vista, XP- Internet Explorer 6, 7, 8, 9, 10- Firefox 25 +- Chrome 25 +

Test on OS X− Safari 4, 5+− Firefox 25 +− Chrome 25 +

Testing CodemLearnCon Nick Floro sealworks.com


What’s next...



ResourcesTo help you grow.



w3schools.com



LearnToProgram.tv



RESPONSIVE WEB DESIGNby ETHAN

MARCOTTE



kuler.adobe.com



Adobe Kuler kuler.adobe.com



reflectorapp.com



How it works.For Homework: www.apple.com/designed-by-apple/



http://www.apple.com/designed-by-apple/




Thank You

Nick [email protected]/NickFloro

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

