Before moving on to the concrete design of a website, there are many steps to follow. As part of a specification, zoning is a step that can help clarify the project easily and visually. Without going into details, it is in a way the ergonomic plan of the site. Discover in this article what zoning is, what it is used for, the steps to follow to do it well, how to do it and the difference between zoning and wireframe.
Zoning: definition
Zoning is simply a simplified graphical representation of the future organization of the pages of a website. We can more or less say that it is a visual diagram of the website . It lists the major elements that will be on the pages affected by zoning.
On this one, we will find a certain number of elements such as: the location of the texts, the images, the logo, the header, the footer, the menus, an overview of the different functionalities, etc…
All the part that concerns aesthetics should not be taken into account when creating the zoning. Once the zoning is finished, we can add to it the entire graphic charter of the site, but this is only a later stage.
Why zoning a website?
This model will initially allow you to organize in space all the elements that will make up your pages. This work is therefore carried out with the aim of offering the best possible experience to your users when they consult your site in the future.
It will also make it possible to optimize the various processes of the sales funnel. Perhaps your site is intended to sell products or services. In this case, you may be doing Inbound Marketing, and therefore setting up a conversion tunnel. Thanks to zoning, you will be able to start thinking concretely about this by placing the elements.
In any case, regardless of the strategy you adopt to convert your visitors into customers, zoning allows you to optimize the entire ergonomics of the site and therefore subsequently potentially increase the conversion rate.
On the scale of the project itself, the various stakeholders in the creation of the site will find their way around with this zoning. Already, you will save time on the other models that will follow. The zoning will serve as a basis for building much more detailed graphic models.
In addition, if the zoning is defined long enough in the framework of the project , different areas of expertise will be able to start working . We have just mentioned the graphic teams of course, but we can think of content writers, developers, etc. With this base, almost everyone has enough to start laying the foundations of the site.
How to make a good zoning? The plan to follow
Let’s see what are the steps to follow to achieve a zoning worthy of a professional:
- At first, you have to choose the tool with which you are going to work to do this. We have presented 3 of them to you later in the article. Each of them is radically different and corresponds to one of the various types of users.
- Before starting, you must also make sure that you have defined your tree structure upstream. It is from this that you will choose the pages to create. You will thus be able to prepare a space dedicated to each page of your tree structure. On a layout tool, use a width of 1280 or 1920 px for a desktop view and 320 px for mobile. You can look in your analytics software which are the most used resolutions on your website (as part of a redesign).
- Then all you have to do is get started. You can try to start with the most important pages of your website, like the homepage. For the graphic representation to be clear, the practice is often to use several shades of the same color to put the elements in perspective. We think first of all of shades of gray, but it is possible with more or less all colors, as long as it facilitates understanding.
- Once you have made the first page, you will be able to reuse recurring elements such as the header, the footer and why not a menu for example. all you have to do is add the necessary elements on all the pages.
There you go, it’s not more complicated than that.
What are the software or applications to manage the creation of a zoning?
Adobe Xd: the simple reference tool
The first solution that normally comes to designers’ minds is Adobe Xd. As part of the famous Adobe creative suite, Xd is one of the benchmark UI and UX tools on the market.
Despite its intended use for professionals, one can quite easily understand the features with a little patience. It will allow you to do zoning, but also all the graphic models afterwards. Ideal for working professionally, you can collaborate with your colleagues on it and even invite clients to view your work and leave comments.
Unfortunately, Adobe Xd was previously available for free, which is no longer the case. For the software alone, it will cost €11.99 per month including tax, with a 30-day free trial. It remains among the least expensive tools in the Adobe suite.
Canva: zoning online
As soon as we start talking about graphic design, it’s easy to quote Canva. Of course, Canva is not a tool dedicated to UI/UX like Adobe Xd and the possibilities are much more limited. Nevertheless, for a beginner, Canva can be an interesting alternative with its free mode .
The problem, if we compare to Xd, is that we don’t have a large worksheet to link the pages together and have an overview. In a professional setting, it’s probably not the best option to present to a client, but for a small personal project, Canva can save your life.
On paper
Yes, paper. The paper still exists and it may be suitable for some people for zoning. This method is especially for those who are much more inspired on paper. Since the zoning is an ultra-simplified model, there is no need to be a drawing professional to successfully do something.
In terms of collaborative work, paper is quite practical if everyone gathers around a table, for example.
What is the difference between wireframe and zoning?
The difference between these 2 points is actually quite simple. The zoning, as has been widely explained, is a simplified model of the site, which mainly allows you to locate the elements of the site and to have a basis for working on the ergonomics of it behind.
The wireframe is in a way the next step in the creation of the website. Nevertheless, the graphic side still has no place in this model. The goal is to give the form that all this will take. On the zoning, we just defined where all the elements were going to be. There, we give them a shape.
We then find the mockup which is in fact the interactive version of the wireframe, then the prototype which will aim to be 100% representative of the version put online.
In other words, all these similar terms can be confusing if you’re not an expert, that’s normal. However, if you are taking part in such a project, it is important to understand the differences between these types of models.
Zoning is a simplified model of your future website. This allows you to start on a good basis with regard to the design of the site.
