The past few days has seen me head-down in designing an iPhone application. The results so far: interaction flow, feature map, and about 15 screens on paper. For most new applications, my wireframes don’t assume any particular graphic treatment. With the iPhone, the look is established and relatively stable, so I feel pretty good about creating glossy mockups that will actually look close to the finished product. So long as I don’t need to create custom interface elements, I’m in safe territory doing so.
Ready to turn those paper sketches into usable wireframes, I turned to trusty OmniGraffle and started looking for a stencil of iPhone interface elements.
But no luck, as in no stencils to speak of that I could find. Moreover, the iPhone SDK beta doesn’t include the interface builder kit. I expect that future design work on iPhone and iPod Touch apps will also involve glossy mockups over standard wireframes, so I created a temporary stencil out of iPhone screenshots and a bit of custom shape creation. When the SDK is released with the interface builder, I’ll replace my hacked up elements with actual ones from the kit.
For now, though, I’m working with my homespun solution. Though it’s very much a draft with some rough edges and an incomplete inventory, it’s enough to get started. I thought there might be others out there thinking of designing an iPhone app and at a loss for how to mock up the interfaces, so I’m sharing the stencil here.
iPhone & iPod Touch UI Elements
I’d appreciate feedback on it, and will keep the stencil on this page with improvements posted here over time.