Zoning, Wireframe, Mockup, and Prototype: What Is the Difference?

The terms zoning, wireframe, mockup, and prototype relate to the domains of ergonomics and UX/UI design. These terms are not synonymous, even though many believe they are. Even UX design agency sometimes mix up these terms to speak a common language with their client. However, each term corresponds to a different and distinct stage of project design. In this post, you will discover the difference between the four in question.

What Is Zoning?

Zoning is a rough plan of what the future web page will be like. Blocks are used to determine where the content and functionality will be located. This step generally takes place after the creation of a tree structure, and it is sometimes made parallel.

By defining the general organization of pages at an early stage and showing it to your client, you can avoid many misunderstandings in the future. The client can then validate or readjust the main points before you start to make a wireframe.

Blocks of content and other elements should be consistent on the page. It is not uncommon for initial wishes to be inappropriate, such as a home page to be loaded with information. It is during the zoning process that initial clarifications such as this are determined.

What Is Wireframe?

The wireframe is the logical continuation of zoning. Each block produced in the previous step is given a label: image, text, or video. This content may be just lorem ipsum because the final information is not always known at this stage of the project.

The goal is to define the organization of elements and shapes without working on the visual aspect as the graphics will intervene later. Meanwhile, designers at this stage are working on ergonomic questions. They are also making sure that they have satisfied the client’s desires in the previous stage.

Again, direct communication with the client is necessary to ensure the proper trajectory of the project. The wireframe, as a useful communication tool, helps clients express their wishes clearly. Above all, it prevents the team from proceeding to the production stage with incomplete or poorly defined requirements. Lack of interaction with the client at this stage may result in increased costs on the final project because there will be the need to introduce changes.

The validated wireframes serve as a basis for web designers or application UX/UI designers to create a mockup. The organization of these elements and the elaborated navigation system are not immutable, but the employees focused on creative aspects of the project must respect the functional desires requested by the client as well as the scope of the budget allocated to the project.

What Is Mockup?

A mockup is an interface image that has been transformed into a dynamic and navigable HTML page (an operation carried out using special interface design software). This new format allows the insertion of links to particular pages. It also makes it possible to make the “form” functional to perform simulations. Thanks to the integration of technical requirements, you can now see how your final project will look and get the feel of it.

Do you need to validate the graphical appearance of a site or an app with the client? Of course, it is always better to check one more time. However, at this stage, your job is close to the end. If the communication were efficient enough in the previous steps, there would be no need to introduce global changes to the mockup.

The mockup almost looks and feels like the final product. That is why some clients, especially start-ups or medium-sized companies, often take a break here. They take the mockup and show it to potential sponsors or clients to collect funds to further develop the product.

The border between a wireframe and a mockup is rather thin. A wireframe in HTML format will be a mockup as soon as its interface is interactive. This video will give you additional information to better understand the distinction; it presents the different stages from zoning to mockup.

What Is the Prototype?

The prototype stage is when the interfaces become functional. At this point, developers step into the game and get the backend of your app ready. Then, everything is tested to detect possible problems. This concept dates back to long before the internet when an inventor had to make sure that his creation worked as it should be before marketing it. The point is not to sell the product, but to understand what about it can be improved. However, clients can already publish products in the app store. However, it is important to keep in mind that this is more for testing purposes than anything else. The bigger your test group is, the easier it will be to notice bugs and errors and get the product to the next level.

Unlike sketches and static models, the prototype is interactive. It won’t be useful until someone shows how something should work or what it should look like. It can be the case of a website or mobile application, given a large number of features present.

The prototype can have an only experimental goal without re-use in the real project or be realized as the first version of the project in production.

Final Thoughts

Let us review one more time:

• Zoning is the process of planning where blocks of content and multimedia elements will be located in the final product.

• A wireframe is a black and white detailed layout of the site page. Here the design of the elements is planned: buttons, images, texts. Wireframe is like a construction plan, from now on, you will be guided by it when developing a site or application. It does not perform any real site functions.

• A mockup is a more refined version of the wireframe. Here, colors, images, and typography are already added. The mockup shows precisely how your application will look. The mockup is an animated model of an app, but it doesn’t perform any real functions.

• A prototype is an interactive version of the wireframe. If you click somewhere, something will happen, for example, a different screen will appear, just like on a real website. 

As you can see, zoning, wireframe, mockup, and prototype are not synonyms, somewhat different stages of an elaborated UX/UI design process. Use them in your work at the right step, and they will help you to increase the quality of your work and build better relationships with the clients.