Upload
nick-floro
View
112
Download
6
Tags:
Embed Size (px)
DESCRIPTION
This session will provide you with the foundation you need to get started in mobile development. You'll learn best practices for designing for mobile and what challenges you may face in platforms, smartphones vs tablets vs next generation touch devices . We'll discuss and provide techniques for designing mobile apps that work, from sketching to wire framing to developing the final designs. What tools can I use to help visualize concepts and how to prototype quickly without breaking the bank. Learn about development tools and how using HTML5 and CSS3 can provide a solution for creating web based applications for mobile to desktops and optimizing for each platform.
Citation preview
Designing Learning formobile devices
Nick [email protected]/NickFloro
Designing for Mobile LSCON13
[email protected] 03/15/13 1 of 111
Designing for Mobile LSCON13
[email protected] 03/15/13 3 of 111
Designing for Mobile LSCON13
[email protected] 03/15/13 4 of 111
Designing for Mobile LSCON13
[email protected] 03/15/13 5 of 111
Designing for Mobile LSCON13
[email protected] 03/15/13 6 of 111
Designing for Mobile LSCON13
[email protected] 03/15/13 7 of 111
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?
Designing for Mobile LSCON13
[email protected] 03/15/13 12 of 111
AppApplication
Game / SimulationTool
Hybrid
Designing for Mobile LSCON13
[email protected] 03/15/13 13 of 111
AppApplication
Game / SimulationTool
Hybrid
WebInfoTool
Resources
Designing for Mobile LSCON13
[email protected] 03/15/13 14 of 111
AppApplication
Game / SimulationTool
Hybrid
WebInfoTool
Resources
Web App | Course
Designing for Mobile LSCON13
[email protected] 03/15/13 15 of 111
• network latency
• input mechanism
• form factor
Designing for Mobile LSCON13
[email protected] 03/15/13 18 of 111
• network latency
• input mechanism
• memory
• form factor
Designing for Mobile LSCON13
[email protected] 03/15/13 19 of 111
• network latency
• input mechanism
• memory
• form factor
• computational power
Designing for Mobile LSCON13
[email protected] 03/15/13 20 of 111
• network latency
• input mechanism
• memory
• form factor
• computational power
• battery
Designing for Mobile LSCON13
[email protected] 03/15/13 21 of 111
• network latency
• input mechanism
• memory
• form factor
• computational power
• context
• battery
Designing for Mobile LSCON13
[email protected] 03/15/13 22 of 111
Designing for Mobile LSCON13
[email protected] 03/15/13 24 of 111
Designing for Mobile LSCON13
[email protected] 03/15/13 25 of 111
The mobile environmentsingle early failure = non-returning user
Designing for Mobile LSCON13
[email protected] 03/15/13 27 of 111
The mobile environmentcrucial first 30-60 seconds usage
Designing for Mobile LSCON13
[email protected] 03/15/13 28 of 111
The mobile environmentFewer options
Designing for Mobile LSCON13
[email protected] 03/15/13 29 of 111
Graphics Location Storage Speed
Solving Developer Challenges
Designing for Mobile LSCON13
[email protected] 03/15/13 30 of 111
Designing for Mobile LSCON13
[email protected] 03/15/13 32 of 111
Designing for Mobile LSCON13
[email protected] 03/15/13 33 of 111
Designing for Mobile LSCON13
[email protected] 03/15/13 34 of 111
Designing for Mobile LSCON13
[email protected] 03/15/13 35 of 111
Designing for Mobile LSCON13
[email protected] 03/15/13 36 of 111
Designing for Mobile LSCON13
[email protected] 03/15/13 37 of 111
Designing for Mobile LSCON13
[email protected] 03/15/13 38 of 111
Selecting a SizePixels & Aspect Ratio
iPhone 4960 x 640
iPhone480 x 320
iPhone 51136 x 640
Designing for Mobile LSCON13
[email protected] 03/15/13 39 of 111
Android Xoom1280 x 720
Selecting a SizePixels & Aspect Ratio
iPad 3rd gen +2048 x 1536
iPad1024 x 768
Designing for Mobile LSCON13
[email protected] 03/15/13 40 of 111
Designing for Mobile LSCON13
[email protected] 03/15/13 41 of 111
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
Designing for Mobile LSCON13
[email protected] 03/15/13 42 of 111
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
Designing for Mobile LSCON13
[email protected] 03/15/13 43 of 111
HTML 5CSS3
AJAXJAVASCRIPT
JQuery
APIs
Designing for Mobile LSCON13
[email protected] 03/15/13 46 of 111
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?
Designing for Mobile LSCON13
[email protected] 03/15/13 47 of 111
ClientsTimeframes
DevelopmentCommunication
Designing for Mobile LSCON13
[email protected] 03/15/13 53 of 111
It’s about communication and problem solving.
Designing for Mobile LSCON13
[email protected] 03/15/13 56 of 111
Designing for Mobile LSCON13
[email protected] 03/15/13 61 of 111
Designing for Mobile LSCON13
[email protected] 03/15/13 62 of 111
Designing for Mobile LSCON13
[email protected] 03/15/13 67 of 111
Designing for Mobile LSCON13
[email protected] 03/15/13 69 of 111
Tree Structure
< Back
Screen One >
Screen Two >
Screen Three >
Screen Four >
Screen Five >
Screen Six >
Designing for Mobile LSCON13
[email protected] 03/15/13 71 of 111
Tools:
• Sketches
Quick Prototyping Techniques
Designing for Mobile LSCON13
[email protected] 03/15/13 75 of 111
Designing for Mobile LSCON13
[email protected] 03/15/13 76 of 111
Designing for Mobile LSCON13
[email protected] 03/15/13 77 of 111
Designing for Mobile LSCON13
[email protected] 03/15/13 78 of 111
Tools:
• Wireframes– Powerpoint / Keynote
Quick Prototyping Techniques
Designing for Mobile LSCON13
[email protected] 03/15/13 79 of 111
teehanlax.com/blog/2010/06/14/iphone-gui-psd-v4/
Designing for Mobile LSCON13
[email protected] 03/15/13 84 of 111
When was the last time you sketched a interface, a idea to help illustrate your idea?If in the last week, get yourself a cookie. If not, you have until Friday to sketch something.
Designing for Mobile LSCON13
[email protected] 03/15/13 85 of 111
ExerciseDesigning for Mobile LSCON13
[email protected] 03/15/13 86 of 111
Designing for Mobile LSCON13
[email protected] 03/15/13 87 of 111
Designing for Mobile LSCON13
[email protected] 03/15/13 88 of 111
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
Designing for Mobile LSCON13
[email protected] 03/15/13 91 of 111
Test for Usability
• Have someone with fresh
eyes test drive your site to
make sure it accomplishes
both user goals and site
goals
• Survey
Designing for Mobile LSCON13
[email protected] 03/15/13 92 of 111
Designing for Mobile LSCON13
[email protected] 03/15/13 95 of 111
Designing for Mobile LSCON13
[email protected] 03/15/13 96 of 111
Using CoverFlow view and Preview of Graphics
Designing for Mobile LSCON13
[email protected] 03/15/13 98 of 111
Screencasts 101 Mini-Session
www.jingproject.com
Designing for Mobile LSCON13
[email protected] 03/15/13 104 of 111
Designing for Mobile LSCON13
[email protected] 03/15/13 105 of 111
Download the Presentation at:http://www.slideshare.net/nickfloro
Designing for Mobile LSCON13
[email protected] 03/15/13 110 of 111
Thank You
Nick [email protected]/NickFloro
Download the Presentation at:http://www.slideshare.net/nickfloro
Designing for Mobile LSCON13
[email protected] 03/15/13 111 of 111