visualizing & prototyping mobile design

Designing Learning for

mobile devices

Nick FloroNick@sealworks.com

Twitter.com/NickFloro

Linda Danielslinda.dnls@gmail.com

Twitter.com/ldaniels_design

Understanding the Technology

desktop

desktop

phone

desktop

tabletphone

desktop

tablet

phone

desktoptabletphone

Think Mobile First

7 Questions to Define a 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?

App or Web Delivery

Google Chrome 31% Yes

Mozilla Firefox 20% Yes

Internet Explorer 7-8 11% No

Internet Explorer 9-10 10% Yes

Apple Safari 15% Yes

iPhone / iPad 4% Yes

Google Android 2% Yes

Other 4% No

Market Share HTML5 Support

Browser Stats 2013

Web AppServer

Game / SimulationTool

Hybrid

InfoTool

Resources

Web App Native 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?

Enterprise Deployment

DEVICE ACCESS

PERFORMANCE & INTEGRATION

MULTIMEDIA

OFFLINE & STORAGECONNECTIVITY SEMANTICS

CSS3

3D, GRAPHICS & EFFECTS

• form factor

Mobile Factors

• network latency

• form factor

Mobile Factors

• network latency

• input mechanism

• form factor

Mobile Factors

• network latency

• input mechanism

• memory

• form factor

Mobile Factors

• network latency

• input mechanism

• memory

• form factor

• computational power

Mobile Factors

• network latency

• input mechanism

• memory

• form factor

• computational power

• battery

Mobile Factors

• network latency

• input mechanism

• memory

• form factor

• computational power

• context

• battery

Mobile Factors

?Does everything need to be mobile?

Is that the most important thing?

AmazonA Quick Look

The mobile environmentsingle early failure = non-returning user

The mobile environmentcrucial first 30-60 seconds usage

The mobile environmentFewer options

Graphics Location Storage Speed

Solving Developer Challenges

?What does this mean to me?

Why should I care?

Examples

?What do I really need to know?

How do I begin?

How should we

Design?

Before You Design Anything

• Know your audiencePersonas... really know them

• Know what they wantContent... which precedes design

• Know what you wantObjective.... friendship, goodwill, cash...to start a revolution?

Form Follows FunctionThe 3 F’s of Design

• FunctionHow it works

• FormWhat something looks like

Images Trump Words

Danger: Electric Shock

Focus on the

Audience

1

is the key

Content

2

Transparent

Interface

3

Designing Apps

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

?Do I need to know ALL of this?

Who can I work with?

Prototyping test driving your idea

Flat Pages

Tab Bar

Tree Structure

One

Two

Three

Four

Five

Six

Tree Structure

< Back

Screen One >

Screen Two >

Screen Three >

Screen Four >

Screen Five >

Screen Six >

Innovation

>

weathercube

?Is prototyping really necessary?

Can anyone do it?

Design for Flexibility

Testing

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

− Portrait vs Landscape

Testing Code

Test for Usability

• Have someone with fresh eyes test drive your site to make sure it accomplishes both user goals and site goals

• Survey

Capture & Analyze

Using CoverFlow view and Preview of Graphics

?My project is different, are all these

steps relevant to me?

ResourcesTo help you grow.

kuler.adobe.com

abookapart.com

www.smashingmagazine.com

Nancy Durate Garr Reynolds

Screencasts 101 Mini-Session

www.jingproject.com

html5rocks.com

www.uxmag.com

www.twitter.com

www.lrnchat.com

evernote.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/

?How can any ONE person keep up

with all this information?

Don’t Settle

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

www.launchcycle.com

Thank You

Nick Floronick@sealworks.comtwitter.com/NickFloro

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

Linda Danielslinda.dnls@gmail.com

Twitter.com/ldaniels_design