Wireframe

A wireframe is a simplified, graphics-free sketch of a page or app screen that shows the placement of the most important elements: the header, navigation, content blocks, buttons and forms. It deliberately omits colours, photos and final typography in order to focus attention on structure and information hierarchy rather than aesthetics.

The role of the wireframe in the design process

A wireframe is created early, before visual design begins. It lets a team cheaply and quickly test different layout options, establish which content is most important and align on direction with the client before anyone starts refining the look. Because the sketch is rough, it is easy to change — a fix at this stage costs a fraction of what changing a finished design or code would.

Wireframes, UX and accessibility

A wireframe is a tool of user-centred design: it organises paths and flows before the UI layer exists, and in doing so directly shapes the later UX. A well-considered sketch accounts for how the layout behaves at different screen widths (the viewport) and for accessibility principles — a logical order of elements and clear interaction areas. Wireframes may be drawn by hand, in simple low-fidelity tools or in higher-detail programs, but their purpose stays the same: to agree the foundation of the layout before investing time in graphics and implementation. Treating the wireframe as a starting point for discussion with the team and client, rather than a finished product, is the key to making later design stages rest on a shared, agreed foundation.