Wireframe
A wireframe is a simple drawing of a page's layout, in grey boxes and placeholder lines, that shows what goes where before any design or copy is final.
Updated
On this page
What it is
Wireframes leave out colour, images and real words on purpose, so the conversation stays on structure: which sections a page has, in what order, and how much room each gets. They are quick to change, which makes them a cheap place to find out a page is missing something.
A good wireframe is drawn at the real page width, desktop and phone, so the layout's proportions are honest.
In Xodia
The Plan tab's Wireframe view draws every planned page full height on light paper: the header, each section in the layout picked for it with its name, and the footer, side by side at desktop, tablet or phone width.
Your AI can also wireframe pages in your site's own framework, as grey boxes you can click through in the preview, before it builds them for real.
Read more
Related terms
- SitemapA sitemap is a map of a website's pages: for planning, a tree of pages and how they nest; for search engines, an XML file that lists every page a crawler should find.
- Design tokensDesign tokens are the named values a design system is built from, such as brand colours, font families, text sizes and spacing steps, kept in one place and used everywhere.
- Responsive designResponsive design is building one website that adapts its layout, images and type to every screen size, instead of making separate sites for phones and desktops.