A wireframe is a simplified diagram of a screen. It shows the structure and the layout of the elements, with no colours and no visual detail.

Why start with wireframes

• Fast to produce and to change.
• Cheap — you test ideas before investing in the final design.
• Focused — you think about function, not aesthetics.

Wireframes typically use grey shapes: rectangles for images, lines for text, blocks for buttons. The aim is to validate where elements are placed and how the screen works. You can sketch them by hand on paper or build them in a tool such as Figma. By staying deliberately rough, wireframes invite honest feedback: nobody hesitates to criticise an unfinished sketch.

Key takeaway: the wireframe lays the foundations before the decoration. Moving a rectangle is easier than reworking a finished design.