Designing for the Retina display

Building apps for the iPhone 4’s Retina display means building two sets of images—one at 163ppi and another at 326ppi. After slugging our way through an app build or two, we feel confident that we have a decent workflow for attacking future Retina display app designs. Hopefully this information is of use to other designers.

Consume for iPhone 4

We’ve been working very hard on the next update to Consume for iPhone, which adds support for the iPhone 4’s Retina display.

A new Drobo Dashboard icon

I love my Drobos, but I don’t love the bundled software’s icon. Rather than complain, I’ve created a replacement.

Noise and textures

Adding subtle noise or texture to UI elements can look great, but what’s the best way to do it?

Photoshop CS6 wish list

Forget about big-ticket features. What Photoshop needs is some finely tuned, pixel accurate love.

This is my Photoshop CS6 wish list. If you have something you think might be worthy for this list, please @me (if I add it, I’ll credit you). I’ll send this article to John Nack in the next few days. Hopefully Adobe find the information useful. Who knows, they may even implement some of the suggestions.

An iPhone 4, without the queue

We’ve been working on some new Bjango web pages. As part of that process, we drew an iPhone from scratch. We thought others might like to use the new images, too.

Do whatever you like with these images, as long as you don’t sell them or claim them to be your own work. Feel free to use them on your own website or modify them in any way.

What to do with all those extra pixels?

The iPhone 4 features a vastly superior display resolution over previous iPhones, containing 614400 pixels, quadruple the iPhone 3GS’s 153600 pixel display. The screen is the same physical size, so those extra dots are used for additional detail—twice the detail horizontally, and twice vertically.

For developers only using Apple’s user interface elements, most of the work has been done for you. For those with highly custom, image-based interfaces (like all of our apps), a fair amount of work will be required scaling up elements to take full advantage of the iPhone 4’s Retina display.

Photoshop roundrect roundup

Rounded rectangles, or roundrects as QuickDraw so fondly calls them, are standard fare on a web and interface designer’s utility belt. So common that the footer on this page itself contains 12 roundrects. So common that it’s rare for web pages or apps to not contain a roundrect or two.

Unfortunately, pixel-locked rounded rectangles can actually be fairly difficult to draw in Photoshop. (Pixel-locked, meaning all edges fall on an exact pixel boundary, creating the sharpest object possible.)

Design articles

Designing for the Retina display

A new Drobo Dashboard icon

Noise and textures

Photoshop CS6 wish list

iPad images

An iPhone 4, without the queue

What to do with all those extra pixels?

Photoshop roundrect roundup

Using Photoshop for iPhone development

Testing landscape app interfaces