Mockups
A few weeks ago while attending iOSDevCampDC I was lucky enough to see Ken Yarmosh speak on mockups. It was a great talk. He opened with why he prefers digital mockups to pencil, the various mockup tools on the market and then did a walkthrough of his company’s current workflow.
This talk along with the fact I’m in the middle of three projects in various mockup stages pushed me to spend the last few weeks playing around with one of Ken’s tools, Balsamiq. Historically I have been a pencil and paper mockup man but all new projects for me are now team-based and there is an argument to be made I should do something more sharable, defined and digital.
Balsamiq
Balsamiq is a low fidelity mockup tool that lets you build UIs with a kind of pencil/sketch feeling to them. Even though I’m moving away from a real world pencil I still find a huge benefit to mocking things up in this style. It helps make sure the people you show the mockups to understand the current state of the app. It’s very easy for non-techies to confuse a linked up Photoshop mockup with a working app and I feel this helps define that divide.
A mockup of an iPhone app I’m helping build for a friend. It helps make sure your long term parked car won’t get towed from a random street closure.
One of the nice things about Balsamiq is its growing collection of widgets which you can customize to fit your needs in your mockup. I was particularly impressed with the iPhone table view which is very flexible.
What’s not to like? Well for one Balsamiq is not a native Mac OS X application. It’s an Air app, so things feel strange on occasion. I could mope about the non-native scrollers and other bad behaviors (like creating excessive New Documents when opening documents from the Finder) but the biggest impact for me is no native spellchecking (which I’m sure will come to bite me in the ass sometime soon, if not already).
OmniGraffle
I did spend a little time with OmniGraffle during this recent evaluation. While I love OmniGraffle for other things like model diagrams, I didn’t find it particularly great for mockups. It does have a similar growing stencil library but I feel like the scaling behavior isn’t right.
In Balsamiq there is no canvas size. It kind of grows as you place object on it. This works great for zooming. You can drag in an iPhone frame and then if you like Zoom to Fit and it will fill your screen. OmniGraffle however has a strict canvas size so if you say drag in a Mac OS X window from a stencil you can’t zoom in. If you try to scale the window widget up not all the inner text widgets scale with it (for example, the window title bar would remain really small). Then when you dragged in a secondary widget like a text field it would be too small and you’d have to scale it as well.
I suppose I could have defined the windows size and then adjusted the canvas to match that size and then zoomed the canvas to fit but at that point I just went back to Balsamiq which I felt was just more focused for the job.
For Ken, Balsamiq was a starting point. He would use it to define the UI, then use OmniGraffle to document the interactions and gestures, creating a visual contract of sorts. For full on interactive demos he’d import his Balsamiq stuff into InVision. I’m not sure I’ll be documenting my own projects that deep but for people doing contract work I would recommend trying it out.
Keynote
One other app I used this past week for mockups was Keynote. I didn’t use the full on Keynote KungFu templates but instead ended up taking some cut up Balsamiq PNG exports and animating how I envisioned a Core Animation UI working. I played the presentation, took a screencast, talked over it explaining my idea, then sent it to the team for feedback. It worked great.
Keynote’s animation tools are very easy to use and while they do have their limits I’ve found them to be a great way to quickly visualize things. As an additional example, at a recent GameJam I used Keynote to animate a game mechanic I though we could use.
Final Thoughts
Mockups are a great way to fully visualize your ideas and no matter what the tool, I highly encourage everyone out there to go through the motions and get those ideas onto a canvas. The biggest trick is finding the right mix of speed and definition in your toolset. You don’t want to invest more time into the mockups than the value they create. Good luck!
Posted on: August 25, 2011 – 1:21 PM
Hi. My name is Mike Zornek (
2 Comments
I hate Flash, and software made on the Adobe Air-platform is just plain terrible.
Balsamiq is really nice, and affordable. I think whatever one can work quickly in is a good choice.
For close to real time collaboration I have been using a web-based app called mockingbird (gomockingbird.com). While Mockingbird still lacks some critically important features (you can’t upload your own images, or create master headers and footers), it is handy when you need to collaborate with people who don’t have the same software/subscriptions as you do.
When real-time collaboration is not an issue I like Fireworks and Axure for mockups (Fireworks if things are pretty static, Axure if I need to mockup interactions).
I do like the sketchiness of Balsamiq. I ended up getting a widget set like that for Axure to help avoid getting design-type feedback on wireframes.
Post a Comment | Comment RSS feed