Creating iPhone UI Mockups

When I begin designing a new iPhone application, I always start with simple wireframes. I prefer to first build my user interfaces as low-fidelity wireframe sketches, rather than more realistic images of user interfaces.

I have found that during the early phases of the project sketchy, low-fidelity wireframes better focus the conversation on functionality, rather than visual design. Otherwise, it’s easy to go down the “font and color selection rathole”. This is particularly the case when working with clients.

Low fidelity wireframes, by eschewing many cosmetic factors, are also faster to create and modify and thus allow me to quickly tackle fundamental issues regarding the usability of your interface. Suggestions and refinements can quickly be incorporated for further fine tuning.

Adopting a user centered design philosophy by first focusing on the usability and interactivity of your interface before applying a visual design provides you with a solid foundation for great design rather than having a pretty, but unwieldy, visual design long set in stone that must be expensively remodeled.

I’ve used a number of tools, but my recent favorite is the wonderful Balsamiq Mockups It’s an Adobe Air application, but don’t hold that against it, it works great on the Mac.

My favorite features are probably the wiki-style text markup for quickly laying out table views, and the ability to easily export selections to the clipboard as PNG images for easy pasting into presentations and documents.

Tagged: ,