maxvoltar

RSS

by Tim Van Damme

Follow me on Twitter

What does 320dpi mean to designers? (2)

This article is a follow-up to the one I wrote before we knew for sure Apple would introduce a new iPhone with high resolution screen.

The past couple of days I’ve been turning the internet upside down in search for screenshots of the new interface to see how Apple “solved” the problems you get when you need to design an interface that has almost the same DPI as paper (here’s the best screenshot gallery I could find). Here’s a list of tricks and techniques I learned so far. Over time we’ll see more design conventions, but for now it’s just a lot of guesswork.

1.5 or 2?

iPhone 4 Safari top bar

As you can see in this screenshot, solid lines and drop shadow on text should be 2px wide. Subtle glows however should be 1.5px, here’s a screenshot of how you can do this in Photoshop with inner shadow:

Photoshop inner shadow

Same settings can be used for a 1.5px drop shadow. You can also achieve this effect with inner glow or stroke (3px centered stroke, requires a layer mask to get rid of the part of the stroke outside the object).

Glyphs have a 2px solid drop shadow if that shadow done with code (in which case you only need to provide a flat PNG, but it was worth mentioning this for mockup reasons), if not you should use the 1.5px drop shadow

You’ll notice that if you resize this to 320×480 pixels, it’ll look like a sharp 1px line. I’m not saying you don’t have to optimize some images for the “older” iPhones, I’m saying it isn’t so bad as I expected it to be.

Rule of 2

If you’re working on your 640×960 pixel design, you need to think about this: Developers don’t use pixels to position objects on screen, they use floating points. If what I read is correct, on older iPhones one point is one pixel. This means that on the iPhone 4, one point is 2 pixels. What does this mean for us? Well all the objects you design should measure a multitude of 2. Designing a 50×50 pixel circle will turn out to be 25×25 on an older iPhone.

After some dabbling in Photoshop, I found a trick I think is worth sharing. Open Preferences and go to Guides, Grid & Slices. Change the grid values so it looks like this:

Photoshop grid settings

If you turn on your grid, it’ll look something like this (sorry for the blurry iPhone photo, Photoshop does some weird voodoo that didn’t allow me to take a decent screenshot of the grid):

2 pixel grid in Photoshop

Stick to this grid, and optimizing the interface for 320×480 pixels is a much easier job.

Performance

Wether you’re designing for the slower 3G or 3GS, or for the iPhone 4 that has the blazing fast A4 processor, performance is always something you should keep in mind. When working with the dev team that will turn your design into a real app, try doing as much as you can with code. The developers know how to draw gradients and lines and much more with pure code (a bit like CSS), and this has many advantages, not the least the performance gain and if Apple ever launches an iPhone with a resolution of 1280×1920 it will still look crisp and clean.

For objects that need an image, you should always provide 2 images, one for each resolution. The developers can select which image should be displayed on what device.

Testing

You gotta keep testing the interface you’re designing on an actual iPhone. Go outside and look at it in direct sunlight, turn off all the lights in the house and see how it looks in the dark. Are the buttons big enough/too big (an issue we all run in to because the DPI of our computer screens is so low and it’s hard to guess how what we’re designing will look like on the device)?

Something I do is I save all my screenshots in Dropbox. For this I recorded an action in Photoshop that will automatically save my current design to a flat PNG. As soon as you save the file Dropbox start uploading it to their servers. Grab your iPhone, open the Dropbox client, and boom, there it is.

In Photoshop, I go to Window > Arrange > Open new window for [filename], and then zoom out to 50%. It isn’t perfect, but gives you a much better sense of the scale you’re designing in.


I hope all this helped you out if you were wondering how to design for the screen size of the new iPhone. This probably isn’t all 100% correct, but until we can preview our designs on the actual devices, this is the best we can do.

More info can be found at Apple’s iPhone Application Programming Guide (account required).