{"head":{"title":"What Is a Wireframe? Definition and Example | OceanLab","description":"A wireframe is a simple sketch of a screen's layout and content, without final styling. What it is for, how it differs from a prototype and mistakes.","canonical":"https://oceanlab.in/glossary/wireframe"},"crumbs":[{"name":"Home","path":"/"},{"name":"Glossary","path":"/glossary"},{"name":"wireframe","path":"/glossary/wireframe"}],"slug":"wireframe","term":"Wireframe","aka":["low fidelity mockup","lo-fi wireframe"],"category":"Running a build","short":"A simple, usually grey, sketch of a screen showing layout, content and actions, without final styling.","body":[["A wireframe shows what is on a screen and where: the heading, the list, the filters, the main button. It leaves out colour, images and final copy on purpose, so people focus on structure and flow."],["Wireframes come before a ",{"href":"/glossary/high-fidelity-prototype","text":"high fidelity prototype"},". Linking several of them together gives a low fidelity ",{"href":"/glossary/clickable-prototype","text":"clickable prototype"}," that is enough to test the flow."]],"why":["Structure problems are cheapest to fix in wireframes. Moving a section takes minutes, and nobody has grown attached to the visuals yet. They also let stakeholders and engineers agree on what each screen must do before design time is spent on polish."],"example":["For an admin dashboard, the team wireframes the orders screen three ways: one long table, a table with a side panel, and cards. In review, operations staff pick the side panel because they need order details without losing their place in the list."],"inBuild":["Wireframes are usually the first design output in a product build. They feed the clickable prototype, which is the first step of an OceanLab build before production code."],"mistakes":[["Making them so polished that people review colours instead of layout."],["Using lorem ipsum everywhere. Real labels and sample data show whether things fit."],["Wireframing only the main screen and skipping the flows between screens."]],"related":[{"href":"/glossary/high-fidelity-prototype","label":"High fidelity prototype","detail":"A prototype that looks almost exactly like the finished product, with final styling, real content and realistic interactions."},{"href":"/glossary/clickable-prototype","label":"Clickable prototype","detail":"A set of linked screens you can click through, built to test a design before the real software exists."},{"href":"/glossary/design-system","label":"Design system","detail":"A shared set of reusable components, styles and usage rules that designers and engineers both build screens from."},{"href":"/glossary/usability-testing","label":"Usability testing","detail":"Watching real people try to complete real tasks with a product, to find where they get stuck."}],"tools":[{"href":"/tools/project-brief-template","label":"Project brief template","detail":"Free tool"},{"href":"/tools/software-development-cost","label":"Software development cost","detail":"Free tool"}],"links":[{"href":"/case-studies","label":"Case studies","detail":"Product builds by OceanLab, by industry."},{"href":"/software","label":"Software by industry","detail":"Systems we build per industry, with guides and tools."}],"sources":[],"legal":false,"updatedAt":"2026-10-25"}