What is Wireframe?
A wireframe is a low-fidelity layout of a screen showing structure, hierarchy and content placement without colour, typography or imagery. Grey boxes and placeholder labels are deliberate: they keep a review about whether the checkout step belongs before or after account creation, rather than about the shade of the button.
- Category
- Product & Delivery
- Also called
- Low-fidelity mockup, Wireframing
- In our work
- Product design
Wireframes sit between user flows and visual design, and most of their value comes from that position in the sequence. Moving a step in a wireframe takes minutes; moving it once the screens are designed costs a day; moving it after the feature is built costs a fortnight and someone’s patience. The cheapest place to be wrong is a grey rectangle.
The common mistake is skipping to polished mockups for the first review. Presented with typography, colour and real imagery, stakeholders comment on the surface, and a structural objection reads as criticism of the visual work, so it goes unsaid until later. Wireframes are disposable working documents; one that took a week to make beautiful has misunderstood its own purpose.
Where it comes up.
Web Accessibility Stopped Being Optional for Philippine Businesses in 2026
ArticleThe European Accessibility Act is now being enforced, turning web accessibility into a market-access and design-quality issue. What Philippine SMBs and startups need to know in 2026.
Generative UI: What It Changes for Product Design in 2026
ArticleGenerative UI is reshaping Philippine product design timelines. Here is what generative ui philippines means for designers and what AI still cannot replace.
UX/UI Design for Philippine Products: Why It's Not Just About Looking Pretty
ArticleIn the Philippines, ux ui design does more than make screens look good. See how integrating design early prevents costly rebuilds and products nobody uses.
How We Wrote Our First Scoping Document
ArticleThe software scoping document template we built after three projects ran over budget, covering what goes in, what stays out, and why every section earns its place.
Related terms.
Prototype
Product & DeliveryA prototype is a clickable simulation of a product that behaves enough like the real thing to be tested with users, while containing no working back end.
Discovery Phase
Product & DeliveryA discovery phase is a short, paid engagement that precedes a build and produces the artefacts a build needs: a written scope, user flows, a technical approach, and an estimate grounded in something other than a guess.
User Acceptance Testing (UAT)
Product & DeliveryUser acceptance testing is the stage where the people who will actually use a system verify it against the agreed requirements before launch, working through real scenarios on a staging environment.
Product Roadmap
Product & DeliveryA product roadmap is a sequenced plan of what a product will do next and why, grouped by outcome rather than by feature list.
Scoping a project?
Reading definitions because you are scoping a project? Skip ahead and just ask.