A wireframe is the skeleton of a design. Boxes for images. Lines for text. Labels for buttons. No colors. No fonts. No polished visuals. Just the structure, stripped to its bones.

Wireframes come early in the design process, after sketches but before high-fidelity mockups. Their job is to answer layout questions: where does the navigation go, how many columns, what is the hierarchy. Keeping them ugly is deliberate. If a wireframe looks too finished, stakeholders start debating the shade of blue instead of whether the layout works.

What a wireframe shows

• Placement of major elements: header, nav, content, footer
• Relative size and priority of components
• Flow between screens or pages
• Interactive elements like buttons and forms

Tools like Balsamiq and Figma have made wireframing fast. Some designers still use paper and markers. The medium matters less than the thinking. A wireframe is a conversation starter. It says: here is the structure, what do you think? Changes are cheap at this stage. Once the visual design is done, moving a sidebar means redoing everything downstream. Move it in the wireframe instead.