The best mock-up and wireframe tools

In the early con­cep­tu­al phases of web projects, mock-ups and wire­frames are valuable methods for getting your ideas down on paper. The two pro­to­typ­ing methods help to visualize ideas and thoughts before they are tech­ni­cal­ly im­ple­ment­ed. These tools are used for creating initial sketches and drafts, which represent ideas for the future project, and help you to further the de­vel­op­ment process.

Mock-ups and wire­frames are not only used as aids during the project’s con­cep­tion; they are also a good way of demon­strat­ing 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 im­ple­men­ta­tion 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 wire­frames in our guide. What is the dif­fer­ence between the two pro­to­typ­ing methods? When it comes to wire­frames, the focus is usually on the user ex­pe­ri­ence design – the optimal user ex­pe­ri­ence is therefore the focus here. A wireframe creates a sketch-like de­scrip­tion of the project and demon­strates the features and layout. It mostly shows the initial review of the concept and its fea­si­bil­i­ty. In principle, a mock-up rep­re­sents the next stage because it builds on the wireframe’s structure. Here, design elements come into play: color, ty­pog­ra­phy, images, and graphic elements show the pre­lim­i­nary design of the planned web ap­pli­ca­tion. A mock-up is more detailed than a wireframe, but it is by no means a final version. Nev­er­the­less, it is a practical way of pre­sent­ing to others how you envisage the look and feel of the website. The following pro­to­typ­ing tools are suitable for wire­frames, mock-ups, or both, depending on the focus.

Balsamiq is one of the best-known pro­to­typ­ing tools on the market whose focus is wire­fram­ing. Users benefit from a large selection of basic elements. You can drag and drop elements (such as nav­i­ga­tion elements, images, videos, forms, etc.) onto the drawing surface to create your wireframe. For­mat­ting (color, size) the modules is also an option, as is creating your own modules. A pro­fes­sion­al wireframe can be created step by step. With the help of a practical comments option, you can add ex­pla­na­tions to in­di­vid­ual elements. Balsamiq is generally con­sid­ered easy to use, has a self-ex­plana­to­ry interface, and the way the in­di­vid­ual elements are cat­e­go­rized is easy to un­der­stand. The downside is that there isn’t the option of in­te­grat­ing in­ter­ac­tive elements into the prototype. Nev­er­the­less, 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 un­nec­es­sary details and is therefore a more suitable solution for early de­vel­op­ment phases. The developer company, Balsamiq Studios offers two versions of the wire­fram­ing tool: a desktop ap­pli­ca­tion called 'Mockups 3', down­load­able for Windows, Mac, and Linux, and a cloud-based web ap­pli­ca­tion named 'my­Bal­samiq'. After reg­is­ter­ing, 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 wire­frames only online using the web app, you can operate three active projects in the basic version. You can find a free demo version here.

The pro­to­typ­ing tool, Mock­ing­bird is also a pure web ap­pli­ca­tion and comes without local in­stal­la­tion. It is an ideal program for beginners, but more ex­pe­ri­enced users will also find the tool useful for their advanced mock-ups. At the start, the user selects the ap­pro­pri­ate 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. Mock­ing­bird’s sensible design, clear, com­pre­hen­si­ble cat­e­go­riza­tion, 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: Mock­ing­bird 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 de­vel­op­ing the layout later on. Mock­ing­bird 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 com­par­a­tive­ly min­i­mal­ist tool for creating solid, clear wire­frames. 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 rel­a­tive­ly 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 ap­pro­pri­ate 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 through­out the creation process. Even when cus­tomiz­ing 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 func­tion­al­i­ty 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 pro­to­typ­ing tool is free. In the premium version, there are some ad­di­tion­al features for in­ter­ac­tion, 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 un­nec­es­sary amount of time on de­vel­op­ing and manually im­ple­ment­ing a design, you should consider using wire­frames and mock-up tools. They ensure that you can work more ef­fi­cient­ly during all stages of de­vel­op­ment. Not only is the first draft developed more quickly, but later on there are more options of im­ple­ment­ing (customer) feedback more directly. Last but not least, pro­fes­sion­al pro­to­typ­ing tools can enable better pre­sen­ta­tion of con­cep­tu­al 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.