@2x beta

Resources for mobile designers brought to you by someone who cares. Follow along on Twitter or subscribe to the RSS feed. Excuse the mess while I get this thing off the ground.

Designing the new Foursquare

Great write-up by foursquare’s lead designer Sam Brown on how they designed their new app.

Everything is a Remix Case Study: The iPhone

The iPhone didn’t appear out of thin air, and borrows off of all the other big mobile platforms all the time (as they do too).

Why do people uninstall apps?

Not surprisingly, push notifications top the list. Even when you offer the option to turn off some of them inside your app settings, people still prefer to uninstall your app. Push notifications are very much part of the design of your app. (via)

How Do Users Really Hold Mobile Devices?

Here’s your new bible for button-positioning. (via)

Ratchet iPhone app prototyper

Ratchet is a tool that let you mock up iPhone apps with HTML, CSS and JS. Great for testing flows and IA. Prototyping iPhone apps isn’t going to get much easier than this.

Abandoned Apps (part 1)

Sam Vermette (Shows, Transit) shares some mockups of iPhone apps he never finished. Unique insight in the process he goes through designing his apps.

Photoshop CS6 to gain retina display support this fall

The Photoshop and Lightroom teams are pleased to announce we will provide support for HiDPI displays in the coming months, including the Retina Display available on the new MacBook Pro. Supporting this new technology requires significant work by our product teams and we’re committed to provided a free update to all Photoshop CS6 customers this Fall and Lightroom 4 as soon as the work is complete.

I’m interested in how they’re going to tackle this. Will there be a shortcut to preview a canvas at 50% (and thus displaying all the pixels 1:1), will 50% zoom level be default on retina screens? Excited though, really glad Adobe’s rolling out update after update of an already amazing update that was CS6.

Designing for Retina by @cjdowner

Chris Downer of Realmac (known for their gorgeous apps) wrote down some excellent tips you should keep in mind when designing for Apple’s new Retina MacBook Pro’s (and soon their entire line of laptops and desktop computers).

Pixel art and the art of preserving pixel size

Neven Mrgan (you know, that guy I interviewed once) explains how he handles the artwork of The Incident.

I’m often asked this question about those games: do you draw your art at double size? If you think the answer is completely obvious, you’re not alone; I think so too. But since it’s not obvious to everyone, I’ll explain.

Awakenings: An Android Design Process

Sebastiaan de With wrote an interesting article about the obstacles he encountered while designing Alarm Clock for Android. Great insight into the world of designing for a thousand different devices.

How did we overcome the challenge of designing for such a wide target and ensure a legible design that didn’t appear banded, jagged or otherwise completely screwy on [insert screen technology]? […] The answer is quite simple: an exhaustive process of testing.


Huge collection of high-quality textures, totally free to use. Time to get skeuomorphic!

iOS button-styling explained by @mantia

Louie Mantia (ex-product designer at Apple!) goes into detail about the different ways of styling buttons on iOS. I suggest you download the PSD-file he attached and take a look at the different layer styles being used.


A great way to learn how to design for mobile is by examining other apps. Even better is looking at the resource files and how they’ve been sliced. That’s where Crunch comes in; it allows you to extract all the assets from any iOS app you ever installed in one click (I suggest you start with taking a look at the insides of Apple’s new Podcast app). Also: Made in Belgium!


The past couple of months we’ve seen a steady stream of new tools that are perfect for mobile designers. We can now add Slicy by MacRabbit (known from their web-editing software Espresso) to that list.

The concept of Slicy is best explained in their screencast. Basically, it’s a magic slicing tool for your PSD files, wrapped in a beautiful and fun to use package (it even auto-generates your @2x assets by simply adding +@2x to your layer name).

Skala Preview

The first tool I ever used to live-preview designs on iOS devices was LivePreview. The downside of this app was that you needed to have a window the size of your design visible on your Mac at all times so I started using Silkscreen which would send your designs to its iOS helper app every time you hit save. As PSD’s got bigger (retina, or just more complicated app designs), the time it took to save a file went from one second to 20.

Skala doesn’t have any of these issues. It uses Photoshop’s Remote Connection feature to display whatever you’re seeing in Photoshop on your device, together with a range of different display options.