Home > Everything Else, General Development, Hardware and Software, Workplace > Stop using MS Paint for your demos – Get Balsamiq Mocks!

Stop using MS Paint for your demos – Get Balsamiq Mocks!

November 25, 2009

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.

Balsamiq Mockups - Linked Screens

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.

Balsamiq Mockups - Sticky Notes

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!

Balsamiq Mockups - Grid

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.

 

  1. November 25, 2009 at 4:00 pm

    Hi David, I enjoyed reading your blog post about your experiences with Mockups. It’s a fun little tool, and we are working hard on that template issue. We have a bit of a work-around posted here, and while it’s clunky, it does the trick until we get a graceful solution in place.
    http://www.balsamiq.com/products/mockups/help#templates

    Glad to hear we are in your workflow in the public education field. Your whole community benefits, and while you might not hear it nearly often enough, thanks.

  2. December 12, 2009 at 5:37 pm

    Hey,

    If you’re looking for a slightly more polished wireframes/prototyes, you could also try FlairBuilder. It supports master pages natively and it also integrates nicely with Mockups so you can import a set of mockups into a single FlairBuilder project.

    Give it a try and let me know what you think!
    Cheers,
    Cristian

  3. January 20, 2010 at 3:32 pm

    Great stuff! I like the way you work.
    Personally I like to draft the UI on a whiteboard before I start, using http://www.MockupMagnets.com.
    Have you used these before? Check it out!

  1. No trackbacks yet.
Comments are closed.
%d bloggers like this: