Paul Trani - WVnyc2012

  • 1,346 views
Uploaded on

Things every designer should know about creating for devices

Things every designer should know about creating for devices

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,346
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
15
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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