Wireframe

A wireframe is a visual guide representing the skeleton or basic structure of a website or application. It is a low-fidelity sketch focused purely on the layout of elements, the hierarchy of information and functionality, deliberately leaving out graphic details such as colours, logos, specific typefaces or final images. In the web development process it serves as the bridge between the initial idea and the final visual design.

You can think of a wireframe as an architectural drawing of a house. Before you start choosing the colour of the façade, you have to know where the doors, windows and load-bearing walls will go. In the world of digital products a wireframe defines where the menu will sit, where the main button (CTA) goes and how the content on subpages will be structured.

There are two basic types:

Low-fidelity (lo-fi): simple sketches (often pen on paper) serving to capture a concept quickly.
High-fidelity (hi-fi): more detailed digital models (created in tools such as Figma or Adobe XD) that already define the dimensions and behaviour of elements precisely, while remaining black and white.

Advantages

Time and cost savings: structural changes are made far faster and more cheaply at the wireframe stage than in the final design or during development.
Focus on usability (UX): removing visual elements lets client and designer concentrate on whether the customer's path to the goal is logical and clear.
Clear communication: a wireframe is a shared communication tool for client, designer and developer — everyone knows exactly what is being built.
Defining content: it helps the client understand how much text, and in what structure, they will have to prepare for each section.
Fast testing: a wireframe makes it possible to test the logic of the interface on real users before investing in expensive graphics.

Practical example

A client wants a new clothing e-shop. Instead of having the designer immediately draw beautiful models in dresses, we prepare a wireframe. In it we discover that the “Add to basket” button disappears below the product description on mobile. Since we are at the wireframe stage, we simply move the blocks and enlarge the button. Had we discovered the flaw only on the finished site, fixing it would have meant redoing the graphics and having a developer change the code — costing many times more money and time.