Punchcut's UI projects range from HVGA mobile devices with touchscreens to high-definition televisions with 5-way input. We are constantly addressing new screen sizes and evolving form factors. Over the years, a number of considerations and tools have enabled us to approach each device efficiently and thoughtfully.
Here are a few insights, and a set of tools we would like to share:
1. Every device is unique.
The device landscape is diverse, bordering on splintered. Screens vary in physical size and aspect ratio. Not even pixels are consistent. Their density — the size of pixels and space between them — varies greatly. Tools like the ones we are sharing can help streamline the effort of designing for new devices.
Of course, it is important to remember, this is a tool, and only a tool. It can only go so far. Good design mandates attention to detail. And getting the details right requires understanding not only of the aspect ratios of a device but of the device in its natural context: how it is held, how it responds to touch, whether it is handheld or fixed to a surface, and how it appears in different environments. Even if you are designing a responsive web site for mobile devices, you cannot expect to fully understand the design implications until you can see the site on the actual target device. Prototype early and often.
2. Build for a human scale.
When approaching a new screen, a designer cannot just scale elements to fit the device dimensions. It is vital to understand what the form factor dictates about how a device will be used in the real world. Pixel dimensions are only one measurement. A designer must factor in the pixel density of the screen to ensure touchable elements match human fingers and that type is readable.
3. Test your design on the target device.
You are of course designing on a desktop screen with its own native pixel density (72 or 96 dpi). The enclosed layered PSDs may make it tempting to think you can solve the design without having to put your comps on a device. Do not make that mistake. On the contrary, reviewing your design work on the target device is invaluable and you will quickly discover design flaws you would otherwise miss.
Our work demands we have elegant ways of presenting the resulting design concepts. To that end, we've developed a base of useful design tools that present visual concepts and facilitate the conversations that get the design moving. Here, we're sharing those tools with the goal of fostering a culture of good design, and expediting the process of getting quality UI work off the computer screen and into users' hands.
We hope this toolset lets you acclimate to new devices and resolutions quickly, and let you spend more time addressing the opportunities they present.
The ZIP File contains:
1. A collection of Photoshop® CS5 marquee-tool presets for common screen resolutions. These cover both fixed-screen resolution sizes and ratios for less common resolutions that fall within standard ratios.
2. A collection of layered Photoshop CS5 PSDs each providing common devices for comping and design presentations. These devices cover the standard ratios and device types (televisions, tablets, smartphones). The screen sizes are to scale to help put designs in accurate and realistic context.
3. A reference chart for resolutions and device landscape.
Updated 5 April, 2011 to Version 1.1 — Fixed an issue with the Blackberry Torch file, which was set to 100dpi. Removed extraneous clipping paths that were in several of the PSDs. (These can be safely ignored in the 1.0 release).