Wireframing tools

a bit more than a pencil and a piece of paper

Starting the right way

Before thinking about any technology the first step to build a website is to design in a piece of paper the structure of the information that needs to be presented on each page. The initial sketches aim to organize the information allowing optimal positioning of content such as text, images and navigation elements.

This step in the process is essential to the success of the project because creating a wireframing can help you to outline the content needs of each page and identify possible usability issues before having a designed layout when it is too late.

Obviously that all you need for that is a pencil and a sheet of paper, but you can also count on some free and a wide variety of paid tools that can assist you in developing your wireframes in a much more professional and practical way.

In this article I will present some of the free tools available on the market that I have tested and can help you to communicate your project ideas with clients and team members quickly and effectively.

1. Lumzy

It is an online functional prototyping tool that offers the ability to create wireframes and share the projects with others by simply sending them a URL or inviting them to cooperate in the project.

You can also export the wireframe into a pdf or jpg file.

It offers an extensive library of componets, intuitive design and and really easy to use tools. The sharing feature is a plus not really common in other free tools.

lumzy wireframing tool dashboard

2. Pencil project

It is a free and open-source prototyping tool that you can easily install in your computer (download available for Windows, Mac and Linux) to create your wireframes. Pencil is also built on top of Mozilla technologies and can be installed into your Firefox as an extension.

It brings buil-in shape collections including basic shapes, flowchart elements, desktop/web UI shapes, Android and iOS GUI shapes and you can also install collections created by the community.

The drawings can be exported into different types or formats such text and images files or as a web page that can be delivered to the viewers.

To summarize it is a really good free tool, quick to install and easy to use.

pencil project wireframing tool dashboard

3. Denin Project

The project is based in a research running in the University of Washington. It is a pen sketching software for designing user interfaces.

It is free and the download is available for Windows, Mac and Linux users. It supports sketching input, allows design at different refinement levels, and unifies the levels through zoom. Files can be exported as html.

The installation process was easy, but use the software is not an intuitive process. For me it was not an easy to use tool as I had to read the help documentation to try to understand how to get started. I had difficulties also for save the documents because of an unexpected error that prevented me of save the file.

denin project wireframing tool dashboard

4. Framebox

The project is based in a research running in the University of Washington. It is a pen sketching software for designing user interfaces.

It is free and the download is available for Windows, Mac and Linux users. It supports sketching input, allows design at different refinement levels, and unifies the levels through zoom. Files can be exported as html.

The installation process was easy, but it is not an ituitive easy to use tool. I had to count on the help documentation to try to understand how to get started. I could not find the way for saving and it presented some preventing to save the document.

framebox wireframing tool dashboard

Online services - free trials and paid plans

Mockflow | free account includes 1 project with limited features | only plan of $5.75 per month

Cacoo | free account includes 1 project with limited features | plans from $4.95 to $99 per month

Simulify | free account includes 1 project with limited features | plans from $9 to $99 per month

Creately | free account includes 1 project with limited features | plans from $5 to $75 per month

Iplotz | free account includes 1 project with limited features | plans from $15 to $42 per month

Jumpchart | free account includes 1 project with limited features | plans from $5 to $50 per month

© Andreia Caires