Wireframe

A wireframe is a low-fidelity representation of a digital product’s layout, structure, and functionality. It is typically devoid of detailed visuals and focuses on organizing elements like navigation, content, and interactive components. Wireframes act as blueprints, allowing designers to define the layout and flow of a product early in the design process before adding design elements like color and typography.

Wireframes are the design artifact that best facilitates structural conversations without getting distracted by aesthetics. When reviewing a wireframe, stakeholders focus on 'does this layout make sense and does it contain the right information?' rather than 'I don't like that shade of blue.' This makes wireframes the most productive tool for early-stage design reviews and for getting engineering buy-in on information architecture before visual design begins.

A GitBook documentation page shows a text-only wireframe of a checkout flow — column layouts and form fields mapped in ASCII-style notation, communicating structure and states without any visual design.