Design on the Phone Screen

When you’re a first-time mobile designer, the lowest hanging fruit for creating good designs is previewing on an actual device.  Simulators don’t count.  Slapping iPhone.jpg around your PSD as a frame doesn’t count.  You need to actually hold the design in your hand.

I often get to work with designers who are taking their first stab at designing for mobile.  Mobile design has been around for a few years now, but it’s not yet a common skill.  In the same way that web and print have different design processes, mobile also has it’s own unique toolset.  We see a lot of common errors while they get up to speed on the new platform.

The most frequent one is the amount of content that they’re trying to fit onto a single screen.  It looks great on a Cinema Display, but when you bring it down to pocket size, the text is often eyestrain-worthy or worse.  Perfectly reasonable looking buttons are obviously unusable.

You’ll find that previewing the design on the device solves that.  Even if there’s no functionality, just trying to tap the buttons provides insights on hard to reach areas.  Trying to read the text means that you won’t overload the screen.  Common design mistakes become easy to pick out.

There are tools to help you with this.  If you’re looking for a minimal solution, I recommend LiveView, which just positions a viewport on your desktop.  Whatever’s in that frame gets transmitted to your phone.  If you can’t manage to part with Photoshop, this is an easy tool to use with any design app.

If you’re willing to go further, I recommend learning how to use Sketch.  It’s designed for interface designers, makes exporting assets an absolute dream, and has a companion app called Sketch Mirror that streams your designs to your phone without having to fiddle with viewports.

When you design for print, you deal with printed proofs.  It would be insane to trust that you can translate your design from one medium to the next without error.

I get designs that have been approved for development when they’ve never been viewed on an actual phone.  That’s absurd.  Mobile is no different from any other format – designing without outputting to the final medium is the same as designing blind.