Pixel Perfection Precision handbook interview

Last week we had a chance to interview the guys from ustwo, to discuss their latest book “Pixel Perfect Precision Handbook”  You can download it here, And of course be sure to follow @pppustwo on Twitter for all the latest pixel news and advice!

• iBook iPad Download (18mb)
• iBook Desktop Download (17mb)
• PDF Download (17mb)
• Extras (Scripts, Resources etc., 8mb)

Without further ado, here is the interview:

What’s the main reason you released this book?

We’ve been working on it for a few years now internally with the aim of improving the quality of interface design across the board – especially for those new to the profession. In our experience this kind of practice isn’t really taught on university courses, so when we take graduates on we tend to spend a lot of time bringing them up to speed – any designer’s induction here includes having a run through session with me on the book. So based on great feedback internally we decided it was about time we shared the Pixel Perfect Precision message with the world!

How long did it take to produce it and how many people were involved?

The 1.1 release launched recently coincided with its third birthday and it’s just been me over those three years with some help from then-Lead Intern™ Daniel – who helped out with a lot of prototyping on the first iBooks version last year.

What other resources would you recommend to mobile developers?

First port of call should be looking through the relevant guidelines for the platform you’re developing for. I also pick up a lot of info on Twitter, following people like Marc Edwards (@marcedwards) (who’s also involved with the Iterate Podcast (@iteratetv)), as well as other companies in our field like Fjord and Teehan+Lax. The Verge is great for info on the latest technology, and Designers & Books for some tree-based recommendations!

Why did you write it in iBooks compared to some other platform?

The original handbook was produced in Keynote and distributed as a PDF. Halfway through a redesign we heard that Apple had dropped iBooks Author on the world and we were immediately interested in what it was all about. Initially it was just a learning exercise to see what the platform could do, but as it started to develop we realised that the iPad was a great distribution platform for the book – unlike a PDF the iBook could be completely pixel perfect! It was also incredibly quick to implement once we’d settled on the style (there’s more about that in the 1.1 release blog post https://www.ustwo.co.uk/blog/the-ustwo-pixel-perfect-precision-handbook-1-1-and-how-it-was-made/) as it’s possible to copy and paste between Keynote and iBooks Author. Conveniently you can also export a PDF from iBooks Author so it’s in a more universal format.

What do you think are some of the biggest mistakes people make with regards to aligning?

Not setting up a grid to start with! Even just a handful of guides on the page to define where the margins are would help, but instead a lot of people still line stuff up by eye. As the designer creates more pages these errors can add up, causing buttons and other components to jump around as the user navigates through the interface, creating a jarring experience.

A big problem for a lot of people is that colors look different on different screens, do you think this could be avoided by focusing on color consistency?

I don’t think we’ll ever be able to solve the problem of screens rendering colours differently so the best thing to do is have some test devices that you can preview designs on. If we’re creating an app we’ll try it across a range of iPhones and iPods to see how things come out, as well as high-end and low-end Android devices if it’s heading for that platform as well.

It’s also really important to consider how accessible your designs are for those with visual impairments such as colour blindness. By running a colour contrast check on your design through a site such as https://snook.ca/technical/colour_contrast/colour.html really helps. Linking up with the original question, by getting the contrast right you also go some way to making your designs usable on lower quality displays.

Do you think some developers get overwhelmed with Photoshop because they don’t follow simple rules?

I’d say Photoshop is a product that’s very easy to get overwhelmed with just because there’s so much it can do! On a day-to-day basis I’m probably only using 10% of its features, but to someone who’s new to the app – it must be difficult to know which ones are relevant and where they’re located. In the toolbar for example there’s 20+ features, of which I’ll just use the marquee and shape layers/paths most of the time.

With retina screens becoming more popular do you think pixelated images will be a thing of the past?

We’re getting very close to the point where we won’t notice the individual pixels on a screen, that’s a given.

What interests me more is how that’s going to affect the tools we’re using – for example, will we go back to desktop publishing style apps where we no longer worry about pixels and resolutions, instead simply setting up a page in the correct proportions and getting on with it?

But then, how will we marry that with the massive range of screen sizes and proportions that are out there right now? There are lots of questions that need answering, but I’m excited to see what’s coming in the future. I’ve written quite an in-depth blog post on the subject which is worth a read if you’re interested in this discussion https://www.ustwo.co.uk/blog/the-death-of-the-pixel/

Is there anything else you would like to share with our readers?

Pay attention to the little details as well as the big idea of your designs and don’t trip over at the final hurdle! Oh, and follow @pppustwo for the latest tips and tricks.