Wireframe
Définition
A Wireframe is the schematic, low-fidelity representation of a webpage or application. Its goal is to define and communicate the structure, information hierarchy, and basic functionality of an interface, without any graphical considerations (colors, fonts, final images).
It focuses on the following key elements:
- Content: Determining the reserved placements for titles, paragraphs, and media.
- Structure: Defining the arrangement of content blocks, headers, footers, and navigation.
- Interaction: Identifying the main Calls-to-Action (CTAs), form fields, and navigation mechanisms.
The use of Wireframes early in the project saves significant time and resources, as it is easy and inexpensive to modify the structure at this stage. Moreover, its low-fidelity nature encourages teams to quickly generate a wide variety of ideas (iterate) before moving on to interactive Prototypes.
Exemple
Imagine you are building a new house. The Wireframe is not the interior decoration (the colors or the furniture), but the simple drawing in pencil that shows: "The kitchen will be here," "The load-bearing wall will be there," and "This door will lead to the terrace". It ensures that the foundation and arrangement of the rooms are logical and functional before the first brick is laid.
Outils recommandés
For wireframing, most designers today work directly in Figma, creating low-fidelity or mid-fidelity screens. Dedicated wireframing tools like Balsamiq are still used in very early-stage contexts, but are gradually being replaced by more versatile tools.
Ouvrages recommandés
Information Architecture for the Web and Beyond by Louis Rosenfeld, Peter Morville, and Jorge Arango is the foundational book on information architecture. It remains the key reference for organizing complex content and ensuring that the structure of your wireframes is clear, logical, and sustainable over time.
This is the only book presented here, as many other classic references in the field are starting to feel outdated. Practices have evolved, and both processes and tools have changed significantly.