launching a mobile app from concept to launch

Post on 06-May-2015

1.535 Views

Category:

Technology

3 Downloads

Preview:

Click to see full reader

DESCRIPTION

This session will break down the key ingredients that will make your mobile app a learning success. You’ll learn design fundamentals from user interface to user experience and how to get a best-in-class app. You learn several ways to prototype apps prior to programming—from paper to interactive—and learn the techniques and tools that you can use to test your app prior to programming. We’ll also look at the key types of apps and provide you with dozens of ideas to get you started and to apply when you back to your office.

TRANSCRIPT

Nick FloroNick@sealworks.comTwitter.com/NickFloro

HTML

Launching a Mobile AppConcept to Launch

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 1 of 123

How do you define mobile?

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 2 of 123

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 3 of 123

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 4 of 123

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 5 of 123

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 6 of 123

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 7 of 123

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 8 of 123

What technology will you support?

a. smartphoneb. tabletc. laptopd.all of the above

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 9 of 123

Mobile devices everywhere

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 10 of 123

138.5million smartphones in US

58% of phone market

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 11 of 123

4.5 billionsmartphones by 2018

60% on LTE

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 12 of 123

70 billion apps in 2013

Smartphones 58 billion and 14 billion to tablets

estimated

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 13 of 123

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 14 of 123

Define

Design

Develop

Deliver

ProcessMobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 15 of 123

Focus on the

Audience

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 16 of 123

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 17 of 123

Content StrategyMobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 18 of 123

desktoptabletphone

Content StrategyMobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 19 of 123

Create a Road Map

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 20 of 123

desktoptabletphone

Think Mobile FirstMobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 21 of 123

desktoptabletphone

Think Mobile FirstMobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 22 of 123

desktoptabletphone

Think Mobile First

Progressive Enhancement

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 23 of 123

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 24 of 123

What is Design?Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 25 of 123

How it works.

Homework: Watch www.apple.com/designed-by-apple/

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 26 of 123

It’s about communication and problem solving.

Homework: Watch www.apple.com/designed-by-apple/

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 27 of 123

Content is Key

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 28 of 123

Content Strategy

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 29 of 123

Sketching where ideas begin

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 30 of 123

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 31 of 123

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 32 of 123

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 33 of 123

Visual Thinking

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 34 of 123

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 35 of 123

Quick Prototyping Techniques

Tools:

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

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 36 of 123

Prototyping test driving your idea

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 37 of 123

Paper by FiftyThree

Adobe IdeasEvernote Skitch

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 38 of 123

Tools:

• Wireframes– Keynote / PowerPoint

Quick Prototyping Techniques

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 39 of 123

keynotekungfu.com

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 40 of 123

Custom Template in Keynote

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 41 of 123

Adobe Acrobat

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 42 of 123

Adobe Acrobat Pro | Building Prototypes with PDF Links

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 43 of 123

balsamiq.com

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 44 of 123

Sketchy & iMockUps

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 45 of 123

User Interface | UI

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 47 of 123

User Interface | UI

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 48 of 123

User Experience | UX

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 49 of 123

Development: App or Web Delivery

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 50 of 123

Native App

• Faster performance

• Unique platform features

• Requires programming

• iOS / Android / Amazon

• Increased Costs per OS

AppWeb App

• Use web standards

• Easy to deploy & update

• Support all devices

• Faster development cycle

• Works everywhere

• Requires web connection

Web

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 51 of 123

How will you distribute?Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 52 of 123

How will you distribute?

App Store

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 53 of 123

How will you distribute?

App Store Deployment

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 54 of 123

How will you distribute?

App Store Deployment Web

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 55 of 123

How will you distribute?

App Store Deployment Web

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 56 of 123

How will you distribute?

App Store Deployment

Data Analytics / Reporting

Web

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 57 of 123

How will you distribute?

App Store Deployment

Data Analytics / Reporting

Web

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 58 of 123

How will you distribute?

App Store Deployment

Data Analytics / Reporting

Updates

Web

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 59 of 123

WebApp

HTML Javascript CSS API’s

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 60 of 123

DEVICE ACCESS

PERFORMANCE & INTEGRATION

MULTIMEDIA

OFFLINE & STORAGECONNECTIVITY SEMANTICS

CSS3

3D, GRAPHICS & EFFECTS

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 61 of 123

html5demos.com

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 62 of 123

html5demos.com

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 63 of 123

html5demos.com

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 64 of 123

html5demos.com

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 65 of 123

Chrome

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 66 of 123

Create and deliver everywhere.Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 67 of 123

Responsive DesignMobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 68 of 123

getskeleton.com

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 69 of 123

twitter.github.io/bootstrap/

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 70 of 123

• bandwidth• input mechanism• context

• form factor

Mobile Factors

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 71 of 123

Technology is a tool.

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 72 of 123

Tools for Development

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 73 of 123

Adobe Creative Cloud

‣ Cloud Based Subscription

‣ Subscription Options‣ Single App $19.99 per month‣ Upgrade $29 per month‣ New $49 per month

‣ www.adobe.com

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 74 of 123

Adobe Captivate 7

‣ $899 Purchase

‣ 1 Year 19.99 per month

‣ 29.99 month to month

‣ www.adobe.com/products/captivate.html

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 75 of 123

TechSmith Camtasia Studio

‣ $299

‣ http://www.techsmith.com/snagit.html

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 76 of 123

Articulate Storyline

‣ $1,398 Purchase

‣ Platinum Plan Optional Add-On‣ 1 Year $559‣ 2 Year $979‣ 3 Yar $1,328

‣ www.articulate.com

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 77 of 123

PhoneGap.com

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 78 of 123

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 79 of 123

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 80 of 123

Flow chartAPI’sMobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 81 of 123

Flow chartAPI’smotion camera gps sensors

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 82 of 123

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 83 of 123

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 84 of 123

// the geolocation api brings browser based location to your apps

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 85 of 123

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 86 of 123

You are entering research. Learn More>>

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 87 of 123

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 88 of 123

Example

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 89 of 123

Star WalkMobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 90 of 123

Star WalkMobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 91 of 123

Getting InspiredUI/UX

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 92 of 123

Flat Pages

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 93 of 123

Apple Weather

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 94 of 123

Yahoo Weather

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 95 of 123

Tab Bar

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 96 of 123

Apple Clock

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 97 of 123

Tree Structure

One

Two

Three

Four

Five

Six

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 98 of 123

Tree Structure

< Back

Screen One >

Screen Two >

Screen Three >

Screen Four >

Screen Five >

Screen Six >

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 99 of 123

First Aid

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 100 of 123

Innovation

>

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 101 of 123

evernote

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 102 of 123

evernote

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 103 of 123

Pulse

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 104 of 123

Zite

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 105 of 123

Zite

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 106 of 123

Design for Flexibility

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 107 of 123

TestingMobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 108 of 123

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

− Android 2.x - 4.x

− 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 15-21 +

- Chrome 15 - 19 +

Test on OS X− Safari 4, 5+

− Firefox 15-21 +

− Chrome 20 - 26 +

Testing CodeMobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 109 of 123

Capture & Analyze

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 111 of 123

Using CoverFlow view and Preview of Graphics

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 112 of 123

what’s next...

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 113 of 123

ResourcesTo help you grow.

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 114 of 123

w3schools.com

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 115 of 123

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 116 of 123

www.uxmag.com

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 117 of 123

typekit.com

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 118 of 123

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 119 of 123

reflectorapp.com

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 120 of 123

airserver.com

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 121 of 123

abookapart.com

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 122 of 123

Thank You

Nick Floronick@sealworks.comtwitter.com/NickFloro

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

Mobile - Concept to Launch Nick Floro

Learning Solutions 2014 | eLearning Guild 03/21/14 123 of 123

top related