Mobile Design That Doesn’t Suck - Paul Trani at FITC Mobile
Posted on Sep 23, 2010
My background is as a developer; not just a developer but a back-end developer. If there is any group of people who generally suck at design, it is back-end developers and I am no exception. This is probably why I found the presentation by my colleague at Adobe, Paul Trani, so enlightening. Paul is a great presenter and I definitelyI left the presentation feeling as though my future designs would suck less (notice, I didn’t say they wouldn’t suck...it’s good to have realistic expectations). Here are my notes and thoughts from his session (you can also grab his slides online).
One of the things Paul emphasized about mobile and device development that can be different from desktop and web development is the need to account for the wide variety of screen sizes and resolutions that exist across the array of devices. So, for example, he recommends you use liquid layouts so that your application can look good across devices. However, the other issue is that not all devices support the same features, so be sure that you check whether the device has multi-touch, camera, accelerometer and other feature support before trying to use it and allow your application to degrade gracefully should support be missing.
Next Paul discussed how to leverage existing design standards and real world metaphors in mobile application design. He recommended the site Pattern Tap for explaining existing design standards. For example, he covered how you want to lead the eye. Existing design standards do this by using a grid pattern which is hard to replicate on mobile due to the smaller screen size, so Paul recommended a grid with fewer columns or even 1 column. He also introduced the “golden ratio for great layouts” for which he designed an AIR application.
Another element of a successful design to consider that can be different on mobile is placement. Paul showed how common ways we might lay out elements for the desktop or web may not always accommodate the use of a finger that can easily block content. Another item is the keyboard which can pop up and overlay content.Therefore its even more important to place important information on the top of the page. Keeping the finger in mind for button elements is also important to ensure they are usable. Paul recommends a minimum of 45 x 45 pixels for any button.
The rules of typography seemed to be more or less the same for mobile as for other design. Paul said not to use more than 3 font types and to err on the side of sans-serif as it is more modern. Also, he reminded us to drop the font-size on elements in all caps to avoid a sense that the text is yelling. He suggested researching type anatomy.
The final area of discussion was color. Paul said that color is used to emphasize importance not to decorate; it establishes a hierarchy. He showed a very cool color wheel application that unfortunately I cannot find online (or from the link on his presentation) but he also recommended tools like Kuler. He said a good choice is togo with complimentary colors or split compliment. Keep intensity in mind when choosing your colors and try to stick with shades of the same intensity. Paul also said to be conscious of the amount of color you use.
Finally, of course, Paul recommended using Device Central with Photoshop CS5 for making sure your designs work on various devices.
Comments
There are currently no comments for this entry...be the first!