124
Designing Learning for mobile devices [email protected] Twitter.com/NickFloro

Designing Learning for Mobile Devices @ Training2013

Embed Size (px)

DESCRIPTION

This session will provide you with the foundation you need to get started in mobile development from smartphones to tablets. We'll look at the major environments for delivery, what you need to know about asset and graphic design, whether to create a app or a web app. This session will focus on the Android, iOS and Windows environments. - Prototyping and Designing for Mobile & Desktop. - Challenges of Development. - Understanding your Audience. Development Tools. - Apps vs Web Apps. - Defining Project & Timelines. - 5 Ways to Improve Development and - Reduce Challenges. - Resources - links & download to get you playing and started right away.

Citation preview

Page 1: Designing Learning for Mobile Devices @ Training2013

Designing Learning formobile devices

[email protected]/NickFloro

Page 2: Designing Learning for Mobile Devices @ Training2013

DesignPrototypingWireframing

Brainstorming

HTML5Tools

Web vs Apps

Q&A

Page 3: Designing Learning for Mobile Devices @ Training2013

Understanding the

Technology

Page 4: Designing Learning for Mobile Devices @ Training2013
Page 5: Designing Learning for Mobile Devices @ Training2013
Page 6: Designing Learning for Mobile Devices @ Training2013
Page 7: Designing Learning for Mobile Devices @ Training2013
Page 8: Designing Learning for Mobile Devices @ Training2013
Page 9: Designing Learning for Mobile Devices @ Training2013

desktop

Page 10: Designing Learning for Mobile Devices @ Training2013

desktop

phone

Page 11: Designing Learning for Mobile Devices @ Training2013

desktop

tabletphone

Page 12: Designing Learning for Mobile Devices @ Training2013

desktop

tablet

phone

Page 13: Designing Learning for Mobile Devices @ Training2013

7 Questions to Define the Project

What is the goal?

What are the learning objectives?

Who is the audience and how will they use it?

What is the timetable?

Current technology or solution in place?

What is the budget?

Does the content exist?

Page 14: Designing Learning for Mobile Devices @ Training2013

AppApplication

Game / SimulationTool

Hybrid

InfoWebTool

Resources

Web App | Course

Page 15: Designing Learning for Mobile Devices @ Training2013

• network latency• input mechanism• memory

• form factor

• computational power

• context• battery

Page 16: Designing Learning for Mobile Devices @ Training2013
Page 17: Designing Learning for Mobile Devices @ Training2013
Page 18: Designing Learning for Mobile Devices @ Training2013

The mobile environmentsingle early failure = non-returning user

Page 19: Designing Learning for Mobile Devices @ Training2013

The mobile environmentcrucial first 30-60 seconds usage

Page 20: Designing Learning for Mobile Devices @ Training2013

The mobile environmentFewer options

Page 21: Designing Learning for Mobile Devices @ Training2013

The Web Platform is Accelerating

Page 22: Designing Learning for Mobile Devices @ Training2013

Graphics Location Storage Speed

Solving Developer Challenges

Page 23: Designing Learning for Mobile Devices @ Training2013

Sample Simulation with HTML 5

Page 24: Designing Learning for Mobile Devices @ Training2013
Page 25: Designing Learning for Mobile Devices @ Training2013
Page 26: Designing Learning for Mobile Devices @ Training2013
Page 27: Designing Learning for Mobile Devices @ Training2013
Page 28: Designing Learning for Mobile Devices @ Training2013
Page 29: Designing Learning for Mobile Devices @ Training2013
Page 30: Designing Learning for Mobile Devices @ Training2013
Page 31: Designing Learning for Mobile Devices @ Training2013

Selecting a SizePixels & Aspect Ratio

iPhone 4960 x 640

iPhone480 x 320

iPhone 51136 x 640

Page 32: Designing Learning for Mobile Devices @ Training2013

Android Xoom1280 x 720

Selecting a SizePixels & Aspect Ratio

iPad 3rd gen +2048 x 1536

iPad1024 x 768

Page 33: Designing Learning for Mobile Devices @ Training2013
Page 34: Designing Learning for Mobile Devices @ Training2013

Android Xoom1280 x 720Galaxy SIII

1280 x 720

Selecting a SizePixels & Aspect Ratio

Droid960 x 540

Kindle Fire 71024 x 600

Galaxy Note 21280 x 720

Page 35: Designing Learning for Mobile Devices @ Training2013

Android Xoom1280 x 720

HTC Incredible800 x 480

Selecting a SizePixels & Aspect Ratio

iPad1024 x 768

iPhone 4960 x 640

iPhone480 x 320

Galaxy1280 x 720

Page 36: Designing Learning for Mobile Devices @ Training2013

Web App

Page 37: Designing Learning for Mobile Devices @ Training2013

AppWeb

Page 38: Designing Learning for Mobile Devices @ Training2013

HTML 5CSS3

AJAXJAVASCRIPT

JQuery

APIs

Page 39: Designing Learning for Mobile Devices @ Training2013

Web App App

• Use web standards

• Easy to deploy & update

• Support all devices

• Faster development cycle

• Works everywhere

• Requires web connection

• Faster performance

• Unique platform features

• Requires programming

• Deploy via Store models

• iOS / Android / Amazon

Which is right for your project?

Page 40: Designing Learning for Mobile Devices @ Training2013

Examples

Page 41: Designing Learning for Mobile Devices @ Training2013

Project Management

Page 42: Designing Learning for Mobile Devices @ Training2013

Project Management

Page 43: Designing Learning for Mobile Devices @ Training2013

Clients

Page 44: Designing Learning for Mobile Devices @ Training2013

ClientsTimeframes

Page 45: Designing Learning for Mobile Devices @ Training2013

ClientsTimeframes

Development

Page 46: Designing Learning for Mobile Devices @ Training2013

ClientsTimeframes

DevelopmentCommunication

Page 47: Designing Learning for Mobile Devices @ Training2013

Define

Design

Develop

Deliver

Process

Page 48: Designing Learning for Mobile Devices @ Training2013

Determining a PlanWhat’s Next

Strategy Team Skills Work FlowTools Challenges

Page 49: Designing Learning for Mobile Devices @ Training2013

Determining a PlanWhat’s Next

Strategy

Problem / Solution

Audience

Technology

What do you want to deliver

Timeframe

Budget

Page 50: Designing Learning for Mobile Devices @ Training2013

Determining a PlanWhat’s Next

Team Skills

Project Management

Define

Design / UI / UX

Reviews

Develop

Test

Page 51: Designing Learning for Mobile Devices @ Training2013

Determining a PlanWhat’s Next

Tools

Web App - HTML5, Javascript, Server, Database

HTML5 / PhoneGap (Azura)

Game Salad, Corona

Apple xCode / Google

Page 52: Designing Learning for Mobile Devices @ Training2013

Determining a PlanWhat’s Next

Define Design Develop Test Refine Launch

Page 53: Designing Learning for Mobile Devices @ Training2013
Page 54: Designing Learning for Mobile Devices @ Training2013

How do we handle?Projects

Current Content New Projects

Page 55: Designing Learning for Mobile Devices @ Training2013

How should we

Design?

Page 56: Designing Learning for Mobile Devices @ Training2013

Understand Design

Page 57: Designing Learning for Mobile Devices @ Training2013

It’s about communication and problem solving.

Page 58: Designing Learning for Mobile Devices @ Training2013

Design is how it works.

Page 59: Designing Learning for Mobile Devices @ Training2013

It’s about communication and problem solving.

Page 60: Designing Learning for Mobile Devices @ Training2013

Focus on the

Audience1

Page 61: Designing Learning for Mobile Devices @ Training2013

is the keyContent

2

Page 62: Designing Learning for Mobile Devices @ Training2013

Transparent

Interface3

Page 63: Designing Learning for Mobile Devices @ Training2013
Page 64: Designing Learning for Mobile Devices @ Training2013

Content Flowchart

Page 66: Designing Learning for Mobile Devices @ Training2013

Prototyping

Prototyping

Page 67: Designing Learning for Mobile Devices @ Training2013

Tools:

• Sketches

Quick Prototyping Techniques

Page 68: Designing Learning for Mobile Devices @ Training2013

Quick Prototyping Techniques

Tools:

• Fujitsu SCANSNAP – Scan direct to pdf– includes full Acrobat Pro

Page 69: Designing Learning for Mobile Devices @ Training2013
Page 70: Designing Learning for Mobile Devices @ Training2013
Page 71: Designing Learning for Mobile Devices @ Training2013
Page 72: Designing Learning for Mobile Devices @ Training2013
Page 73: Designing Learning for Mobile Devices @ Training2013

Capture & Analyze

Page 74: Designing Learning for Mobile Devices @ Training2013

Using CoverFlow view and Preview of Graphics

Page 75: Designing Learning for Mobile Devices @ Training2013
Page 76: Designing Learning for Mobile Devices @ Training2013

Tools:

• Wireframes– Powerpoint / Keynote

Quick Prototyping Techniques

Page 77: Designing Learning for Mobile Devices @ Training2013
Page 78: Designing Learning for Mobile Devices @ Training2013

Custom Template in Keynote

Page 79: Designing Learning for Mobile Devices @ Training2013

keynotekungfu.com

Page 80: Designing Learning for Mobile Devices @ Training2013

goo.gl/lKnU9

Page 81: Designing Learning for Mobile Devices @ Training2013

balsamiq.com

Page 82: Designing Learning for Mobile Devices @ Training2013

Sketchy & iMockUps

Page 84: Designing Learning for Mobile Devices @ Training2013

Exercise

Page 85: Designing Learning for Mobile Devices @ Training2013

Wireframes

Using Acrobat Pro for Prototypes

Page 86: Designing Learning for Mobile Devices @ Training2013
Page 87: Designing Learning for Mobile Devices @ Training2013
Page 88: Designing Learning for Mobile Devices @ Training2013

Design for Flexibility

Page 89: Designing Learning for Mobile Devices @ Training2013

Testing

Page 90: Designing Learning for Mobile Devices @ Training2013

Test on Windows 8, 7, Vista, XP• Internet Explorer 6, 7, 8, 9

• Firefox 4.0, 10-13 +

• Chrome 15 - 19 +

Test on OS X− Safari 4, 5+

− Firefox 4.0, 10-13 +

− Chrome 15 - 19 +

Test on Mobile− iOS 4.x - 6.x

− Android 2.x - 4.x

− Windows 8

− Tablet vs Phone

Testing Code

Page 91: Designing Learning for Mobile Devices @ Training2013

Test for Usability

• Have someone with fresh

eyes test drive your site to

make sure it accomplishes

both user goals and site

goals

• Survey

Page 92: Designing Learning for Mobile Devices @ Training2013

BrowserStack.com

Page 93: Designing Learning for Mobile Devices @ Training2013

BrowserStack.com

Page 94: Designing Learning for Mobile Devices @ Training2013

Resources

Page 95: Designing Learning for Mobile Devices @ Training2013

Play | Watch | Experiment

Page 96: Designing Learning for Mobile Devices @ Training2013
Page 97: Designing Learning for Mobile Devices @ Training2013

kuler.adobe.com

Page 100: Designing Learning for Mobile Devices @ Training2013
Page 101: Designing Learning for Mobile Devices @ Training2013
Page 102: Designing Learning for Mobile Devices @ Training2013
Page 103: Designing Learning for Mobile Devices @ Training2013
Page 104: Designing Learning for Mobile Devices @ Training2013

howconference.com

Page 105: Designing Learning for Mobile Devices @ Training2013

CSS3 for Web DesignersDan Cederholm | A Book Apart

Page 106: Designing Learning for Mobile Devices @ Training2013

www.manager-tools.com

Page 107: Designing Learning for Mobile Devices @ Training2013

Podcasts

Page 109: Designing Learning for Mobile Devices @ Training2013

www.istockphoto.com

Page 110: Designing Learning for Mobile Devices @ Training2013

www.smashingmagazine.com

Page 111: Designing Learning for Mobile Devices @ Training2013

Nancy Durate Garr Reynolds

Page 112: Designing Learning for Mobile Devices @ Training2013

www.presentationzen.com

Page 113: Designing Learning for Mobile Devices @ Training2013

www.balsamiq.com

Page 114: Designing Learning for Mobile Devices @ Training2013

www.silverback.com

Page 115: Designing Learning for Mobile Devices @ Training2013

Screencasts 101 Mini-Session

www.jingproject.com

Page 116: Designing Learning for Mobile Devices @ Training2013

solidify.com

Page 117: Designing Learning for Mobile Devices @ Training2013

ideapaint.com

Page 118: Designing Learning for Mobile Devices @ Training2013

evernote.com

Page 119: Designing Learning for Mobile Devices @ Training2013
Page 120: Designing Learning for Mobile Devices @ Training2013

www.twitter.com

Page 122: Designing Learning for Mobile Devices @ Training2013

Don’t Settle

Page 123: Designing Learning for Mobile Devices @ Training2013

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

Page 124: Designing Learning for Mobile Devices @ Training2013

Thank You

Nick [email protected]/NickFloro

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