The best mock-up and wireframe tools

In the early conceptual phases of web projects, mock-ups and wireframes are valuable methods for getting your ideas down on paper. The two prototyping methods help to visualize ideas and thoughts before they are technically implemented. These tools are used for creating initial sketches and drafts, which represent ideas for the future project, and help you to further the development process.

Mock-ups and wireframes are not only used as aids during the project’s conception; they are also a good way of demonstrating your ideas and plans to your customers. First drafts are usually created with pen and paper or by using a PC editor and graphics programs such as Photoshop or Fireworks. Manual implementation isn’t usually the most efficient way to go about this however - this is where special wireframe or mock-up tools come into play.

You can learn the basics of mock-up and wireframes in our guide. What is the difference between the two prototyping methods?

When it comes to wireframes, the focus is usually on the user experience design – the optimal user experience is therefore the focus here. A wireframe creates a sketch-like description of the project and demonstrates the features and layout. It mostly shows the initial review of the concept and its feasibility.

In principle, a mock-up represents the next stage because it builds on the wireframe’s structure. Here, design elements come into play: color, typography, images, and graphic elements show the preliminary design of the planned web application. A mock-up is more detailed than a wireframe, but it is by no means a final version. Nevertheless, it is a practical way of presenting to others how you envisage the look and feel of the website.

The following prototyping tools are suitable for wireframes, mock-ups, or both, depending on the focus.

Balsamiq is one of the best-known prototyping tools on the market whose focus is wireframing. Users benefit from a large selection of basic elements. You can drag and drop elements (such as navigation elements, images, videos, forms, etc.) onto the drawing surface to create your wireframe. Formatting (color, size) the modules is also an option, as is creating your own modules. A professional wireframe can be created step by step.

With the help of a practical comments option, you can add explanations to individual elements. Balsamiq is generally considered easy to use, has a self-explanatory interface, and the way the individual elements are categorized is easy to understand. The downside is that there isn’t the option of integrating interactive elements into the prototype. Nevertheless, you are able to link several tabs to each other. The simple design of Balsamiq makes it look like it’s been drawn by hand. This results in a good overview without unnecessary details and is therefore a more suitable solution for early development phases.

The developer company, Balsamiq Studios offers two versions of the wireframing tool: a desktop application called 'Mockups 3', downloadable for Windows, Mac, and Linux, and a cloud-based web application named 'myBalsamiq'. After registering, a free trial account is available to users for 30 days. After the time is up, you have to pay license fees, with the cost depending on the number of users and projects. If you want to create wireframes only online using the web app, you can operate three active projects in the basic version.

You can find a free demo versionhere.

The prototyping tool, Mockingbird is also a pure web application and comes without local installation. It is an ideal program for beginners, but more experienced users will also find the tool useful for their advanced mock-ups.

At the start, the user selects the appropriate element from the options provided and simply moves it to the desired location using the editor’s drag-and-drop feature. A total of 90 different modules and elements are on offer. Mockingbird’s sensible design, clear, comprehensible categorization, and practical search function make it an ideal choice for many. The user can create several pages, but linking them isn’t possible.

A special feature of the mock-up tool: Mockingbird allows the use of a grid system, which is placed over all created pages. Grid systems are used on almost all modern websites. If you implement the grid at an early stage, you will save time when developing the layout later on. Mockingbird offers a free version, however most of the important features, such as saving and exporting, are only available in the paid version (as is also the case with Moqups). The basic packet includes three projects.

Wireframe.cc is a comparatively minimalist tool for creating solid, clear wireframes. This tool’s range of features is smaller than those of the other tools listed here, but this makes Wireframe.cc more suitable for a quick and easy start. Layouts can be created in a relatively short amount of time without needing a large selection of ready-made elements.

With Wireframe.cc, the user can easily configure a window in the desired shape and size. In the drop down menu that appears, you can select the appropriate element type such as slider, text field, or image element. The two different page sizes on offer allow you to create either frames for desktop or for mobile devices. The wireframe tool guides users throughout the creation process. Even when customizing elements, you choose from a list of suitable options that the tool suggests. Since the range of functions and designs is quite limited, the site’s functionality is focused on more when it comes to Wireframe.cc. Nothing should distract from the actual concept. Each wireframe you create has a URL so they can be saved and sent to others to add their own comments.

The basic version of this prototyping tool is free. In the premium version, there are some additional features for interaction, protocols, workflows, and a mandatory export, which can only be carried out after upgrading to a paid version, just like with the other listed tools. The trial phase lasts 7 days and the cost depends on the desired number of users as well as the capacity required.

In order to avoid spending an unnecessary amount of time on developing and manually implementing a design, you should consider using wireframes and mock-up tools. They ensure that you can work more efficiently during all stages of development. Not only is the first draft developed more quickly, but later on there are more options of implementing (customer) feedback more directly. Last but not least, professional prototyping tools can enable better presentation of conceptual aspects, contents, and functions, before you start tackling the design elements. Even those working in teams can benefit from the numerous features that these tools have on offer.