You don’t need extensive wireframes for iPhone apps. Get a solid site map and page flows together, and jump straight into design, you’ll be OK (I promise)
Since phones have a pretty limited UI palette, it makes more sense to start with the end. Design your high-res button elements, fonts, icons and menu bars. Then just start throwing it together, you’ll find all you need to know in the process of actually designing something that looks close(r) to the final product.
Wireframing just takes forever
This sounds like a lazy designer gripe but actually it’s pragmatic to save precious time. Let me repeat myself: if you are an excellent designer, you time is sacrosanct. So be ruthless about what you say no to. Products require lots special attention later in their cycle, and time is a factor here.
We’re not going to live forever (and Tim in marketing needs that landing page) so let’s cut out this unnecessary step. Sure, OK, sketch out a few key screens, and have a basic diagram of how things fit together, but this step doesn’t need a lot of time. You just end up covering up the low-res sketches with UI elements from your bootstrap file. It’s easy enough in Omnigraffle to import a bunch of high-res PNGs and just start building realistic screens inside your pre-arrange Omnigraffle flow chart.
Function beats pretty
The reason you want something real looking is that you can then toss you realistic screenshots into something like Envision and have a click-through demo faster. And know what you missed, faster. And get customer feedback, faster. Counter-intuitive, I know, but ultimately the further you get, faster, the more you’ll know about all the ways in which your app fails (and it will…it just will, so accept it). It won’t be perfect the first time through, even with two wireframes for every page.
What’s the interaction?
Seriously, how does it feel to use it? Is it fast, do buttons give good feedback? Do users get where they need to go quickly? Do they find the app useful at all? Self-aware questions you need to build a useful, engaging product. And you won’t have any answers until you start moving faster.
The givepulse example
I spent lots of time wireframing, and less time building a style bootstrap. And then I overlaid the real screen elements on top of an Omnigraffle wireframe. And THEN we started moving elements around, but the app felt much more real at that point and we could actually imagine ourselves using it. I spent so much time on the wireframe and design in fact, that I had no budget left over to help with the interactions and user testing. And this is a shame.
Storyboarding
The nice thing about working like this was that the Omnigraffle document really told a story to developers, investors and external stakeholders. It was clear how the pages linked together, and the high-resolution images allowed viewers to imagine and be excited about the coming app. Was this storyboard worth sacrificing usability testing and interaction design? I’m not sure it does, honestly.