Upload
paultrani
View
108
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Creating mobile content presents some interesting challenges for the designer and developer alike. From screen size, button size, typeface, and layout decisions to using unique mobile capabilities such as the accelerometer, gestures and geolocation. In this presentation, I provide clear solutions to these questions and show how they can be easily executed.
Citation preview
©2010 Adobe Systems Incorporated. All Rights Reserved.
Paul Trani [email protected] www.paultrani.com @paultrani
Mobile Design that Doesn’t Suck
©2010 Adobe Systems Incorporated. All Rights Reserved.
• Adobe Flash Platform Evangelist• Lynda.com and Layers Magazine author• Adobe Certified Instructor• Art school graduate
Live
Work
Love
Ride
Play
Paul Trani
©2010 Adobe Systems Incorporated. All Rights Reserved.
Why Should I Care?
©2010 Adobe Systems Incorporated. All Rights Reserved.
Don’t Get Caught…
“Mobile Internet Usage Will be a Boon to Consumers and Some Companies Will Likely Win Big While Many Will Wonder What Just Happened.” Barbera Ballard, author Designing Mobile User Experience
©2010 Adobe Systems Incorporated. All Rights Reserved.
Mobile Usage
• U.S. Mobile Web Usage Grew 110% Last Year• Bigger than desktop browsing in 5 years• http://www.quantcast.com/docs/display/info/Mobile+Report
©2010 Adobe Systems Incorporated. All Rights Reserved.
Case Study: Adidas
©2010 Adobe Systems Incorporated. All Rights Reserved.
Because Ugly Doesn’t Sell
©2010 Adobe Systems Incorporated. All Rights Reserved.
Most Common Mobile Design Mistakes
1 of5
©2010 Adobe Systems Incorporated. All Rights Reserved.
Most Common Mobile Design Mistakes
1. No Mobile Site
2. Not Understanding the User
3. Lack of Context
4. Lack of Understanding Mobile Technology
5. Lack of Design Fundamentals
©2010 Adobe Systems Incorporated. All Rights Reserved.
No Mobile Site1 of5
©2010 Adobe Systems Incorporated. All Rights Reserved.
Don’t Make Me Work
©2010 Adobe Systems Incorporated. All Rights Reserved.
Create, Don’t Convert
©2010 Adobe Systems Incorporated. All Rights Reserved.
Not Understanding the User
2 of5
©2010 Adobe Systems Incorporated. All Rights Reserved.
Who are the users?Anyone who interacts with content on their phone. (What phones?)
Men and women between 16-35.
The User
©2010 Adobe Systems Incorporated. All Rights Reserved.
The User
Where are they?Design for all environments and account for screen glare.
Development Inside Outside(partly cloudy)
Outside(sunny)
©2010 Adobe Systems Incorporated. All Rights Reserved.
When will they interact?• During idle periods of time.• Design for 1 minute tasks.• Make navigation shallow and easy.
The User
©2010 Adobe Systems Incorporated. All Rights Reserved.
?
The User
??
How are they holding it?Design fro portrait and landscape.
©2010 Adobe Systems Incorporated. All Rights Reserved.
The User
Why will they use your app?Valuable, appropriate content.
©2010 Adobe Systems Incorporated. All Rights Reserved.
Content
©2010 Adobe Systems Incorporated. All Rights Reserved.
Content
(But have a link to the full site)
©2010 Adobe Systems Incorporated. All Rights Reserved.
Lack of Context3 of5
©2010 Adobe Systems Incorporated. All Rights Reserved.
Lack of Context
©2010 Adobe Systems Incorporated. All Rights Reserved.
Proper Context
©2010 Adobe Systems Incorporated. All Rights Reserved.
Neglecting Mobile Technology
4 of5
©2010 Adobe Systems Incorporated. All Rights Reserved.
Mobile Device Constraints
• Processing power of a computer 8 years ago• Screen 1/3 the size
=
©2010 Adobe Systems Incorporated. All Rights Reserved.
Mobile Device Constraints
©2010 Adobe Systems Incorporated. All Rights Reserved.
Optimization
Use bitmaps over vectors Avoid, if possible: Filters Transparency Blend modes Perspective distortion
©2010 Adobe Systems Incorporated. All Rights Reserved.
Additional Capabilities
Mulitouch Accelerometer
Orientation Microphone Keyboard Geolocation
Camera GPS
©2010 Adobe Systems Incorporated. All Rights Reserved.
Using Capabilities
Click for more info?Swipe for additional items?Pinch to zoom?GPS for nearby stores?
©2010 Adobe Systems Incorporated. All Rights Reserved.
Lack of Proper Design5 of5
©2010 Adobe Systems Incorporated. All Rights Reserved.
©2010 Adobe Systems Incorporated. All Rights Reserved.
Elements of Successful Design
©2010 Adobe Systems Incorporated. All Rights Reserved.
Use Existing Design Standards
©2010 Adobe Systems Incorporated. All Rights Reserved.
Use Existing Design Standards
©2010 Adobe Systems Incorporated. All Rights Reserved.
Leverage Real World Metaphors
The UK’s Most Popular Handheld
©2010 Adobe Systems Incorporated. All Rights Reserved.
Leverage Real World Metaphors
©2010 Adobe Systems Incorporated. All Rights Reserved.
Elements of Successful Design
It’s about leading the eye
©2010 Adobe Systems Incorporated. All Rights Reserved.
Elements of Successful Design
LayoutGrid, Golden Ratio, Space, Balance, Hierarchy, Direction
TypographySerif vs. Sans
ColorColor Wheel, Color Choices, Meaning
©2010 Adobe Systems Incorporated. All Rights Reserved.
Elements of Successful Design
LayoutGrid, Golden Ratio, Space, Balance, Hierarchy, Direction
TypographySerif vs. Sans
ColorColor Wheel, Color Choices, Meaning
©2010 Adobe Systems Incorporated. All Rights Reserved.
GRIDStart with a
©2010 Adobe Systems Incorporated. All Rights Reserved.
Grid Structure
■ Divide the page into a grid■ The eye naturally follows an “F” shape
©2010 Adobe Systems Incorporated. All Rights Reserved.
One Column? Two?
©2010 Adobe Systems Incorporated. All Rights Reserved.
PLACEMENT
©2010 Adobe Systems Incorporated. All Rights Reserved. 44
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
Placement
©2010 Adobe Systems Incorporated. All Rights Reserved.
Native Keyboard Placement
©2010 Adobe Systems Incorporated. All Rights Reserved.
SIZE MATTERSMake it large, then make it larger.
©2010 Adobe Systems Incorporated. All Rights Reserved.
Size Matters
■Mobilize, don’t miniaturize■Design for real hand sizes
“Miniaturizing treats the mobile environment and technology as a subset of the desktop environment.”
Barbara Ballard
©2010 Adobe Systems Incorporated. All Rights Reserved.
Design for Real Hand Sizes
■ The average fingertip is 3x larger than the hand cursor
■ Make your buttons 3x larger■ Then make them even larger
45x45px15x15px
©2010 Adobe Systems Incorporated. All Rights Reserved.
SPACE
Implies importance, elegance, and professionalism.
©2010 Adobe Systems Incorporated. All Rights Reserved.
Space
■ Don’t try to be great, try to be invisible
“Perfection is achieved not when there is nothing left to add, but when there is nothing left to take away”
Antoine de Saint-Exupery
©2010 Adobe Systems Incorporated. All Rights Reserved.
Space
WalMart Target
©2010 Adobe Systems Incorporated. All Rights Reserved.
©2010 Adobe Systems Incorporated. All Rights Reserved.
©2010 Adobe Systems Incorporated. All Rights Reserved.
Elements of Successful Design
LayoutGrid, Golden Ratio, Space, Balance, Hierarchy, Direction
TypographySerif vs. Sans
ColorColor Wheel, Color Choices, Meaning
©2010 Adobe Systems Incorporated. All Rights Reserved.
■ Choose a font that fits the subject■ Don’t use more than three■ @font-face■ Flash
“Typography has one plain duty before it and that’s to convey information in writing.”
Emil Ruder, Founder of Basel School of Design
Typography
©2010 Adobe Systems Incorporated. All Rights Reserved.
■ San-serif lack Serifs and are considered modern■ Understand type anatomy ■ Understand type measurements
Choosing a Font
©2010 Adobe Systems Incorporated. All Rights Reserved.
Contrast
Size
Hierarchy
Focus on Clarity
©2010 Adobe Systems Incorporated. All Rights Reserved.
©2010 Adobe Systems Incorporated. All Rights Reserved.
Elements of Successful Design
LayoutGrid, Golden Ratio, Space, Balance, Hierarchy, Direction
TypographySerif vs. Sans
ColorColor Wheel, Color Choices, Meaning
©2010 Adobe Systems Incorporated. All Rights Reserved.
■ Use color to create hierarchy, dominance, and balance■ Consistent use of a few colors makes a more cohesive design
“Use color to emphasize importance, not decorate a page.” Alexander White
Color
©2010 Adobe Systems Incorporated. All Rights Reserved.
Color
■ Choose colors using The Color Wheel ■ Warm colors bring elements forward■ Cool colors move elements back ■ Find contemporary colors using Kuler
©2010 Adobe Systems Incorporated. All Rights Reserved.
©2010 Adobe Systems Incorporated. All Rights Reserved.
Flash Player 10.1
©2010 Adobe Systems Incorporated. All Rights Reserved.
Additional Capabilities
Mulitouch Accelerometer
Orientation Microphone
Keyboard Geolocation
Camera GPS
4 4 4 4 4
4 4 4 4 4 4 4 4
In the Browser
Beyond the Browser
©2010 Adobe Systems Incorporated. All Rights Reserved.
planning
We want to sell you stuff you don’t need.
©2010 Adobe Systems Incorporated. All Rights Reserved.
©2010 Adobe Systems Incorporated. All Rights Reserved.
Resources
■www.adobetv.com ■www.bytearray.org ■http://www.RIAgora.com■http://www.flashmobileblog.com ■http://www.gotoandlearn.com