Paul Trani - WVnyc2012
Upcoming SlideShare
Loading in...5
×
 

Paul Trani - WVnyc2012

on

  • 1,491 views

Things every designer should know about creating for devices

Things every designer should know about creating for devices

Statistics

Views

Total Views
1,491
Views on SlideShare
1,491
Embed Views
0

Actions

Likes
1
Downloads
13
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Paul Trani - WVnyc2012 Paul Trani - WVnyc2012 Presentation Transcript

    • Things Every Designer Should Know when Creating for Devices Paul Trani, Adobe Evangelist @paultraniThursday, January 19, 12
    • 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
    • Designer or Developer? @PaulTraniThursday, January 19, 12
    • 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
    • Web Design @PaulTraniThursday, January 19, 12
    • @PaulTraniThursday, January 19, 12
    • Maslow’s Hierarchy of Needs Self- Actualization Self-Esteem Love Safety Physiological @PaulTraniThursday, January 19, 12
    • Design Hierarchy of Needs Self- Creativity Actualization Self-Esteem Proficiency Love Usability Safety Reliability Physiological Functionality @PaulTraniThursday, January 19, 12
    • FunctionalityThursday, January 19, 12
    • 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
    • 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
    • Responsive Web Design @PaulTraniThursday, January 19, 12
    • jQuery jQuery Plugins for responsive design: • http://masonry.desandro.com http://alpha.patterntap.com • http://responsejs.com • http://fittextjs.com @PaulTraniThursday, January 19, 12
    • Web App vs. Native App @PaulTraniThursday, January 19, 12
    • 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
    • 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
    • Check Box @PaulTraniThursday, January 19, 12
    • Combo Box @PaulTraniThursday, January 19, 12
    • Date Picker @PaulTraniThursday, January 19, 12
    • Tab Navigator @PaulTraniThursday, January 19, 12
    • Back Button ... ? @PaulTraniThursday, January 19, 12
    • 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
    • Frameworks !"#$%& !"#$% Flash Pro/Builder xui @PaulTraniThursday, January 19, 12
    • 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
    • Reliability (The User Experience)Thursday, January 19, 12
    • User Experience “The way a person feels about using a product, system or service.” @PaulTraniThursday, January 19, 12
    • @PaulTraniThursday, January 19, 12
    • 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
    • Outside Factors • Pricing • Friends opinions (apps) • Media reports • Marketing @PaulTraniThursday, January 19, 12
    • Mobile Users Lean Towards Apps @PaulTraniThursday, January 19, 12
    • UsabilityThursday, January 19, 12
    • Dinner or Takout? @PaulTraniThursday, January 19, 12
    • 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
    • Takeout Look Inside! Add to Cart! Wish list! @PaulTraniThursday, January 19, 12
    • Where is the website/app being used? (Development) @PaulTraniThursday, January 19, 12
    • Where is the website/app being used? @PaulTraniThursday, January 19, 12
    • Where is the website/app being used? @PaulTraniThursday, January 19, 12
    • Where is the website/app being used? @PaulTraniThursday, January 19, 12
    • Design for Real Hand Sizes 15x15px 45x45px @PaulTraniThursday, January 19, 12
    • Hand Comes with a Finger @PaulTraniThursday, January 19, 12
    • How are they holding a phone? @PaulTraniThursday, January 19, 12
    • How are they holding a tablet? @PaulTraniThursday, January 19, 12
    • Tablet Layout Design Phone Tablet @PaulTraniThursday, January 19, 12
    • Tablet Layout Design Scale Phone Tablet @PaulTraniThursday, January 19, 12
    • Tablet Layout Design Phone Tablet @PaulTraniThursday, January 19, 12
    • Tablet Layout Design Show/Hide Phone Tablet @PaulTraniThursday, January 19, 12
    • Tablet Layout Design Phone Tablet @PaulTraniThursday, January 19, 12
    • Tablet Layout Design Split Phone Tablet @PaulTraniThursday, January 19, 12
    • Tablet Layout Design Phone Tablet @PaulTraniThursday, January 19, 12
    • Tablet Layout Design Expand/Collapse Phone Tablet @PaulTraniThursday, January 19, 12
    • ProficiencyThursday, January 19, 12
    • The user already understands some metaphors. @PaulTraniThursday, January 19, 12
    • Physical Metaphors @PaulTraniThursday, January 19, 12
    • @PaulTraniThursday, January 19, 12
    • @PaulTraniThursday, January 19, 12
    • Desktop Metaphors @PaulTraniThursday, January 19, 12
    • Desktop Metaphors @PaulTraniThursday, January 19, 12
    • Mobile Metaphors @PaulTraniThursday, January 19, 12
    • CreativityThursday, January 19, 12
    • 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
    • Leading the eye. @PaulTraniThursday, January 19, 12
    • Golden Ratio &(")*$$+,#-(./0 @PaulTraniThursday, January 19, 12
    • Golden Ratio @PaulTraniThursday, January 19, 12
    • Golden Ratio Layout Design App @PaulTraniThursday, January 19, 12
    • Golden Ratio @PaulTraniThursday, January 19, 12
    • Which object is easier to look at? @PaulTraniThursday, January 19, 12
    • Sharp corners take focus outside the rectangle. @PaulTraniThursday, January 19, 12
    • Rounded corners take focus inside the rectangle. @PaulTraniThursday, January 19, 12
    • 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