Stop using MS Paint for your demos – Get Balsamiq Mocks!
Ever had your boss walk in and want a ‘mockup’ of a product the next day? In the past, I’d whip something up either in Visio (*cough* or Paint *cough*) and give a basic sketch of how screens and flow would work.
Over the past year, I’ve read a lot of rave reviews around Balsamiq Mockups, but hadn’t had a chance to try it out.
I emailed Balsamiq to inquery how their licensing structure worked. I was interested in purchasing a personal copy (budgets are tight here at the office—cuts in public education are running deep) and curious if I could still use it for “work-related” activities. To my surprise, I had nearly an instant response thanking me for my interest and providing me a free license to use here at work (educational). That’s freaking AWESOME and greatly appreciated and further motivates me to pick up a copy to use for consulting and personal projects.
So, next comes usage. Up until now, I’ve tinkered with the ‘web demo’ version of Balsamiq. I was pleased that, on moving to the desktop version, the layout, tools, and functionality remained almost identical. No lost time or learning curve.
How It Saved The Day
Last week, I was hit up by the opening situation. “Hey, we need a demo of how you’d do this… and we need it later this afternoon to present to the laywers, {big boss A}, and {big boss B}…”
For something to hit that level, I’d usually opt to bypass the Big Chief and Crayon as well as Paint and simply mock up a UI on the web. Unfortunately, for this, the time wasn’t there; however, Balsamiq was up to the task.
Rough (very rough) specs to screens, screens transformed into flow, and added into a PowerPoint for a quick presentation, acceptance by all parties involved, and hero fanfare. We’re now a week later and using those mockups to generate our UI screens—and the customer loves how well things translate without any ‘surprises’. Excellent.
UPDATE: I just pulled down the 1.6.46 version of Balsamiq and it exports to PDF. Sweet..
Features I Love
Linked Screens – A bit of a counter to one of the ‘Things I Wish It Did’ is the ability to link mockup screens together with ‘links’. It’s great for demos to provide a true flow of how things fit together.
In this example, we’re showing a simulation of the login screen. You can see the ‘link’ icon on the Login button. In a demo, clicking the Login button takes us to our next screen—just like it would (if authenticated right
) in our app.
Sticky Notes – On a few screens, showing business logic is a bit challenging. That’s where I love sticky notes comments. I’m a huge fan of whiteboarding and sticky notes and am thrilled I can bring that into my mocks. It’s also great when exporting and being able to keep track of comments and ideas as the team is working through a mock.
Easily Populated Controls – Data grids, buttons, tabs—the common elements of a user interface and all easily populated with test data. No longer do I need to draw lines in Paint or try to copy/paste screen clips out of Excel to get a decent looking grid view—a bit of text and commas and a snazzy grid appears!
Things I Wish It Did
Master Pages – Most UI layouts have the same headers/footers. You can easily reproduce this by ‘cloning’ the current mockup; however, when the customer walks in and wants to move the logo from the left side to the right side, you now have 10… 20… 100 individual screens to move it on. I’d love to be able to designate a screen as the ‘parent’.
… wow, that’s about all I can come up with!
Comic Sans Makes Me Cry… and How to Fix it
One thing that really threw me about Mockups was the fact that it used Comic Sans. Seriously? Thankfully, I’m not the first to ask this and they’ve provided a stellar walkthrough on how to use whatever font you desire.
My configuration file looks like:
<config>
<fontFace>Segoe UI</fontFace>
<rememberWindowSize>true</rememberWindowSize>
<useCookies>true</useCookies>
</config>
I opted for Vista/Windows 7’s clean Segoe UI font. Having my mockups look like my scribbles on paper wasn’t that important to me. Professional earns more points than crayons on a Big Chief tablet.
Conclusions
I’ve found myself, since picking up Balsamiq Mockups, simply using it for everything. Sitting in planning meetings and sketching out reports, screens, even data flows. With a little creativity, you can sketch out almost anything. For the things you can’t, I’m ‘crayoning’ it using my Bamboo tablet and drawing out what I want–then importing it as an image. Sweet.
If you haven’t check out Balsamiq, give it a run–it’s an amazing tool.