Pixel Perfect Precision Handbook
Article: Source
Good pixel practice vs bad pixel practice
We love pixels! They’re the building blocks of all the visual design we do here at ustwo™, but are so often relegated to mere afterthought in the excitement of working with colours and styles. We induct all our designers into the school of pixels with our Pixel Perfect Precision™ (PPP™) guide. The aim of the PPP™ document is to give pixels the care and attention they deserve, to make sure we get the simple things right before moving onto the detail.
Why is this important though? Isn’t it a waste of time to worry about every last pixel on the page? Like a lot of things in life, when something’s done right it should be invisible, but when it’s done badly it becomes an annoyance.
Users usually see your product even before they start interacting with it and as with everything, first impressions count. Blurred edges, objects that jump in position between pages, and colour mismatches are just a few things that a user will notice and become distracted by, even subconsciously. If your designs aren’t done properly it can leave them with a poor impression of the product, and potentially, of your brand. PPP™ ensures that designs are created to the highest quality, organised neatly and delivered correctly.
So where did PPP™ begin? Back in the early days of ustwo™, instead of forwarding an email describing how to set up colour profiles correctly, we created a small document detailing these instructions, and this is still the first chapter of our PPP™ guide.
The first version of the PPP™ document
Before long bits and bobs were added until the document had blossomed to over 80 pages! From all the content distinct chapters were created, such as Pixel Precision, Techniques, Organisation and Naming & Export; the Naughty & Nice theme was established to highlight the difference between OK and great practices.
The second version of the PPP™ document
For the second anniversary of the original PPP™ a redesign was decided upon to freshen up the style and to keep it more within our guidelines for documentation. Coincidentally, towards the completion of this Apple released iBooks Author—an opportunity too good to miss! Previously, PPP™ was distributed via PDF which always seemed ironic—PDF, a format more comfortable in inches and millimetres, tasked with guiding users in the dark arts of pixel craft! However up until this point, there was no better way to share this with our designers. This new iBooks format seemed perfect for delivering the PPP™: portable, interactive and able to deliver pixel perfect images, so we started working on a version instantly.
The latest, and most pixel perfect version of PPP™
In addition to being able to create pixel perfect digital content, iBooks Author allows us to share PPP™. We’re distributing PPP™ right here (21mb download) as a learning resource for all levels of designer. From Junior to Creative Director we’re confident there’s a process or tip that can be picked up in there! And as employers, we’d love for some of the information here to make its way into university courses as graduating students are often strong in ideas and motivation but haven’t been taught the finer details.
PPP™ is a constant work in progress, with new pages and sections already planned for the future; part of the excitement is that as we constantly learn we’re always thinking of new content to add to it. But it’s not supposed to be gospel either—there are many other equally valid ways to handle the methods outlined in there, which we’re always interested to find out more about. So if you’ve got any better solutions, or any other comments about it, then please get in touch!
Download the PPP™ iBook here.To view it on your iPad, drag the unzipped PPP™.ibooks file to your iTunes and sync with your iPad.
Drag PPP™.ibooks to iTunes and synchronise with your iPad to read
Update: For those that live in the cloud, the .iBooks link of the file can be found here (~14mb). This link can be opened straight on your iPad. And by popular request, for those without iPads, a PDF is available here (~15mb). Note that the scripts and example files are included with the original iBook archive in the main post above.