Wireframes are a great way to show your client how their site or digital project could be structured. Pencil and paper can work well, but digital tools let you add links so a client can click through the screens to easily recreate the user journeys.
Why Choose a desktop based, cross-platform, low fidelity and affordable tool?
There are a myriad of different wireframing tools available, but I will focus on three tools; Balsamiq Mockups, FlairBuilder and Pencil Project. They are all desktop based, cross-platform, low fidelity and affordable. Below I explain why I limited this investigation to these criteria:
Some of the large multinational companies we work with have tight protocols around confidentiality and where files are stored. There are some good web-based tools out there but not every client will be comfortable with a third party hosting files that relate to their projects. Choosing a desktop solution like the ones below will help give your client piece of mind over where the files about their awesome new projects ideas are being stored.
If both Macs and PCs are used in your office or when people work from home, then flexibility of a cross-platform tool will be helpful. All of the tools below are cross-platform and a single user is licenced to install them on multiple machines and operating systems.
Wireframes should allow you to quickly map out the elements on each screen without getting into the intricacies of visual design. It is important for the client to realise that deciding on the content and overall architecture should be considered first, and that it is more efficient to produce fully artworked designs afterwards.
You could wireframe with design tools such as, Illustrator, InDesign or Photoshop. The problem with these tools is that you have the power to produce fully designed pages. Even if you start with the intention of producing a set of quick low fidelity screens it is oh so easy to start adding in some correct brand colours here, some pixel perfect sizing there and maybe a few client appropriate placeholder images. Before you know it your wireframes are no longer low fidelity, and it becomes harder for the client to understand the difference between the wireframes and the artworked designs. If this happens it is harder to focus the conversation on placement of elements and user journeys as they begin to start to consider things like colours and relative text sizes too. All of the tools we consider have low fidelity options, but some encourage a quick simple wireframing approach more than others.
If you have a large budget to play with, you should probably be considering Axure amongst your options. But starting from $499 it is a significant investment for smaller companies and individuals, and the jury is out over whether it is really better than some of the options that are a fraction of its price. The two of the tools below are under $99 and the other is completely free.
Wireframing tools compared
Pros: Completely free and open source
Cons: Lack of documentation, less intuitive, high-fidelity options
Pencil project is free open source software. It is hard to find a user guide or resources to learn how to use it, so it is best for users who are happy to experiment and work things out for themselves. Some options are only available via a right click, for example creating a link to a different page or generating random or Latin text.
In order to create an interactive set of wireframes you can show a client Pencil project allows you to export as a set of HTML files with hyperlinks between pages. The option to export the whole document as a PDF wasn’t working for me, but you can export pages individually as PNGs amongst a few other options. You should consider whether the range of export options Pencil project provides will meet your needs.
Pencil project has not made a decision on whether it is low or high fidelity. It has a small library of low fidelity ‘sketchy’ graphic user interface (GUI) elements. There are also high fidelity GUI libraries for iOS, mobile iOS, Android, Windows XP. I believe that wireframing should be done at low fidelity, at least initially. Pencil Project may not have enough sketchy GUI elements to complete a reasonable sized low-fi wireframe and you may need to create some of the remaining GUI elements you need yourself. There is also the danger that because high fidelity GUI elements are available, you begin to use them. This may lead to spending too long creating an entirely high fidelity wireframe or having a disjointed combination of high and low fidelity elements that will be confusing to your client.
Price: $89 for one user, multiple machines
Pros: Encourages low-fidelity, fast, quick to use and learn
Cons: Only simple interactions available
I began to love Balsamiq Mockups soon after installing a free trial. I found it quick to learn. You can make your own reusable symbols and there is a ‘quick add’ panel where you can type the first part of the name or an element to quickly add it to your page. The quick add is clever enough to know that an element may be referred to in a variety of ways. For example to get a select list, you can type the beginning of any of these words ‘dropdown’, ‘select’, ‘combobox’ and ‘list’. If you create your own symbols these will be available to quick add too. This feature saves lots of time as you don’t have to hunt through panels or lists of elements. There are lots of Balsamiq keyboard shortcuts. One of my favourite shortcut is using ‘/’ to send the focus to the quick add ready for me to start typing.
Balsamiq have a strong belief in wireframing without demonstrating full functionality of UX elements. You can create links to other pages, but this is the limit of the interactivity. Unlike FlairBuilder, your elements like dropdown menus and tabbed areas will be static unless you create a new page to show an alternative state of the element. This sounds like a disadvantage but it forces you to keep your wireframe high level and not get bogged down in simulating interactivity. You can read a full description of why Balsamiq has limited activity on purpose.
You can toggle between viewing your pages in ‘sketch’ mode, or a straight line ‘wireframe’ mode.
Balsamiq uses squiggly lines, or blocks (wireframe mode) instead of Latin text. Alternatively, if you want real text in these elements just double click to enter the actual text you would like. The font and text size for the blocks and line of text is set once for the project. If you want to get on well with Balsamiq you need to relinquish a lot of control over the details of how things will look. As you only have a big title and a small title/subtitle. This helps you keep your wireframes low fidelity and not get caught up in engaging with things like font size that should be addressed in proper page designs created in a graphics program.
Balsamiq is smooth and responsive. It has a limited amount that it tries to do, but does this exceedingly well.
You can share your mockups by exporting an interactive PDF where hyperlinks you defined can be clicked to change pages. Alternatively, clients can download a trial of Balsamiq. After the 30-day subscription ends they can still view Mockups they just can’t edit them. Above I describe why we prefer to use desktop based wireframing software, however Balsamiq also offers cloud and google drive based solutions.
The $89 licence can be installed on different machines belonging to a single user, including both Windows and Mac.
Price: $99 for one user, multiple machines, includes all future updates
Pros: Wide range of interactions
Cons: Intermittent Bugs
FlairBuilder provides the most interactivity options of the tools considered. For example, a combo box can be clicked and it will open to reveal all items in the list, then each item can be linked to a different page. Calendar date selects and sliders are interactive, and tabbed content can be made to work without needing to create a new page version for each tab. Tree menus can be dynamically collapsed or expanded and layers can be shown or hidden when items are clicked or hovered over. Having this level of interactivity does introduce the risk of you making everything as interactive as possible, driving up production time where it might not be necessary.
Like Balsamiq reusable symbols can be created, but there is no quick add feature.
I have noticed glitches with FlairBuilder on both Mac and PC. I have learnt to save my work often with new version numbers, as if a bug is introduced and saved it can be tough to remove. Sometimes the export to PDF fails, particularly with a large number of pages. There are also options to share your wireframes by exporting a set of HTML files or uploading to the cloud.
The $99 one user licence also includes all future updates. Like Balsamiq one licence can be installed on different devices belonging to a single user, including both Windows and Mac.
I have used Flairbuilder for a number of years, the level of interactivity at the price point is great, but the occasional bugs can be infuriating and cause wasted time. In my recent trial of Balsamiq I fell in love. It is so fast, easy to use and stable. Pencil project is a workable option if you don’t have any budget, but Balsamiq will probably save you money in the long run being faster to learn and quicker to use. Balsamiq is my favourite of the three options, but to enjoy using it you must agree with their low fidelity, limited functionality mind-set.