What Is a Wireframe for UI Design? Beginner's Guide

A wireframe is the low-fidelity skeleton of a screen. It maps where things go — navigation, content blocks, actions — without colour, type or imagery getting in the way.

Why wireframe at all?

Low-fidelity thinking saves time and money before any pixels are pushed. It's far cheaper to move a box than to redo a polished comp. Wireframes let you test structure and flow with stakeholders and users early, when changes are nearly free.

When to move on

Once the structure holds up, you layer in hierarchy, then visual design, then motion. The wireframe is the contract everyone agreed on before the expensive work starts.