paul trani - wvnyc2012
DESCRIPTION
Things every designer should know about creating for devicesTRANSCRIPT
![Page 1: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/1.jpg)
Things Every Designer Should Know when Creating for Devices
Paul Trani, Adobe Evangelist @paultrani
Thursday, January 19, 12
![Page 2: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/2.jpg)
Paul Trani@paultrani [email protected]
• Adobe Evangelist• Lynda.com author• 15 years of agency/design experience• 4 year old at heart
Thursday, January 19, 12
![Page 3: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/3.jpg)
@PaulTrani
Designer or Developer?
Thursday, January 19, 12
![Page 4: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/4.jpg)
@PaulTrani
What do you need to know to design successfully for mobile?
designfundamentals user experience
user interface designsmartphone vs. tablets
iOS
AndroidWindows Phone
Sencha Touch
PhoneGap
jQuery Mobile
Thursday, January 19, 12
![Page 5: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/5.jpg)
@PaulTrani
Web Design
Thursday, January 19, 12
![Page 6: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/6.jpg)
@PaulTraniThursday, January 19, 12
![Page 7: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/7.jpg)
@PaulTrani
Maslow’s Hierarchy of Needs
Functionality
Self-Actualization
Self-Esteem
Love
Safety
Physiological
Thursday, January 19, 12
![Page 8: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/8.jpg)
@PaulTrani
Design Hierarchy of Needs
Creativity
Proficiency
Usability
Reliability
Functionality
Self-Actualization
Self-Esteem
Love
Safety
Physiological
Thursday, January 19, 12
![Page 9: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/9.jpg)
Functionality
Thursday, January 19, 12
![Page 10: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/10.jpg)
@PaulTrani
Smartphone Platform Market Share
0%
12.5%
25%
37.5%
50%
Google RIM Apple Microsoft5%28%17%46% 8%25%32%29%
Dec 2010 Oct 2011
Thursday, January 19, 12
![Page 11: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/11.jpg)
@PaulTrani
HTML 5
Offline / Storage
Realtime / Communication
File / Hardware Access
Semantics & Markup
Graphics / Multimedia
CSS3 Media Queries / Fonts / Transitions / Rounded Corners
http://mobilehtml5.orghttp://html5boilerplate.com
Thursday, January 19, 12
![Page 12: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/12.jpg)
@PaulTrani
Responsive Web Design
Thursday, January 19, 12
![Page 13: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/13.jpg)
@PaulTrani
jQuery
jQuery Plugins for responsive design:
• http://masonry.desandro.com http://alpha.patterntap.com
• http://responsejs.com
• http://fittextjs.com
Thursday, January 19, 12
![Page 14: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/14.jpg)
@PaulTrani
Web App vs. Native App
Thursday, January 19, 12
![Page 15: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/15.jpg)
@PaulTrani
Web Apps
HTML5}Strengths
• Easier to learn
• Reusability across platforms
• Larger development base
Weaknesses
• Poor device and OS integration
• Lower performance
• Doesn’t have platform look and feel
Thursday, January 19, 12
![Page 16: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/16.jpg)
@PaulTrani
• Embed a chromeless browser in a native app
• Create a “bridge” between the browser and the native code
• Package the web app with the native code and deploy
PhoneGap
Thursday, January 19, 12
![Page 17: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/17.jpg)
@PaulTrani
Check Box
Thursday, January 19, 12
![Page 18: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/18.jpg)
@PaulTrani
Combo Box
Thursday, January 19, 12
![Page 19: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/19.jpg)
@PaulTrani
Date Picker
Thursday, January 19, 12
![Page 20: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/20.jpg)
@PaulTrani
Tab Navigator
Thursday, January 19, 12
![Page 21: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/21.jpg)
@PaulTrani
Back Button ... ?
Thursday, January 19, 12
![Page 22: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/22.jpg)
@PaulTrani
Native Mobile Apps
Objective C
Java (Harmony)
Java J2ME
.NET
Strengths
• Great integration with OS and device
• Better performance
• Better user experience
• Supported by platform manufacturer
Weaknesses
• Platform dependent
• Multiple skill-set and tool requirement
• Higher TCO (true cost of ownership)
• More difficult learning curve
Thursday, January 19, 12
![Page 23: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/23.jpg)
@PaulTrani
Frameworks
!"#$%!"#$%&
Flash Pro/Builder
xui
Thursday, January 19, 12
![Page 24: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/24.jpg)
@PaulTrani
Appcelerator Titanium
Titanium supports all of the iPhone, iPad and Android UI, including table views, scroll views, native buttons, switches, tabs, popovers and more.
Thursday, January 19, 12
![Page 25: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/25.jpg)
Reliability(The User Experience)
Thursday, January 19, 12
![Page 26: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/26.jpg)
@PaulTrani
User Experience
“The way a person feels about using a product, system or service.”
Thursday, January 19, 12
![Page 27: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/27.jpg)
@PaulTraniThursday, January 19, 12
![Page 28: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/28.jpg)
@PaulTrani
Single Experiences
Single experiences influence the overall user experience
• Key click affects the experience of typing a text message
• Typing a message affects the experience of text messaging
•The experience of text messaging affects the overall user experience with the phone
Thursday, January 19, 12
![Page 29: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/29.jpg)
@PaulTrani
Outside Factors
• Pricing
• Friends' opinions (apps)
• Media reports
• Marketing
Thursday, January 19, 12
![Page 30: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/30.jpg)
@PaulTrani
Mobile Users Lean Towards Apps
Thursday, January 19, 12
![Page 31: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/31.jpg)
Usability
Thursday, January 19, 12
![Page 32: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/32.jpg)
@PaulTrani
Dinner or Takout?
Thursday, January 19, 12
![Page 33: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/33.jpg)
@PaulTrani
Look Inside!
Formats!
Add to Cart!
Selling?
More buying choices!
Recommendations!
Shipping info!
Other categories!
Kindle!
Kindle!
Kindle!
Wish list!
Dinner
Thursday, January 19, 12
![Page 34: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/34.jpg)
@PaulTrani
Takeout
Look Inside!
Add to Cart!
Wish list!
Thursday, January 19, 12
![Page 35: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/35.jpg)
@PaulTrani
Where is the website/app being used?
(Development)Thursday, January 19, 12
![Page 36: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/36.jpg)
@PaulTrani
Where is the website/app being used?
Thursday, January 19, 12
![Page 37: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/37.jpg)
@PaulTrani
Where is the website/app being used?
Thursday, January 19, 12
![Page 38: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/38.jpg)
@PaulTrani
Where is the website/app being used?
Thursday, January 19, 12
![Page 39: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/39.jpg)
@PaulTrani
Design for Real Hand Sizes
45x45px15x15px
Thursday, January 19, 12
![Page 40: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/40.jpg)
@PaulTrani
Hand Comes with a Finger
Thursday, January 19, 12
![Page 41: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/41.jpg)
@PaulTrani
How are they holding a phone?
Thursday, January 19, 12
![Page 42: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/42.jpg)
@PaulTrani
How are they holding a tablet?
Thursday, January 19, 12
![Page 43: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/43.jpg)
@PaulTrani
Phone Tablet
Tablet Layout Design
Thursday, January 19, 12
![Page 44: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/44.jpg)
@PaulTrani
Phone Tablet
Scale
Tablet Layout Design
Thursday, January 19, 12
![Page 45: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/45.jpg)
@PaulTrani
Phone Tablet
Tablet Layout Design
Thursday, January 19, 12
![Page 46: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/46.jpg)
@PaulTrani
Phone Tablet
Show/Hide
Tablet Layout Design
Thursday, January 19, 12
![Page 47: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/47.jpg)
@PaulTrani
Phone Tablet
Tablet Layout Design
Thursday, January 19, 12
![Page 48: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/48.jpg)
@PaulTrani
Phone Tablet
Split
Tablet Layout Design
Thursday, January 19, 12
![Page 49: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/49.jpg)
@PaulTrani
Phone Tablet
Tablet Layout Design
Thursday, January 19, 12
![Page 50: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/50.jpg)
@PaulTrani
Phone Tablet
Expand/Collapse
Tablet Layout Design
Thursday, January 19, 12
![Page 51: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/51.jpg)
Proficiency
Thursday, January 19, 12
![Page 52: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/52.jpg)
@PaulTrani
The user already understands some metaphors.
Thursday, January 19, 12
![Page 53: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/53.jpg)
@PaulTrani
Physical Metaphors
Thursday, January 19, 12
![Page 54: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/54.jpg)
@PaulTraniThursday, January 19, 12
![Page 55: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/55.jpg)
@PaulTraniThursday, January 19, 12
![Page 56: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/56.jpg)
@PaulTrani
Desktop Metaphors
Thursday, January 19, 12
![Page 57: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/57.jpg)
@PaulTrani
Desktop Metaphors
Thursday, January 19, 12
![Page 58: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/58.jpg)
@PaulTrani
Mobile Metaphors
Thursday, January 19, 12
![Page 59: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/59.jpg)
Creativity
Thursday, January 19, 12
![Page 60: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/60.jpg)
@PaulTrani
Attractive Things Work Better
Two ATMs, exact in function:
• One had the buttons arranged attractively.
• “Attractive” ATM was proven to be easier to use.
http://www.jnd.orgThursday, January 19, 12
![Page 61: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/61.jpg)
@PaulTrani
Leading the eye.
Thursday, January 19, 12
![Page 62: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/62.jpg)
@PaulTrani
Golden Ratio
&'(")*$$'+,#-(./0
Thursday, January 19, 12
![Page 63: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/63.jpg)
@PaulTrani
Golden Ratio
Thursday, January 19, 12
![Page 64: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/64.jpg)
@PaulTrani
Golden Ratio
Layout Design App
Thursday, January 19, 12
![Page 65: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/65.jpg)
@PaulTrani
Golden Ratio
Thursday, January 19, 12
![Page 66: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/66.jpg)
@PaulTrani
Which object is easier to look at?
Thursday, January 19, 12
![Page 67: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/67.jpg)
@PaulTrani
Sharp corners take focus outside the rectangle.
Thursday, January 19, 12
![Page 68: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/68.jpg)
@PaulTrani
Rounded corners take focus inside the rectangle.
Thursday, January 19, 12
![Page 69: Paul Trani - WVnyc2012](https://reader036.vdocument.in/reader036/viewer/2022062418/554bc690b4c90530298b55cb/html5/thumbnails/69.jpg)
@PaulTrani
Thank You!
@[email protected]• http://www.paultrani.com • http://www.designmeltdown.com• http://www.mobileawesomeness.com• http://www.thefwa.com
Thursday, January 19, 12