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:
Design Considerations
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.
The expanding landscape of resolutions, aspect ratios and devices. (A PNG of
this and other reference images is included in the download below.)
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.
The Toolset
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.
Layered device PSDs included in this toolset (Version 1.0): Apple® iPhone® 4, Google® Nexus One, HP® Palm® Pre, RIM Blackberry® Torch™, Apple® iPad®, Motorola® Xoom™, and Sony® Bravia™.
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).
Tweet
350
Daniel Demmel Awesome stuff, thanks for releasing it! Just one boring question, couldn`t find any license for using it other than the generic (c) at the end of the article and text content (c) in the readme, so not sure what`s allowed to do with this? Only internal prototyping or derivative works repurposing the devices for presentations, etc?
4 April, 2011 - 02:48
missy_kelley via Twitter:
Finally, your all in one device design toolkit from @Punchcut http://pnch.it/9cIu4u
4 April, 2011 - 11:08
joepemberton Devices, screens, and aspect ratios can be dizzying. @Punchcut is sharing our toolset to the design community. Get it: http://pnch.it/9cIu4u
4 April, 2011 - 11:24
4JCreative via Twitter:
Thanks! RT @Punchcut Devices, screens, aspect ratios and bit depths are proliferating. We are sharing our set of tools. http://t.co/qJl6Mrj
4 April, 2011 - 11:25
alexred via Twitter:
Thanks for posting that @joepemberton: @Punchcut is sharing our toolset to the design community pnch.it/9cIu4u
4 April, 2011 - 11:25
dalerankine via Twitter:
RT @joepemberton: Devices, screens, and aspect ratios can be dizzying. @Punchcut is sharing our toolset to the design community. Get it: http://pnch.it/9cIu4u
4 April, 2011 - 11:32
andymac7 via Twitter:
RT @Hinman: Cool & generous of Punchcut to share these! RT @Punchcut: We're sharing our set of tools. Download it: http://pnch.it/9cIu4u
4 April, 2011 - 11:33
lonnychu via Twitter:
RT @joepemberton: Devices, screens, and aspect ratios can be dizzying. @Punchcut is sharing our toolset to the design community. Get it: http://pnch.it/9cIu4u
4 April, 2011 - 11:34
magdaZINE via Twitter:
RT @Hinman: Cool & generous of Punchcut to share these! RT @Punchcut: We're sharing our set of tools. http://pnch.it/9cIu4u #mobile
4 April, 2011 - 11:35
gretared via Twitter:
Mobile devices have an amazing array of aspect ratios and sizes. Try these @Punchcut tools to tame the complexity: http://t.co/6z6qFLG
4 April, 2011 - 11:35
childofcobra via Twitter:
RT @gretared: Mobile devices have an amazing array of aspect ratios and sizes. Try these @Punchcut tools to tame the complexity: http://t.co/6z6qFLG
4 April, 2011 - 11:35
hillla via Twitter:
@gretared @Punchcut Thank you for sharing, what a great and helpful resource!
4 April, 2011 - 11:36
hilla via Twitter:
RT @gretared: Mobile devices have an amazing array of aspect ratios and sizes. Try these @Punchcut tools to tame the complexity: http://t.co/6z6qFLG
4 April, 2011 - 11:36
udanium via Twitter:
RT @gretared: Mobile devices have an amazing array of aspect ratios and sizes. Try these @Punchcut tools to tame the complexity: http://t.co/6z6qFLG
4 April, 2011 - 11:38
timspeak via Twitter:
Pixel Proliferation: A Toolset For Managing Screen Resolutions | http://t.co/ivsZkZE via @Punchcut
4 April, 2011 - 11:39
mdenie via Twitter:
Pixel Proliferation: A Toolset For Managing Screen Resolutions | http://t.co/kVerloi (via @Punchcut)
4 April, 2011 - 11:40
jtowle via Twitter:
RT @joepemberton: Devices, screens, and aspect ratios can be dizzying. @Punchcut is sharing our toolset to the design community. Get it: http://pnch.it/9cIu4u
4 April, 2011 - 11:41
preciousforever via Twitter:
RT @Punchcut: Pixel Proliferation: A Toolset For Managing Screen Resolutions http://t.co/9T9bIvB #multiscreen
4 April, 2011 - 11:41
dbedingfield via Twitter:
RT @gretared: Mobile devices have an amazing array of aspect ratios and sizes. Try these @Punchcut tools to tame the complexity: http://t.co/6z6qFLG
4 April, 2011 - 11:42
qmarcos via Twitter:
RT @joepemberton: Devices, screens, and aspect ratios can be dizzying. @Punchcut is sharing our toolset to the design community. Get it: http://pnch.it/9cIu4u
4 April, 2011 - 11:44
odannyboy via Twitter:
From @Punchcut: Tools for Managing Screen Resolutions http://is.gd/A46AkB
4 April, 2011 - 11:45
raba121 via Twitter:
RT @odannyboy: From @punchcut: Tools for Managing Screen Resolutions http://is.gd/A46AkB
4 April, 2011 - 11:45
jpoeschl via Twitter:
RT @Punchcut: UI designers, check our new article and toolset: Pixel Proliferation: A Toolset For Managing Screen Resolutions http://t.co/9T9bIvB
4 April, 2011 - 11:46
ioon via Twitter:
RT @odannyboy: From @punchcut: Tools for Managing Screen Resolutions http://is.gd/A46AkB
4 April, 2011 - 11:47
simon_robertson via Twitter:
RT @Punchcut: UI designers, check our new article and toolset: Pixel Proliferation: A Toolset For Managing Screen Resolutions http://t.co/9T9bIvB
4 April, 2011 - 11:47
Breezetail via Twitter:
Mobile Is Not a Device, It’s a Lifestyle | http://t.co/k2iaXkq via @Punchcut
4 April, 2011 - 11:48
Joe Pemberton
Daniel, the device images are copyrighted by the respective companies. So take that into consideration when you use them.
The charts and graphs are copyright Punchcut and may be used commercially with attribution.
Enjoy.
4 April, 2011 - 11:53
davidhughan via Twitter:
Useful tool for managing screen resolutions #design http://ow.ly/4sivr (via @Punchcut)
4 April, 2011 - 12:16
darcynicolson via Twitter:
RT @davidhughan: Useful tool for managing screen resolutions #design http://ow.ly/4sivr (via @Punchcut)
4 April, 2011 - 12:17
millsustwo via Twitter:
Thanks our friends (who never speak to us) @Punchcut for these 'Toolsets for managing Screen Resolutions' http://bit.ly/ee7XvD
4 April, 2011 - 12:17
pinkpopsoda via Twitter:
RT @method_inc: Download set of tools for managing multiple devices, screens, aspect ratios and bit depths http://ow.ly/4sD7Z via @Punchcut
4 April, 2011 - 12:18
marcos_nahr via Twitter:
A Toolset For Managing Screen Resolutions | http://t.co/1gDtNhz ( via @Punchcut )
4 April, 2011 - 12:19
Open_Comms via Twitter:
Download a set of tools for managing multiple devices, screens, aspect ratios and bit depths http://ow.ly/4sD7Z (thanks @Punchcut)
4 April, 2011 - 12:19
r27 via Twitter:
RT @method_inc: Download set of tools managing multiple devices, screens, aspect ratios and bit depths http://ow.ly/4sD7Z (thanks @Punchcut)
4 April, 2011 - 12:20
paulmarkbailey via Twitter:
RT @method_inc Download a set of tools for managing multiple devices, screens, aspect ratios and bit depths http://ow.ly/4sD7Z via @Punchcut
4 April, 2011 - 12:20
1977Design via Twitter:
RT @method_inc Download a set of tools for managing multiple devices, screens, aspect ratios and bit depths http://ow.ly/4sD7Z via @Punchcut
4 April, 2011 - 12:21
ourdavetweets via Twitter:
Might be handy... RT @1977Design: Download a set of tools for managing multiple devices and screens http://ow.ly/4sD7Z via @Punchcut
4 April, 2011 - 12:21
igorcbrl via Twitter:
RT @method_inc:Download set of tools for managing multiple devices, screens, aspect ratios & bit depths http://ow.ly/4sD7Z (tks @Punchcut)
4 April, 2011 - 12:21
marcos_nahr via Twitter:
Design Considerations for Touch UI | http://vimeo.com/4206140 by @Punchcut
4 April, 2011 - 12:22
h4rrydog via Twitter:
RT @gretared: Mobile devices have an amazing array of aspect ratios and sizes. Try these @Punchcut tools to tame the complexity: http://t.co/6z6qFLG
4 April, 2011 - 12:26
FMC_Washington via Twitter:
A Free Toolset For Pixel Proliferation: I just came across a really useful resource published by Punchcut, a des... http://bit.ly/grAmUM
4 April, 2011 - 12:26
rgcoding via Twitter:
A Free Toolset For Pixel Proliferation: I just came across a really useful resource published by Punchcut, a des... http://bit.ly/f1rhq5
4 April, 2011 - 12:27
flashreseller via Twitter:
A Free Toolset For Pixel Proliferation I just came across a really useful resource published by Punchcut, a design tools http://tiny.ly/vxNm
4 April, 2011 - 12:27
PublicisModemUS via Twitter:
RT @Punchcut: UI designers, check our new article and toolset: Pixel Proliferation: A Toolset For Managing Screen Resolutions http://t.co/9T9bIvB
4 April, 2011 - 12:28
mdenie via Twitter:
Pixel Proliferation: A Toolset For Managing Screen Resolutions | http://t.co/kVerloi (via @punchcut)
4 April, 2011 - 12:28
cmlipe via Twitter:
RT @odannyboy: From @punchcut: Tools for Managing Screen Resolutions http://is.gd/A46AkB
4 April, 2011 - 12:29
yidea via Twitter:
RT @Punchcut: UI designers, check our new article and toolset: Pixel Proliferation: A Toolset For Managing Screen Resolutions http://t.co/9T9bIvB
4 April, 2011 - 12:30
lonnychu via Twitter:
RT @Punchcut: UI designers, check our new article and toolset: Pixel Proliferation: A Toolset For Managing Screen Resolutions http://t.co/9T9bIvB
4 April, 2011 - 12:30
msnow via Twitter:
RT @joepemberton: Devices, screens, and aspect ratios can be dizzying. @Punchcut is sharing our toolset to the design community. Get it: http://pnch.it/9cIu4u
4 April, 2011 - 12:31
nodeOne via Twitter:
RT @Punchcut: UI designers, check our new article and toolset: Pixel Proliferation: A Toolset For Managing Screen Resolutions http://t.co/9T9bIvB
4 April, 2011 - 12:31
Responses