Design

The ustwo™ Pixel Perfect Precision Handbook 2

By Gyppsy 7 May 2013

Almost a year and a half after the first release of the PPP handbook – we still love pixels. It seems like you do too as we’ve had some great feedback. We’ve been working hard to make it bigger, better, and more useful.

Pixel Perfect Precision front cover

Download the new handbook here…

If you’re having any problems downloading from the above links then please try these instead…

Here’s a quick run down of what’s new in version 2:

Pixel Perfect Principle

Restructured – From our own experiences and what we’ve seen and heard from other people using the handbook, we realised a few things:

  1. We have been guilty of skipping over the program-specific tips and techniques when introducing newcomers to our pixel perfect practice so we could talk about design principles.
  2. There’s such a wide range of users and disciplines using the handbook as a guide to learn about interface design.
  3. It’s clear lots of you out there who are just after Photoshop advice and already know a lot about the foundations of design.

We’ve therefore separated out the core design principles from the Photoshop tips and techniques, and expanded on them to create two new chapters at the start: Pixel Perfect Principles and Pixel Perfect Details. For those wishing to learn about this field of design, it will offer an overview of the kind of day-to-day design-thinking we use here at ustwo™, and for the hardcore Photoshop users, there’s uninterrupted, detailed advice in the second half of the handbook.

Accessibility

Accessibility – Although we covered the basics of colour blindness and visual impairments in the previous handbook, we’ve learnt a lot more about the topic realising it warranted the full PPP™ treatment. We wanted to make accessibility accessible – so much of it is wrapped up in huge, text-heavy documentation that we find completely inaccessible! With this revised chapter, we aim to remedy that by highlighting key principles, making them easy to understand, and also showing that accessible design is good design, pure and simple. It doesn’t have to mean compromise or added cost, and should automatically be a part of how you approach a project.

Photoshop Tips & Techniques

More Photoshop tips & techniques – we haven’t forgotten about Photoshop either and there are more tips and tricks that we’ve learnt over the past few months in here!

Refreshed design

Updated design – we’ve freshened up the look and feel to not only make it look better, but reduced the download size.

As the lines between all the disciplines of design and development become more blurred, we hope that this updated guide will provide some invaluable knowledge and advice for you all. Enjoy!

Rando Diplomacy Introducing: Honk!

28 Comments

  • AndyC

    I found these patterns as fucking boring and you guys I can not believe you are so brainless and without imagination, formatted flat ideas replicators... there is no such thing like good design...

    2013-12-06 10:59:00
  • Matt Gypps

    Thanks for that, updated the master doc!

    2013-10-14 15:59:00
  • Lando

    Sorry to be the grammar police but there's a spelling mistake on page 58: "Serif type is harder to read for visually impaired or dyslexic users as it’s styling can obscure..."

    2013-10-14 15:54:00
  • gcofres

    hi, this book is perfect. thanks

    2013-10-04 06:51:00
  • Mike Brainstorm

    Nice! Thank you Matt! It's going to be such a time saver...

    2013-08-27 12:02:00
  • Matt Gypps

    Hey Mike, download the Extras here http://cdn.ustwo.co.uk/PPP/PPP2_Extras.zip

    2013-08-27 10:17:00
  • Mike Brainstorm

    Absolutely brilliant guide! Congrats... I cant find any link to the Crop and export scripts in the document or site. Help?

    2013-08-25 19:05:00
  • Jan Barbořík

    Thank you - very useful!

    2013-08-21 08:22:00
  • Will.Luo

    Hi,i am a web developer from China. Thanks for this handbook. I'd like to translate this hand book into Chinese and share it in Chinese design community.Instead of just use the screen shot and add Chinese below. I wanna make a better quality pdf file. Could i get the psd file file of this PDF file from you? Thank you.

    2013-08-10 05:15:00
  • Skyflyer Eagleman

    What a Great text of Web! Thank you very much! Great thanks.

    2013-08-09 15:36:00
  • randoloid

    Absolutely the most comprehensive, well written article I've found regarding pixel perfect image creation. Thank you for sharing this gem!

    2013-07-23 14:53:00
  • Matt Gypps

    It sometimes takes a long time for the link to finish downloading and open in iBooks. Alternatively, you can download the .ibook file to your computer, then drag it into iTunes and sync up with the iPad that way.

    2013-06-03 16:49:00
  • mads barfod

    but how can i open it on ipad? :) I clicked on the ipad link on my ipad but i could not open it?…

    2013-06-03 16:47:00
  • Matt Gypps

    Hi Mads, unfortunately you can't open iBooks on the Mac — it's an iPad-only format at the moment.

    2013-06-03 09:20:00
  • mads barfod

    i cant open it on my mac? :) it say i dont have a program to open it in, what program is that??? :) i can open the PDF but not the ibook version.

    2013-06-02 21:06:00
  • Franck Payen

    interesting, the first link works in safari iOs, but not in chrome… btw, excellent ressource, thank you.

    2013-05-20 06:59:00
  • Franck Payen

    Working on the desktop, no problem, but on ipad, it's failing. Wondering if it would work with ibooks uri scheme "itms-books:" instead of http itms-books:cdn.ustwo.co.uk/PPP/PPP2.ibooks

    2013-05-20 06:55:00
  • Ingo A.

    This is great stuff - especially the color add system! Thanks a lot for sharing

    2013-05-17 12:40:00
  • Matt Gypps

    Great! That's exactly how we wanted it to be: a gentle reminder of things to consider rather than a huge wordy document full of strict rules.

    2013-05-16 13:19:00
  • Tom Simpson

    This is a fantastically simple way to instill good practice in new starters. But furthermore it's a beautifully designed piece that gives just enough detail to allow creativity to flourish still. In my opinion this is exactly how 'guidelines' should be! Have shared this with my team!

    2013-05-16 10:35:00
  • RichardL

    Really useful thanks!

    2013-05-15 14:01:00
  • aurel

    Great work. I especially liked the typography section as that is the part that I have trouble getting right, I never can get my web typography right from the start. thanks

    2013-05-15 13:26:00
  • Aender Ferreira

    Wonderful e-book, thnks a lot!

    2013-05-15 13:08:00
  • Matt Gypps

    You're welcome, we've learned loads from other resources out there so wanted to give something back!

    2013-05-15 11:56:00
  • Blend Marketing

    Wow. This is one of the most generous contributions to the design world I've seen. Great work. Can't thank you enough.

    2013-05-15 11:27:00
  • Matt Gypps

    Hey Olaf, try https://dl.dropboxusercontent.com/u/12118986/PPP%E2%84%A2%202/PPP2.pdf for the PDF and https://dl.dropboxusercontent.com/u/12118986/PPP%E2%84%A2%202/PPP2.ibooks for the iBook version.

    2013-05-07 20:17:00
  • bzle

    Fantastic handbook! Loved the "naughty" and "nice" comparisons. There are definitely some best practices that I'm going to implement, such as the file naming/versioning. Love how organized it is!

    2013-05-07 14:43:00
  • Olaf

    Hi, I'm looking forward to the update. I really liked the old one and find it very useful. Thank you for that But none of the download links sem to work. They all give a 504 error.

    2013-05-07 13:24:00

Leave a comment

Your email address will not be published. Required fields are marked