Wireframe
Wireframe
A blueprint created when building a website or app that defines the layout of each screen
In Simple Terms
When building a website or app, it's a blueprint that defines where each element goes on the screen. Before working on colors and images, you start with a simple layout made of just lines and boxes. This lets everyone involved in the project align on what each screen will look like before development begins.
Behind the Name
The word combines 'Wire' and 'Frame.' Just like a skeleton made of wire, it represents only the basic structure of a design using lines and boxes — which is where the name comes from.
Take a Closer Look!
A wireframe is a blueprint that defines the screen layout of a website or app.
It's created before the full design phase begins, to establish the basic structure — where to place buttons and images, and what text to include.
If you jump straight into adding colors and photos, rearranging things later becomes a real headache.
That's why wireframes are intentionally kept in black and white, using only simple lines and boxes.
This way, you can focus the conversation on usability and layout — the functional structure — without getting distracted by visual polish.
Wireframes also make it easy for designers, developers, and product planners to align on a shared vision.
Everyone can look at the same blueprint and weigh in — 'This button would be easier to use here' or 'Let's move this information higher up.'
They can be sketched quickly by hand or created cleanly with dedicated tools, and teams choose whichever approach fits their needs.