---
title: "Wireframe – testing structure before visuals | Sweet Lava"
description: "A wireframe sketches a screen's layout and hierarchy without colours or final type. See how it differs from mockups and why it comes first."
url: https://sweetlava.eu/en/glossary/wireframe/
lang: en
alternate_pl: https://sweetlava.eu/pl/slownik/wireframe/
---

UX & product design 

# What is Wireframe?

A wireframe is a simplified sketch of a screen showing the layout and hierarchy of elements – without colours, photos or final typography. It is used to test structure quickly, before costly visual design begins.

A wireframe's power lies in its ugliness: grey boxes and a system font keep the conversation on what matters at this stage – does the layout make sense, is anything missing, does the hierarchy lead the eye correctly. Polished visuals would invite "I don't like that green" and drown out the structural questions.

Wireframes vary in fidelity: from hand sketches (the cheapest iterations) to refined low-fi mock-ups ready for user testing.

**In the process:** brief → information architecture → wireframes → testing → visual design (UI). Each stage locks decisions you never have to revisit.

## Related services

- [ UX audits & UX/UI design → ](https://sweetlava.eu/en/services/ux-ui-ax/)

## Related terms

- [Information architecture](https://sweetlava.eu/en/glossary/information-architecture/)
- [Mockup](https://sweetlava.eu/en/glossary/mockup/)
- [Prototype](https://sweetlava.eu/en/glossary/prototype/)

## Want to know where your product loses users?

A UX audit ends with a prioritised list of fixes, each with a rationale. Scope and quote within a few days.

[ Get in touch ](https://sweetlava.eu/en/contact/?source=glossary-wireframe)