The 3 Best Tools for Mockups and Wireframes

I was recently asked:

What’s the best tool for wireframing?

I’ve used quite a few, including Balsamiq, Photoshop, omnigraffle, and even MS Word. I’ve come to a pretty strong opinion on the best tools for the job:

3) Balsamiq

Balsamiq is great for the simple reason that it doesn’t look great. The drag and drog search menus, drop downs, maps, and so forth all look like a hand drawn sketch.

For whatever psychological reason, this means that the customer can look at the sketch without bothering to comment on the shading, the colors, how round the corners are, etc. They focus purely on the functionality and the information architecture.

  • Can they find the button they are looking for?
  • Can they understand the information being conveyed?
As a bonus, you can link several mockups together to have a crude but clickable prototype.

2) A piece of paper

Screen shot 2011 07 12 at 2.21.29 PM 274x300 The 3 Best Tools for Mockups and Wireframes

Yep…a piece of paper.

With all the advantages of Balsamiq plus a clear price differential, a piece of paper is the clear winner. It’s easy to modify (if you have a pencil and an eraser), easy to share (take a photo if you want to share it on-line), and zero load time or dependancies.

You’re doing a wireframe. It shouldn’t be complicated. You could have drawn three in the time it took to read this blog post.

Even a terrible 2 minute sketch like my original one for startupSQUARE can convey the basics and give you a good starting point for discussion.

1) A piece of paper with multi-colored sticky notes on top

A distinct improvement on the vanilla piece of paper, sticky notes allow you to move the buttons and widgets around more easily, and if you use a big enough marker (a fine point sharpie) then you won’t draw too much detail.

That simple restriction will force you to think about the most important aspects instead of letting your sketch move quickly into a discussion of rounded corners.

Honorable Mention: Photoshop

Photoshop gets an honorable mention for being good when you need to go to a full mockup. Clever use of folders and layers will allow you to mockup what happens when you click certain buttons easily. You can even do a screencast this way and fake a whole product demo for great customer feedback and fast iteration.

P.S.: Think you’ve got a better tool than a piece of paper? Let me know.

So…what should I post next? Tweet to tell me what to write:

Show me how to test product market fit!

or

How can I do lean startup in my friggin' huge company?

7 comments

  1. Amusingly enough, I’ve actually used PowerPoint to good effect to make mockups. Creating and recreating pitch decks got me pretty well grooved with PowerPoint, and it was a natural at one point in creating some mocks. For wireframes I would go with Balsamiq or Piece of Paper 2.0, definitely.

  2. Shane says:

    I’ve used pencil before to do some wireframes, it’s an opensource prototyping tool (http://pencil.evolus.vn/en-US/Home.aspx) . Worked pretty well. The firefox addon is for firefox 3 so that’s a bit out of date but the standalone version did the job for me.

    Balsamiq looks pretty impressive though, will have to check it out.

    And it’s hard to beat a piece of paper for speed and working through ideas quickly!

  3. Pingback: 14 Roundup – 24th July 2011 | 14principles

  4. Pencil and paper always rock.
    I also found white-boards an awesome place to brainstorm on wireframes – with cohorts, colleagues, clients, etc. It proved extremely interactive and participatory [think of one lead - and five people with five differently colored pens doing a mock walk-through/mark-up across the interaction].
    It also helps in getting buy-ins from multiple stake-holders.

  5. Nathan says:

    I like to draw rather than do it electronically. Not sure why?

    But I use the stencil kit from these guys: http://www.uistencils.com/

    Very cool but make sure you get a click pencil with graphite less than 0.5mm thick as it will catch on the metal stencil.

Leave a Comment

Your email address will not be published. Required fields are marked *