How did you like the article?
0
How did you like the article?
0

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 visualise 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.

Wireframe vs. mock-up

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: colour, 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

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 (colour, 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 categorised 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 licence 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 version here.

Axure

Axure is a tool suitable for creating simple wireframes as well as detailed prototypes. With a very large range of functions, Axure is regarded as a professional website mock-up tool. Beginners will need a bit of time to get a good overview and become familiar with the tool’s features.

The mock-up tool offers a wide selection of ready-made elements, all of which are individually configurable. There is also the option of implementing simple actions e.g. tool tips, flyout navigation, and lightboxes. This makes Azure a good alternative to the click dummy, which was primarily used in earlier usability tests. Axure does not only have a comment function, but all explanations and footnotes can be exported later as CSV or PDF, so you have the ideal basis for a rough draft. Teamwork is also possible with the tool: several users can work on a mock-up without overwriting others’ changes. 

Axure also offers a 30-day free trial version, but the Pro, Team, and Enterprise versions come with a price tag. Axure is free for students to make use of.

Pencil

The mock-up tool, Pencil is an open source project and the only completely free desktop version in our list. Although the program is free, it still contains all the important features to create a professional mock-up. With more than 300 pre-fabricated designs, Pencil has more than the other prototyping tools introduced in this article. On the developer’s website, there are even more available if needed. In addition to many designs, diagram elements, and vector-based Clipart icons, there’s the option of creating diagrams and flow charts directly in the program window.

Despite the large range of functions, users can easily orientate themselves thanks to the simple user interface. The intuitive design and convenient drag-and-drop editor mean you become familiar with the tool in no time. By creating and linking several pages, you can create functions for future sites as well as simple procedures that can be used on them.

Pencil is a free open source tool, but the problem is that continuous development isn’t guaranteed. One look at the website shows that the tool is becoming stagnant as there have been no updates or new versions since 2013. Despite this disadvantage and less than ideal documentation, Pencil remains a good alternative to paid mock-up and wireframing tools. The free desktop application is for Windows, Mac, and Linux, and there’s an additional browser extension for Mozilla Firefox.

Moqups

Moqups is one of the most popular mock-up tools and is a pure web application. Moqups is considered a fast and effective way to create mock-ups online. When you open the HTML5 app, you find yourself directly in the work environment and can start getting to work immediately. A clear menu and structure, and a drag-and-drop function provide an easy start to the program.

The user can select appropriate elements from a selection of ready-made frames and templates, and then arrange and configure them as desired. The configuration possibilities are especially plentiful with Moqups. It’s possible to design single elements individually as well as entire mock-ups thanks to all the functions, additional features, and design options. Although the mock-up tool offers fewer ready-made elements than other similar applications, it provides many features for customisation. With Moqups it’s possible to create several pages in parallel, and link then them to each other when ready. The tool is well-suited to creating simple mock-ups and click dummies.

When it comes to the free version, users shouldn’t expect too much. Probably the biggest drawback is the lack of possibility to export created designs. In order to save mock-ups as PDF or JPG files, you have to switch to the paid version, which provides the full range of functions. There are three different packets. The basic packet allows 10 projects and 1 GB of storage space.

Mockingbird

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 categorisation, 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

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 customising 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.

Save time with mock-up and wireframe tools

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.

Apps HTML Responsive