Reviews Tools

7 useful B2B website mockup tools

Subscribe to Email Updates

Website mockup tools.jpg

We work on a number of website projects and my mission is to banish ‘lorem ipsum’ by working text into page designs before development starts.

I wanted to find a tool that would let me create website mockups quickly and try out different combinations of copy and layout. (To find out why, read my article: Want a good website, on time? Prioritise content)

Eventually, I settled on Balsamiq Mockups, which is an awesome tool. The rest of this article describes the different alternatives I considered and concludes with a detailed review of Balsamiq.

Denim

Denim - sketch-based UI design

Denim takes sketch-based approach which seemed a bit too low-fidelity for my purposes.

Protoshare

Protoshare online site prototyping

Protoshare is an online ‘Software-as-a-Service’ tool that lets you build high-fidelity, interactive site mockups in collaboration with other people, such as clients or graphic designers. At first, I thought this was the system for me. I really liked the ability to export designs to Word documents and the way that collaborators could work together on a single design. However, because it can create mockups that appear almost exactly like real sites, I felt the temptation to over-polish my mockups. Also, one of my designers refused to work with it. Being web-based it lacks that immediate responsiveness that is necessary for brainstorming. And, finally, the cost (£29/month) which I paid for several months, seemed a bit excessive for something I was using for a day a month. So, Protoshare is not for me but it is an excellent tool

Pencil

Pencil Project mockup

The Pencil Project is a free open tool that builds on the Firefox web browser. Amazingly, it turns it into a fully-featured GUI prototyping tool. It goes beyond website prototypes and lets you build all kinds of UI mockups. It includes common widgets for Windows and other OSs. It can produce pretty slick mockups and you can’t beat the price. However, I felt that it was a little too skewed towards UI prototyping than web page mockups for my purposes.

Make your site work harder with our complete guide to website marketing.

Serena Prototype Composer

Serena Prototype Composer

Whoah! Serena Prototype Composer looks awesome and it’s free but it probably best for business analysts in Accenture who are designing complex business workflows and trying to implement them in software. Not for me.

Caretta GUI Design Studio v3

Caretta GUI Design Studio v3

GUI Design Studio has lots of features for prototyping complex user interface stuff. The big draw back? Price. It costs $499 for a single-user licence.

Templatr

image

Templatr is a simple online tool that lets you build WordPress blog mockups quickly online. This could be a very useful tool for some of the projects I am working on but it requires the user to know a lot of CSS. This means it is a useful resource for WordPress designers but not really a tool for rapid mockups.

Balsamiq

Balsamiq Mockups website prototyping

At just $79, Balsamiq Mockups is the cheapest of the commercial products I looked at. There is also a free trial version which you can use to evaluate it. It plugs into Confluence, JIRA and XWiki but I use it as a standalone desktop application. There are several features that make it effective for my work:

  • When you load the program, it starts with the thing you were last working on. This is a neat time-saving feature.
  • Everything looks hand-sketched, which I didn’t like at first. However, it’s grown on me. Part of the value is that nobody is focused on making the mockup ‘look great’. It focuses attention on the copy (which is my schtick) and the layout.
  • It’s very easy to drag and drop common design elements onto the page, such as tabbed menus, calendars etc. In fact, most of the stuff you need is built in. This goes way beyond the usual buttons and boxes that most mockup tools provide.
  • There are tools to create an iPhone mockup which will come in useful later
  • You can link different page mockups together using buttons and so on
  • You can work on multiple pages at once and flip between them using Excel-like tabs
  • The Mockups To Go website has lots of downloadable mockups that you can use as a starting point for your own designs. For example, it has a Twitter and a Google mockup.You can see more examples at Balsamiq's website.
    Twitter mockup in Balsamiq Google mockup in Balsamiq

It would be nice to have a text tool that let you enter styled text without using markup. Balsamiq uses things like *asterisks* to indicate bold text. I’d prefer a little editor. But this is pretty much my only niggle.

I use Balsamiq almost daily now and I highly recommend it. It lets me concentrate on copy and layout not on technical details and yet I can share the results with designers and programmers and they can see exactly what I am trying to achieve. I can mockup a page in minutes and then tinker with it for hours. It’s painless, intuitive and responsive. It’s a bit like going back to the first Mac I had and using MacDraw and MacPaint – just straightforward and easy to use.

Make your site work harder with our complete guide to website marketing.

Matthew Stibbe

Matthew is founder and CEO of Articulate Marketing.