What Wireframe means
Wireframes use grey boxes and placeholder text to agree what goes where, without debating colours or images too early.
They make changes cheap: moving a box in a wireframe takes seconds, while changing finished code takes hours.
Web Development
Wireframe
A wireframe is a simple, low-detail layout of a page showing structure and content placement before visual design or code begins.
Example
Before designing a new home page, the team wireframes the order of sections and agrees the main call to action with the client.
Why it matters
Settling structure first avoids expensive redesigns and keeps the project focused on what the page needs to achieve.
Keep learning
Related terms.
- UX designUX design shapes how easy and pleasant a product is to use, from page structure and navigation to forms, based on real users' needs.
- UI designUI design is the visual layer of a product: layout, typography, colour, buttons, and icons, designed to be clear, consistent, and on brand.
- Landing pageA landing page is a web page built for one campaign and one action, where visitors arrive after clicking an ad, email, or link.
Web Development
Want this donefor your business?
Tell us what you are trying to achieve and we will recommend the right approach, a timeline, and a quote.
Available for new projects — Replies within one business day