Wireframe

A wireframe (or functional mockup) is a schematic representation of an interface in greyscale, without colour or graphic style. It represents the structure, the hierarchy of contents and the navigation logic, without dwelling on the visual appearance. It is a design and communication tool that sits between information architecture and the final graphic mockups.

They let you validate the structure of an interface and the navigation logic before investing in graphic design. By presenting them to users or stakeholders, you get feedback on the organisation of contents and the hierarchy without the visual aspect biasing judgements. They also serve as a basis for discussion between designers, developers and product managers to align on what each screen must contain.

A low-fidelity wireframe is very schematic: rectangles for images, wavy lines for text, blocks for buttons. It is created quickly (on paper or in 15 minutes in Figma) and is ideal for exploration. A high-fidelity wireframe is more precise: the labels are real, the components resemble the final components, the spacing is careful. It takes longer to produce but makes communication easier with stakeholders less used to reading schematics.

Usually the UX designer or the product designer, sometimes in collaboration with the product manager. In less specialised teams, the project manager or a developer can also produce them to frame discussions. What matters is not who produces them, but that they are validated with stakeholders before moving on to the graphic mockups. An unreviewed wireframe is a source of misunderstandings at the end of a project.

Yes, in certain cases. When a mature design system provides ready-to-use components, you can move directly from information architecture to coded components or graphic mockups. When cycles are very short (a simple feature, an interface fix), a quick sketch can be enough. Wireframes are particularly useful for complex pages or flows where several people must align before producing.