Design

The ustwo™ Pixel Perfect Precision Handbook 1.1… and how it was made.

By Gyppsy 25 January 2013

We’ve now updated the Pixel Perfect Precision Handbook to version 2 – visit this blog post to download and read all about it.

We’re excited to announce there’s a new version of the PPP™ Handbook available to download! Over the past few months we’ve updated it with a new chapter as well as more advice:

  • Accessibility – a whole new chapter dedicated to making your designs accessible for colour blind users.
  • Adobe CS6 – updated advice for the new suite of software released.
  • More pixel tips and tricks – we’ve added pages to some of the sections, including Text Length, Aligning Text on Buttons, Leading, Locked Layers, and Reducing Photoshop File Sizes.
  • Custom fonts – a big one for us, we can now use our brand FS Me typeface in the iBook instead of Helvetica – looks so much better!

Download it now…

And of course be sure to follow @pppustwo on Twitter for all the latest pixel news and advice!

Working with Apple iBooks Author

It’s hard to believe that it’s been a year since 1.0 and to reminisce, we wanted to share with you some of our experiences working with the Apple iBooks format.

We were incredibly excited when Apple released iBook Author, and having seen the impressive demos were keen to find a project to test it out on. At the time the PPP™ Handbook was receiving a refresh so it was very much in the forefront of our minds; that coupled with the fact that PDF seemed like such an oxymoron in terms of its distribution (PDF images are hardly pixel-perfect!) was enough to persuade us that iBooks, paired with the iPad, were the perfect viewing tool.

But we faced one major challenge: the current design was based on a widescreen (16:9) format, and the iBook was a more traditional 4:3; the former with a four column grid and the latter realistically only able to fit three columns. For some pages this wouldn’t be a problem, but in some cases all four columns were used when presenting an idea.

Four into three doesn't go

However, having seen the presentation of the software we knew we had some super-duper whizzbang interactive tools to play with now! No longer constrained to static designs we jumped headfirst into these new features. With the help of then-Lead Intern™ Daniel we came up with a range of solutions for how to fit four columns into three using some of the built-in iBooks Author widgets*, which mostly revolved around trying to make the images interactive.

Zoom in to details prototype

One of the options tried was to use the zoom tool.

Swipe between Naughty and Nice examples

We also tried a couple of versions using swipe gestures to flick between images.

However after trying out these ideas, and testing them round the studio, we realised that we were trying to force interactivity where it didn’t necessarily belong! Our fixation on introducing “cool” features had led us down the wrong path entirely: our users couldn’t work out how to view the content on the page. With the knowledge that this direction just wasn’t going to work we started to be more creative with the layout itself, and when one proposal appeared showing the text at the bottom of the page, and more importantly three free columns above for images, we knew that we had the money shot.

The layout money shot

So the moral of this story, as you may have already guessed, is: just because you can, doesn’t mean you should! iBooks Author contains some fun little interactive tools, but they should come with a warning label that reads “Only deploy when it actually benefits the user!”.

*As an aside, we found these default widgets to be quite limiting in terms of styling; there wasn’t much you could do with them outside of what iBooks Author dictates. If you want full customisation it’s better to create your own HTML5 widgets using a tool such as Tumult Hype.

ustwo™ Open Source: US2Form-Validator Apps to Sort Your Life Out

12 Comments

  • Ken Ruiz

    Hmm, worked on my home iPad 3 so not certain whats going on. I will check in with my office's IT guy to learn if there are file size restrictions with the WiFi. Worked great, thanks.

    2013-05-09 17:35:00
  • Ken Ruiz

    Hi Matt, I am attempting to do as per your suggestion, however it is taking forever; granted it is 18 Mb, but 2.5 hours so far seems a bit long. I will attempt to do the same on home WiFi and see if my results are different. Post up the results soon.

    2013-05-07 16:57:00
  • Matt Gypps

    Hey Ken, can you download straight to the iPad by viewing the page in Safari and clicking on the iBook iPad Download? BTW there's a new version 2 of the PPP™ out today http://www.ustwo.co.uk/blog/the-ustwo-pixel-perfect-precision-handbook-2/

    2013-05-07 11:44:00
  • Ken Ruiz

    Hi all, having trouble getting the sample ibook on the iPad. I am using an iMac to complete the download but every time I attempt to view via iBooks I get the prompt "The document "PPP" could not be opened. The file isn't in the correct format. The file might be corrupted, truncated or in an unexpected format" please suggest to resolve. Thanks in advance. PDF works fine.

    2013-05-06 15:57:00
  • feedmebaby

    great! thank you!

    2013-04-29 21:46:00
  • Gyppsy

    Try this https://dl.dropboxusercontent.com/u/12118986/PPP%E2%84%A2%201.1/PPP%E2%84%A2.pdf

    2013-04-25 13:53:00
  • Eduard

    Any chance to re-upload it anywhere else? Getting a 504 every time :/ (Talking about the PDF)

    2013-04-25 13:16:00
  • Rasmus Kalms

    This is a great round up. Thank you for this!

    2013-04-22 09:22:00
  • Gyppsy AKA Tony Dones

    I know, he's got to go!

    2013-04-13 18:13:42
  • Rob

    A 100 years worth of pure gold being given away, thanks Dones. Also that guy on the cover is hot... just saying...

    2013-04-11 17:19:00
  • Rodnei A. Ribeiro

    Thank you for the material. The world and Brazil thanks :)

    2013-02-26 02:01:00
  • jeremy wheat

    Thank you this is really great to share with design teams

    2013-02-07 18:30:00

Leave a comment

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