Mocking up

I typically use Balsamiq for doing UI mockups for iOS devices, but, although I like the output, at times the lack of native UI means I just end up frustrated as the app doesn’t quite work the way I expected, causing me to fight it rather than just getting on with the job at hand.

So this week when producing some new mockups I tried something different and went with OmniGraffle and the excellent iPad and iPhone design stencil, and was quite pleased with the results. I used the outline stencils (as in the example below), and the result was clear, easy to understand, and doesn’t falsely convey the notion of “complete design”, which I think people tend to get if you give them something mocked up with actual graphical widgets.

If you like OmniGraffle, then it’s well worth a go. That said, I find some things in OmniGraffle equally frustrating (like how it’s paper size based, when nothing I’m going doing is going to remotely go near a printer), but it made a nice change, and now I have another approach I can use when Balsamiq’s cartoony feel doesn’t quite suit the project. A hat tip to Kim Plowright who I think was the first to point me at these templates a while back.

In a related note, I was pleased to see Teehan+Lax have produced a new version of their iOS/iPhone Photoshop templates, updated for iOS5 and the iPhone 4S. Lots of new stuff in there, like Notification Center, the new toggle widget, and so on. When it comes to building the UI for production, I always tend to start in Photoshop and not in code (assuming a designer hasn’t already done this for me), and this template is just perfect for filling in stock components and providing a device frame to put everything in context (which is very important I feel). The hat is tipped once more to Matt Gemmell for alerting me to the update.