A wireframe is a simple, usually digital preview of a possible interface or visualization. It deliberately avoids finished-looking details: basic fonts and no color keep attention on whether the layout can do its job. section 8.3.3
Use wireframes after rough sketches to compare structure without laboring over tiny chart marks or polish. They make crowded choices easier to spot, help narrow competing layouts, and provide something concrete for stakeholder feedback before building. section 8.3.3 section 9.2.2
Choosing a calmer dashboard
A housekeeping dashboard began with many bar-chart combinations, but the wireframe made the problem plain: a dense field of bar graphs was overwhelming. A calendar view plus line charts became the preferred direction, while legends could wait until later. section 8.3.3 section 8.3.3
Keep a wireframe useful by treating it as a question, not a miniature finished product:
- Strip out color and refined typography so reviewers judge purpose and structure rather than decoration. section 8.3.3
- Put competing layouts side by side when a sketch leaves too many possibilities open. section 8.3.3
- Seek a stakeholder’s go-ahead on the selected direction before committing to the build. section 8.3.3
- Treat a client-provided wireframe as evidence to examine, even when its layout seems suboptimal; raise concerns tactfully and test a clearer alternative when possible. section 9.2.2
Figure 8.6 Sure enough in a surprise to no one, a zillion bar graphs (on the left) are overwhelming and busy. Mariette and I decided to go with the concept on the right instead, with a calendar view showing stayovers, check-ins, and checkouts (with symbols to indicate whether a night was fully or almost fully booked), and a line chart showing adults and children by room type (legends to be decided later).
Compare the two dashboard wireframes: the crowded bar-chart layout exposes visual overload, while the calendar-and-line-chart alternative clarifies a more focused structure. section 8.3.3
Wireframes can lead into progressively higher-fidelity mockups, though practical timelines may stop after adding enough color to agree on a palette. Tools such as Figma can carry the same design forward from wireframing to interactive prototypes. section 8.3.3 section 1.5.4
