UI Mockups

I’ve spent the last couple of days working on UI mockups for my new project. It’s a non-game app, so the whole application is basically user interface. After watching an inspiring presentation on UI design for iPhone from WWDC, I decided to do what Apple recommends and do a lot of paper designing early on.

Apple recommends using paper to do early mockups because it’s extremely fast. I know that there are online tools that allow you to drag UI elements around on a virtual iPhone, but there’s something about a pen and paper that just feels better. I even tried doing some mockup work with my pen and tablet in Photoshop, but it still slowed me down. Pen and paper is the only thing that lets me feel free enough to make mistakes and if each sketch takes 45-60 seconds, I do a lot of iteration really quickly.

However, the one thing that bugged me about doing some of my early sketches was that I felt like I was getting the main proportions of the screen wrong. So I whipped up a little Photoshop file that’s just 3 line drawings, side by side, of iPhones. I set it up so that it prints so that they’re the exact size and proportions of a real iPhone. With these, I can then do really fast sketches while also getting an idea of what will or won’t work.

This is the process that seems to be working well for me (though my little sketchbook is quickly filling with table view layouts too). I thought other people might find my little iPhone mock-up file handy, so I’m making the Photoshop file available for download. The file was created in CS3, but hopefully it should work with a version or two older too.

I hope you find it useful.

Owen