Wireframe definition
What is a wireframe?
Wireframe in web design is the functional model when creating a website or an application. It constitutes the skeleton of the web interface, with simplified graphics, the aesthetic appearance is secondary. It evolves as the iterations progress and its objective is to ensure the functioning of the interface for the users.
Wireframes are often used to create scenarios. We illustrate a user journey to better understand the dynamics of the interface and observe its fluidity. Elements such as images, text, videos, or even forms necessary for the smooth running of the interface are also defined upstream.
The wireframe will then make it possible to physically visualize a web page or the interface of an application. It reveals the elements that will be present on the most important pages. This is an essential step in the process to guide the ergonomics of the interface. A bit like a construction plan on a building site, the wireframe will detail the project as a whole.
Thus, everything that seemed abstract to you then becomes real and tangible, without side distraction. And this is where you will be able to realize if your plan is the right one!
Why use a wireframe?
One might be tempted to think that wireframes are too time-consuming for little use. But on the contrary, it is this diagram that will help you save time! It will structure your construction process so that you don't go off in all directions and get lost. Remember that its main purpose is to structure the design of the site.
Especially since the realization of a wireframe by hand has the advantage of putting the ideas on paper. We can easily come back to it, correct it and propose other solutions. This is the time for iterations: we build, we briefly present, we improve, and so on until satisfaction. The objective is therefore not to arrive at a perfect wireframe model the first time, but to establish a simple structure, subject to modification, and this, by all!
Keep in mind that functionality and user experience should always be placed above aesthetics. At this stage, the project should not drift on irrelevant details, such as the color of the CTAs. Its goal is not to be neat, but to be clear and relevant enough to move in the right direction and help project oneself.
You must therefore take an objective look at the ease of use of your interface, the fluidity of your conversion paths, the location and usefulness of features, etc. This is also the time to detect flaws in the architecture and solve them.
Differences between wireframe, mockup, and prototype
In the world of web design, there are different terms that can sometimes be confusing by their similarities, but which nevertheless must be very distinct from each other, especially if you want to design a web interface. Namely that a wireframe is neither a zoning nor a mock-up nor a prototype. Do not panic, we will dissect all of this together.
Zoning vs Wireframe
Zoning is a rather rough sketch of what the future page of a website or mobile application might look like. Said like that, you might think it's a wireframe, but no. The objective here is to define the large areas that will visually compose the interface, which makes it possible to validate or adjust the main axes before continuing the design process. This is the first clearing step.
Mockup vs. Wireframe
The mock-up is the step that comes after that of the wireframe. We seek to go beyond the static stage in order to visualize the sequence of navigation actions. It is then possible to insert links, make forms functional, see error messages, etc... You will therefore have understood that the only difference between a mock-up and a wireframe is the interaction. From the moment the interface becomes interactive, it is a mock-up.
Prototype vs Wireframe
A wireframe cannot be considered a prototype, it is not a reliable basis to start user testing. It does not represent the finished product, but simply its main axes. To create a prototype, you must bring together all the steps carried out upstream: the skeleton of the interface, the interactions, and the graphic design. With these elements, you will be able to get a good representation of the final product.
Dans le monde du webdesign, il existe différents termes qui peuvent parfois troubler par leurs similitudes, mais qui pourtant doivent être bien distincts les uns des autres, surtout si on souhaite concevoir une interface web. À savoir qu’un wireframe n’est ni un zoning, ni un mock up et ni un prototype. Pas de panique, on va décortiquer tout cela ensemble.
How to create a wireframe?
Create wireframes by hand
To create wireframes for websites or applications, you can simply do it by hand! This is called the paper sketching phase. Take your notebook or a sheet of paper and test the layout of the different elements. It is also a step where the exchange is important to challenge your thoughts and improve the design of the wireframe. Here are some wireframe tools that can help you make wireframes by hand:
- Sketchsheets: the Sketchsheets site allows you to download templates to print and then draw easily and directly on them. There is also the software version, very easy to use, but only available on Macs.
- Crazy 8: the crazy 8 consists of drawing 8 screens in 8 minutes on an A4 sheet. The objective here is to obtain different ideas, to make comparisons, and to iterate in order to achieve the fusion of the best ideas that will suit everyone.
- Priority Guide Content: this practice consists in prioritizing only the content of the interface on paper sheets. We can then add interactions, separately, for example on post-its, to differentiate them.
Finally, many workshops exist to create your first paper wireframes. For the less seasoned, it is interesting to be able to work together and compare ideas. The goal is to challenge yourself to achieve a satisfactory result.
Wireframes design tools
You can also use wireframing tools to help you in your design process. The tool you use should depend on your preferences but also on the project. Here, we will present some of them to you, it's up to you to make your choice!
Adobe xd
Adobe xd offers us two more interesting tools: on the one hand, we have Illustrator, designed for drawing, and InDesign which allows layout. These two associated elements are therefore technically tools that will allow you to create excellent wireframes. Why should both be used? Because Illustrator does not use multiple pages and master pages, unlike InDesign. On the other hand, InDesign does not offer libraries for drawings and icons, but Illustrator does.
Balsamique
Balsamique is a specialist in the design of wireframes and mock-ups. Simple and intuitive, it gives access to a library with many elements (call to action, text block, image, etc.) easily usable by drag-and-drop. Very effective, it gives an overview of the final result and allows you to create functional models in no time! For those of you who would like to test the tool, there is a 30-day free trial.
Kits InVision
You can also turn to sites like InVision, which offer ready-made kits of wireframes. Simple, practical, and intuitive, for beginners, it is a base on which you can start. You will be able to take advantage of a library with many easily usable layouts and symbols.
Obviously, there are many other tools, like MockFlow or OmniGraffle, it's up to you to test and choose the one that suits you best!
Our tips for improving your wireframes
To design wireframes that hold up, there are a few tips and tricks to consider. The first tip that you should always keep in mind is that when designing a wireframe, the goal is to create interface architecture. We must therefore avoid adding colors (we remain sober with black and white) and irrelevant designs that could distract the eye more than anything else.
You must also prioritize the information correctly, by defining your block and text sizes (H1, H2, H3 or even H4 if necessary). Of course, you can come back to the different sizes assigned and move the elements later, the goal is to be able to project yourself into the future!
Also, try to use as little Lorem Ipsum as possible. If you have content available, use it! Placing real content will help you better project yourself and position the elements correctly. You will also have the opportunity to judge the readability of your content.
Finally, think about the responsive side! You must take into account the different media on which users will connect. You will therefore have to think about the size of your CTAs on tablets, the layout of your blocks on mobile or the size of your text on small and large screens.
Examples of wireframes
A wireframe design must have a sober interface. It generally includes basic elements such as a header and a footer, a navigation bar, areas for images, media and text (all of course hierarchical), call-to-action buttons or the thread of Ariadne. The essential elements of an interface and the functionalities that will be specific to the product being designed.
As said before, you can either take a sheet of paper, a pen and draw or design a wireframe using the various digital tools that exist. Here are some examples of creating wireframes:
But whether you choose to make your wireframe by hand or with a tool, the process will remain the same: to build an ergonomic model designed for users. This is why knowing your target is essential, as for any strategy that wants to be effective.
