What is a wireframe and how do I make one?

What is a wireframe and how do I make one?

The achievement of wireframe, or functional mockup, is an important step during a website creation project. It intervenes at the very beginning of the process and makes it possible to validate the ergonomics and functionalities of the future site. Also called zoning, the wireframe aims to facilitate navigation and optimize the user experience. It also serves as an intermediary support between the different people involved in the creation of the site.

> Download: The guide and templates for redesigning your website” align=”middle”/>

What is the point of a wireframe?

The wireframe represents the skeleton of a website. It defines the structure of each page and the location of the various elements such as the logo, the menu, the body of the text or the images and the footer. It is centered on the user experience and on the ergonomics of the site, the design intervening in a second step.

The main objective of the wireframe is to visualize and validate the structure of the pages of the site before its conception. It allows you to formalize expectations, collect comments from the various stakeholders and make changes before starting the graphic stage. It serves as an interface with designers and simplifies teamwork. It also has the advantage of helping participants to plan for the workload that awaits them and to better calculate the time to spend as well as the budget to devote.

The wireframe is of great interest when taking into account the problem of natural referencing. It should be designed to meet SEO needs and structured in such a way that internal navigation and content are easily optimized.

1 – Mockflow


Mockflow Online provides a comprehensive and easy-to-use editor for designing website or mobile app mockups. More than 200 icons and 70 components are available to the user.

See also  definition, role and implementation

It makes it possible to visualize the visitor’s journey and to build the site map accordingly. This software is accessible on any browser and offers, in its free version, 10 MB of storage and the possibility of having 3 co-editors per project.

Mockflow’s interface is simple to use and can be learned in no time. It allows you to create several pages in the same project, to create sitemaps or graphic guides and has a chronology manager as well as collaboration tools. Its templates can be reused on different pages and the entire zoning can be exported in PDF or presented in computer simulation for validation.

However, this online application may experience slowdowns. Another point not to be overlooked: its free version is quite limited and it is often necessary to switch to the paid version.

2 – Frame Box

Frame Box

Very easy to access, this platform is available without registration and at a relatively low price. The frame is resizable and the different components can be repositioned by a simple drag and drop.

Frame Box offers the ability to store mockups for a limited time and communicate them through unique URL links. It offers different modes: edit, preview and comment. The user can add remarks on specific areas and save them.

This is a basic tool to be favored in the context of less complex projects.

3 – Wireframe.cc


Easily usable, Wireframe.cc is a mockup tool for mobile applications and unfinished websites. Its free version gives you access to all the tools you need to design pages and create railroads in just a few clicks.

The platform also offers canvases configured for different media such as smartphone or tablet. A simple save gives access to a personalized URL to edit the document.

Wireframe.cc offers very few customizable elements or presentation or prototyping tools.

4 – Gliffy


Gliffy is an easy-to-use wireframe that works primarily with drag and drop. It offers the possibility of very simply creating diagrams, tables as well as graphs from a single dashboard. It gives a strong visual identity to the site.

This platform offers a set of professional and secure management functions that make it the ideal tool for any structure, small or large. The interface is built on the HTML 5 language and easily exploitable with the possibility of using many different shapes, arrows and icons. The diagrams can be exported in PNG format.

5 – Wirefy


Wirefy is a downloadable platform that cannot be used directly online. Created to help designers generate efficient and flexible wireframe, it allows you to directly code a site and requires mastery of HTML and CSS.

Regularly updated, Wirefy also gives the possibility of exporting its models to other platforms, like WordPress, for example.

See also  TOP 5 SEO Ranking Tools on Google (2022)

6 – Pencil

Open source wireframe, Pencil works with almost all platforms and allows you to create templates for Android and iOS. It is available as a Firefox extension where all railroads are governed in one and the same file and can be exported in PNG format. It offers different interfaces and is able to create diagrams.

This GUI tool is completely free and optimal for wireframing; however, it does not take into account the revisions and requires the establishment of a management system of the different versions. In addition, its functionality being relatively limited, it is a tool that is not very usable for large projects. Another disadvantage is that it offers very few shapes, which requires downloading other libraries available on the web.

7 – Cacoo


Cacoo is a tool for modeling website mockups or smartphone applications. Its free version only allows projects with a limited number of sheets and export is only possible in PNG format. For larger sites with a large number of users, it will be necessary to upgrade to the paid version, $ 5 per month per user, to take advantage of more complete features.

With Cacoo, it is possible to create all the types of diagrams necessary for a project with a final rendering which can be normal or with a “sketchy” impression, as if they had been made in pencil. The tool also offers the possibility of sharing work with all of its team members, discussing the project instantly in the application, directly commenting on graphics and receiving activity notifications.

This wireframe requires a little adaptation time and only allows export in PNG format. In addition, once the free trial runs out, it is no longer possible to access your work.

5 tips for making a wireframe

Once you have chosen the software adapted to the needs of the company, the realization of the wireframe can begin. To succeed in this essential step, here are some tips to follow.

Take inspiration from what exists on the web

First and foremost, it is important and necessary to understand what future users expect from a website, for example, the type of information they want to find there.

For that, nothing better than to observe what is done elsewhere. You have to take the time to analyze competitor sites or applications used regularly by designers. A simple Google search (“examples of wireframe mockups”, “wireframe images”) is also a great way to find inspiration.

It is also possible to install Wirify, which allows you to view the models of the pages of any website, or to visit sites like I ❤ Wireframe. The important thing, in this first phase, is to soak up what exists elsewhere and to better understand how to architect your own model.

See also  Job: 4 steps to follow to get one

Do not use color or very little

The wireframe makes it possible to visualize the interface of the website, its architecture as well as the different parts that make up each of its pages. The majority of these elements do not use colors and their prioritization is defined by shades of gray. Color can be distracting and should be used in a reasonable and consistent manner.

Represent all the future elements of its website

All the elements of the future website must be present on the model. Be careful, however, not to overload it with unnecessary information.

In most cases, websites have at least three sections:

  • The header, or header, located at the top of each page, usually features the company logo or any other element that identifies it.
  • The body of the page, or body, is itself generally divided into several reading levels. This is where the user will find the information he has come to seek.
  • The footer, or footer, which is found at the bottom of each page, contains more or less important information. It can also refer to social networks or other websites.

Use real content

Even if the wireframe is only a visualization of the structure of the various pages of a website, integrating real content into it gives a concrete view of what they will look like, once completed.

Putting the content in a situation in the model also makes it possible to validate the positioning of each element. The font, the size of the characters, the line spacing, the number of characters per line, which are very important elements for the user experience, also define the structure of the wireframe.

Do not add graphic elements or images

The wireframe is not meant to feature images or graphics so as not to distract attention. They are therefore generally represented by simple gray rectangles.

However, it is necessary to add the zones corresponding to the different elements of the pages, such as the access buttons to social networks, the call-to-action or the search bar. Regarding the text, it is not recommended to use lorem ipsum, but rather to integrate real text to make it clearer.

During the design of a wireframe, it is more prudent to carry out several tests, either in terms of tools or processes in order to define what will be best suited to your needs and expectations.

To go further, download this free guide which details the key steps to follow and provides you with all the necessary tools to plan and implement the redesign of your website.The essential guide to redesigning your website

Leave a Comment

Your email address will not be published.