Pixel Perfect Precision Guide

Today digital product studio ustwo have launched the 3rd iteration of their popular Pixel Perfect Precision Guide (try and say that fast 3 times) to help designers become pixel perfect. We had the chance to get an exclusive interview with Matt Gypps at ustwo about the latest PP3.

FFF — Perhaps you’d like to start by introducing ustwo’s Pixel Perfect Precision Guide to those who haven’t have not yet heard of the project.

MG — In brief, it’s a learning tool to give designers the knowledge they need to create work in the digital area. It was originally created four years ago to address some common mistakes that were cropping up at a pixel-level, but since then its scope has widened to encompass much of what we have to think about on a day-to-day basis here at the studio. Although we use it internally to share knowledge around, we’re also really keen to get that knowledge out there into the public domain, especially to students and others who are new to the field.

The PPP Guide already seems to be very detailed and extensive. What did you guys learn to improve on the previous version?

Although the most obvious thing is the new content, such as the Design and Development chapter, this tends to be documenting our existing processes that we’ve been refining over the years, or adding new hints and tips we find. The two areas that we’ve spent the most time on have been the studio’s rebranding, and how that impacts products such as the handbook, and also the copy inside. A lot of pages hadn’t been edited since they were originally created, so many of them have had been smoothed out to read better.

Does the ustwo team work mainly in Photoshop? It would be interesting to hear what tools you use during the design stages of an app.

Yes, we’re predominantly Photoshop monkeys when it comes to creating pixels. We try not to get too bogged down in the app though when we’re working on new projects. As soon as possible we’ll get some basic assets out, and get them built up into prototypes to play around with and send to clients. If any of the developers are free we can get these as proper iOS apps made in Xcode, or perhaps we’ll with go with some motion demos in After Effects. Ultimately though it’s down to what communicates the idea in the quickest build time. We’re quite happy with a simple animated GIF or interactive PDF if that gets the message across.

Has Adobe ever commented on the Guide? You are basically creating the documentation that Adobe should have!

No, we’ve never heard anything from them. The flip side of that though is that we’ve never approached them about it either. Over the past couple of releases we’ve shifted the focus away from this being purely a Photoshop hints and tips book for the experts, and more towards a general digital design resource. Photoshop will always be important to us, and we’ll keep adding our knowledge about it in there, but we’re now looking more at the process of design. The “why” as well as the “how”.

Here are a few useful tips taken from ustwo’s Pixel Perfect Precision Guide.


Your primary consideration should always be your users. Guide design decisions by finding out what they want to do, and then structure your product so they can carry out that task as quickly as possible. Always bear in mind what is suitable for them as well; for example, a completely flat, cutting edge interface guided by grids and typography may work for a younger audience, but perhaps some friendlier skeuomorphic touches would be more appropriate for older users who aren’t quite so tech-savvy.


Accessibility is relevant to every one of your users — not just those with some kind of disability. Good practice such as ease of use and clarity are a given, but there are also steps you can take to make your work more accessible for those with conditions such as colour blindness and dyslexia.

Visual Hierarchy

Layout, colours and typography have a huge influence on what the eye is drawn to, and consequently how information is consumed. Think about what you want the user to look at on the page and in what order, then design around that hierarchy. Grab attention with high contrast and large, bold type, or push items back with lower contrast and smaller, lighter type. Culture also plays a part: for example Westerners will naturally start near the top left of a screen as that’s the way we read.


No man is an island, and most of the time your files won’t be either! Good organisation is essential as it saves a lot of time for other people on the project; well ordered files and layers mean other designers can jump straight into your work and find their way around, and a logically named set of assets will make developers very happy.

FormFiftyFive – Design inspiration from around the world » Features

Leave a Comment