Paul Trani ptraniadobe.com www.paultrani.com paultrani,Mobile Design that Doesnt Suck,Adobe Flash Platform Evangelist Lynda.com and Layers Magazine author Adobe Certified Instructor Art school graduate,Live,Work,Love,Ride,Play,Paul Trani,Why Should I Care?,Dont 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,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,Case Study: Adidas,Because Ugly Doesnt Sell,Most Common Mobile Design Mistakes,1 of 5,Most Common Mobile Design Mistakes,No Mobile SiteNot Understanding the UserLack of ContextLack of Understanding Mobile TechnologyLack of Design Fundamentals,No Mobile Site,1 of 5,Dont Make Me Work,Create, Dont Convert,Not Understanding the User,2 of 5,Who are the users? Anyone who interacts with content on their phone. (What phones?)Men and women between 16-35.,The User,The User,Where are they? Design for all environments and account for screen glare.,Development,When will they interact? During idle periods of time. Design for 1 minute tasks. Make navigation shallow and easy.,The User,?,The User,?,?,How are they holding it? Design fro portrait and landscape.,The User,Why will they use your app? Valuable, appropriate content.,Content,Content,(But have a link to the full site),Lack of Context,3 of 5,Lack of Context,Proper Context,Neglecting Mobile Technology,4 of 5,Mobile Device Constraints,Processing power of a computer 8 years ago Screen 1/3 the size,=,Mobile Device Constraints,Optimization,Use bitmaps over vectorsAvoid, if possible:FiltersTransparencyBlend modesPerspective distortion,Additional Capabilities,Using Capabilities,Click for more info? Swipe for additional items? Pinch to zoom? GPS for nearby stores?,Lack of Proper Design,5 of 5,Elements of Successful Design,Use Existing Design Standards,Use Existing Design Standards,Leverage Real World Metaphors,The UKs Most Popular Handheld,Leverage Real World Metaphors,Elements of Successful Design,Its about leading the eye,Elements of Successful Design,Layout Grid, Golden Ratio, Space, Balance, Hierarchy, Direction,Typography Serif vs. Sans,Color Color Wheel, Color Choices, Meaning,Elements of Successful Design,Layout Grid, Golden Ratio, Space, Balance, Hierarchy, Direction,Typography Serif vs. Sans,Color Color Wheel, Color Choices, Meaning,GRID,Start with a,Grid Structure,Divide the page into a grid The eye naturally follows an “F” shape,One Column? Two?,PLACEMENT,44,Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.,Placement,Native Keyboard Placement,SIZE MATTERS,Make it large, then make it larger.,Size Matters,Mobilize, dont miniaturize Design for real hand sizes,“Miniaturizing treats the mobile environment and technology as a subset of the desktop environment.” Barbara Ballard,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,45x45px,15x15px,SPACE,Implies importance, elegance, and professionalism.,Space,Dont 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,Space,WalMart,Target,Elements of Successful Design,Layout Grid, Golden Ratio, Space, Balance, Hierarchy, Direction,Typography Serif vs. Sans,Color Color Wheel, Color Choices, Meaning,Choose a font that fits the subject Dont use more than three font-face Flash,“Typography has one plain duty before it and thats to convey information in writing.” Emil Ruder, Founder of Basel School of Design,Typography,San-serif lack Serifs and are considered modern Understand type anatomy Understand type measurements,Choosing a Font,ContrastSizeHierarchy,Focus on Clarity,Elements of Successful Design,Layout Grid, Golden Ratio, Space, Balance, Hierarchy, Direction,Typography Serif vs. Sans,Color Color Wheel, Color Choices, Meaning,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,Color,Choose colors using The Color Wheel Warm colors bring elements forward Cool colors move elements back Find contemporary colors using Kuler,Flash Player 10.1,Additional Capabilities,In the Browser,Beyond the Browser,planning,We want to sell you stuff you dont need.,Resources,www.adobetv.com www.bytearray.org http:/www.RIAgora.com http:/www.flashmobileblog.com http:/www.gotoandlearn.com,