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
@FixThisPhoto via Twitter:
Punchcut Provide Free Photoshop Design Tools for Device Interface Design http://bit.ly/fCBiCA
6 April, 2011 - 11:02
@MammothAdams via Twitter:
Punchcut Provide Free Photoshop Design Tools for Device Interface Design: The toolset includes Photoshop marquee... http://bit.ly/fWWteT
6 April, 2011 - 11:06
the mob lab via Friendfeed:
Best Practices for Mobile Design | Punchcut - http://punchcut.com/perspec...
6 April, 2011 - 11:13
fyeahgreg via Pinboard
Toolkit for Mobile UI design
6 April, 2011 - 11:19
buymeasoda via Pinboard
A Toolset For Managing Screen Resolutions
6 April, 2011 - 11:20
derekpunsalan via Pinboard
Change is a constant. The device landscape for which we design is always changing and the device types are always proliferating. And with the increasing demand for unique mid-screen devices, it is becoming an even more arduous task to keep things straight. So we have packaged up a set of tools to help us stay current and we are offering them for download.
6 April, 2011 - 11:21
michfern via Pinboard
Change is a constant. The device landscape for which we design is always changing and the device types are always proliferating. And with the increasing demand for unique mid-screen devices, it is becoming an even more arduous task to keep things straight. So we have packaged up a set of tools to help us stay current and we are offering them for download.
6 April, 2011 - 11:22
benish via Pinboard
"A Toolset For Managing Screen Resolutions"
6 April, 2011 - 11:22
arainert via Pinboard
Great resource from Punchcut for designing for multiple mobile devices.
6 April, 2011 - 11:22
benferguson via Pinboard
From @punchcut: Tools for Managing Screen Resolutions
6 April, 2011 - 11:23
nodeone via Pinboard
UI designers, check our new article and toolset: Pixel Proliferation: A Toolset For Managing Screen Resolutions
6 April, 2011 - 11:23
baskwalla via Pinboard
Devices, screens, aspect ratios and bit depths are proliferating. So we are sharing our set of tools. Download it:
6 April, 2011 - 11:24
MammothAdams via Twitter:
Punchcut Provide Free Photoshop Design Tools for Device Interface Design: The toolset includes Photoshop marquee... http://bit.ly/fWWteT
6 April, 2011 - 11:24
verplaydesign via Twitter:
Punchcut Provide Free Photoshop Design Tools for Device Interface Design http://ow.ly/1c3Ws9
6 April, 2011 - 11:25
@graphicscom via Twitter:
News: Punchcut Provide Free Photoshop Design Tools for Device Interface Design: The toolset in... http://bit.ly/dV7GYL #graphics #design
6 April, 2011 - 11:25
@maartento via Twitter:
Pixel Proliferation: A Toolset For Managing Screen Resolutions | http://t.co/DiLgdwZ via @punchcut
6 April, 2011 - 11:26
@glossyprint via Twitter:
Punchcut Provide Free Photoshop Design Tools for Device Interface Design: The toolset includes Photoshop marquee... http://bit.ly/idiu7u
6 April, 2011 - 11:26
@EOC_aaron via Twitter:
Punchcut Provide Free Photoshop Design Tools for Device Interface Design: The toolset includes Photoshop marquee... http://bit.ly/erqldh
6 April, 2011 - 11:27
Max Well done guys! Already one of my favs! Keep up the good work. Greetings from Berlin!
7 April, 2011 - 02:44
Ken Whitaker Thanks for the device templates, but as for the Photoshop Preset, it would be helpful to know what version of Photoshop it works with. Evidently not CS4. So I can only assume it works with CS5. I would bet there are a lot of folks who would use this who are still using CS 4. Also, it would have been helpful if the paths found in some of the PSD files actually served some sort of function with the art. Clipping paths for the screens would have been great. Otherwise they should have been deleted before being offered via a CommArts Daily newsletter. Thanks for trying!
7 April, 2011 - 14:19
Joe Pemberton
Ken, thank you for the note. Version 1.1 removes the extraneous clipping paths, which can safely be ignored if you're still using files from v1.0.
The layers in v1.0 and v1.1 are prepared in such a way that you will not need clipping paths. Natch.
7 April, 2011 - 15:59
Per Sandström Great stuff! Maybe you could use a specific tag for upcoming posts/updates on this so I can get a RSS feed and don't miss out on anything?
7 April, 2011 - 23:48
Photoshop templates for presenting mobile UI - Small Surface [...] Punchcut just published a collection of Photoshop templates for wrapping around device UI. [...]
11 April, 2011 - 11:23
Hunter Pryor (Pixel Proliferation: A Toolset For Managing Sc [...] Pixel Proliferation: A Toolset For Managing Screen Resolutions | Punchcut [...]
11 April, 2011 - 11:27
@PhotoshopStudio via Twitter:
Punchcut Provide Free Photoshop Design Tools for Device Interface Design http://sns.mx/C5cCy7
11 April, 2011 - 11:34
@on_vous_aime via Twitter:
RT @PhotoshopStudio: Punchcut Provide Free Photoshop Design Tools for Device Interface Design http://sns.mx/C5cCy7
11 April, 2011 - 11:35
@PhotoLatest via Twitter:
Punchcut Provide Free Photoshop Design Tools for Device Interface Design (Graphics.com) http://bit.ly/eRrA27
11 April, 2011 - 12:16
@photoshop4newbs via Twitter:
Punchcut Provide Free Photoshop Design Tools for Device Interface Design http://bit.ly/etb6qb #fb
11 April, 2011 - 12:17
@delicious50 via Twitter:
Pixel Proliferation: A Toolset For Managing Screen Resolutions | Punchcut http://bit.ly/fgFrwF
11 April, 2011 - 12:17
@eyedesyn via Twitter:
Pixel Proliferation: A Toolset For Managing Screen Resolutions | http://t.co/VdcbXuc <- Nice guides for creating designs 4 different devices
11 April, 2011 - 12:18
@ofisia via Twitter:
Pixel Proliferation: A Toolset For Managing Screen Resolutions | Punchcut http://fb.me/TKQYX2z0
11 April, 2011 - 12:19
@uniknotions via Twitter:
[uniknotions.com] Pixel Proliferation: A Toolset For Managing Screen Resolutions | Punchcut: Change is a constan... http://bit.ly/hWtPNf
11 April, 2011 - 12:19
@wackliche via Twitter:
[uniknotions.com] Pixel Proliferation: A Toolset For Managing Screen Resolutions | Punchcut: Change is a constan... http://bit.ly/fe0ahd
13 April, 2011 - 08:30
@plotterx via Twitter:
[uniknotions.com] Pixel Proliferation: A Toolset For Managing Screen Resolutions | Punchcut: Change is a constan... http://bit.ly/fe0ahd
13 April, 2011 - 08:43
@designprayerer via Twitter:
[uniknotions.com] Pixel Proliferation: A Toolset For Managing Screen Resolutions | Punchcut: Change is a constan... http://bit.ly/hhqvnO
13 April, 2011 - 08:44
@thisiskwarc via Twitter:
[uniknotions.com] Pixel Proliferation: A Toolset For Managing Screen Resolutions | Punchcut: Change is a constan... http://bit.ly/hWtPNf
13 April, 2011 - 08:44
@campbellrowley via Twitter:
RT @espiekermann: Awesome toolkit for UI work from Punchcut: http://bit.ly/icyhQF
13 April, 2011 - 08:49
@wojciechzalot via Twitter:
http://t.co/3f2D0H7 some really useful stuff #UI @Punchcut via @espiekermann
13 April, 2011 - 08:50
@entwerpen via Twitter:
just downloaded: Pixel Proliferation: A Toolset For Managing Screen Resolutions | http://t.co/dP5MbRT via @Punchcut
13 April, 2011 - 08:51
@_ermin via Twitter:
"Pixel Proliferation: A Toolset For Managing Screen Resolutions" a set of tools for multi-device UIs. http://pnch.it/9cIu4u | via @Punchcut
13 April, 2011 - 08:51
@tuhinkumar via Twitter:
Photo: Great UI kit from @Punchcut. Very useful if you design for multiple screens (which I believe every... http://tumblr.com/xqm20zn4u0
13 April, 2011 - 08:52
@tinatavcar via Twitter:
All in one device design toolkit from @Punchcut http://pnch.it/9cIu4u
13 April, 2011 - 08:53
@LukaBirsa via Twitter:
Nice tools 4 testing your mobile layouts in .PSD. RT @tinatavcar: All in one device design toolkit from @Punchcut http://pnch.it/9cIu4u
13 April, 2011 - 08:54
@dmos via Twitter:
Pixel Proliferation: A Toolset For Managing Screen Resolutions | http://t.co/ETxAbZQ via @Punchcut
13 April, 2011 - 08:54
@martininMA via Twitter:
really useful screen ratio kit from @Punchcut http://j.mp/ganXl2
13 April, 2011 - 08:55
@rskiermont via Twitter:
Making device screen resolutions easy..check it out. http://t.co/pVxEqeU via @Punchcut
13 April, 2011 - 08:56
@InspiringPixel via Twitter:
Great UI kit from @Punchcut. Very useful if you design for... http://goo.gl/fb/MAlc4 #geekery
13 April, 2011 - 08:57
@Zone_5 via Twitter:
RT @rskiermont: Making device screen resolutions easy...check it out. http://t.co/pVxEqeU via @Punchcut
13 April, 2011 - 08:57
@chugglestweets via Twitter:
Now just insert idea: A Toolset For Managing Screen Resolutions | http://t.co/iw1Yraa via @Punchcut
13 April, 2011 - 09:05
@vanwilligen via Twitter:
RT @espiekermann: Awesome toolkit for UI work from Punchcut: http://bit.ly/icyhQF
13 April, 2011 - 09:05
Responses