Sickdesigner

Ever since the iPad came out, the sheer number of purchases has caused quite a paradigm shift in what we used to think was an established medium for website consumption. Tablets are, nowadays, equally important as desktops, so it makes sense that we need to build our websites with this medium in mind, as well.

But what do you do when you don’t actually have an iPad to test your designs on? Sure, there’s http://www.ipad-emulator.com/ but when you’re in the mockup phase, going back and forth from Photoshop to an online emulator, doesn’t really help. What’s more, you can’t get a physical sense of how the design will work. Are the buttons big enough, is the line-height too small? You get my drift.

So, here’s a quick and dirty way of getting as close as possible to how your design will look and feel on an iPad without actually having one.

01

Open Photoshop and make a new document of 1024×768 px at 132 ppi. I added a few gutter guides, 30×30 px.

02

Set the zoom in Photoshop at 100%. Next, get a ruler or some measuring tape and, physically, measure how many inches/centimeters your canvas diagonal has on your monitor. If your canvas’ diagonal is bigger than 9.7 inches / 24.6 centimeters, then zoom out, in Photoshop, until you get it to match. If it’s smaller, then zoom in.

Be careful, the zoom value that matches the 9.7 inches / 24.6 centimeters differs from one monitor to another, resolution to resolution.

For example, on my 15″, 1440×900 px laptop, the zoom value is 82.5%, on my other 15″ laptop that has a resolution of 1280×800 px, however, the zoom value is 73.7%. Quite a difference.

03

This means that I can edit my design at whatever zoom level I want, then just input 82.5 in the little input field at the bottom left of Photoshop’s UI and I can get a true-to-life feel of how the design will perform on the actual device. No switching between environments, apps or what have you.

The coolest part about this … uhmm … technique is that you can physically see whether your buttons are large enough, or if you can easily enter text in an input etc. simply by touching your monitor, because what you see (in terms of scale) is, literally, what you get.

I know it’s not the most orthodox method for solving the problem at hand, but it does work, and, once you get over the fact that it’s a workaround, it makes sense.

Happy monitor smudging!

by Radu Chelariu