A low-fidelity blueprint of a webpage showing layout and structure without visual design details. Used to plan page architecture before any design work begins.
A wireframe is a low-fidelity schematic of a webpage that shows the layout, structure, and placement of elements — without color, typography, or final imagery. Think of it as the floor plan of a page: it shows where the header, hero, sections, sidebars, and footer will go, and how they'll relate to each other, before any visual design decisions are made.
Wireframes serve a critical purpose in the design process: they separate structural decisions from visual decisions. Debating whether a section should appear before or after another section is far cheaper and faster at the wireframe stage than after it's been fully designed and developed. Wireframes allow clients, designers, and developers to align on page architecture before investing in execution.
For business websites, common wireframe decisions include: how many sections to include on the homepage and in what order, whether to use a sidebar or full-width layout for blog posts, where the contact form should appear on each service page, and how the mobile navigation should function. These structural choices directly affect conversion rate and user experience.
Wireframes exist on a spectrum from rough sketches to highly detailed digital blueprints. For simple projects, a sketch on paper or a whiteboard may suffice. For complex multi-page websites or applications, wireframes are typically created in tools like Figma, Sketch, or Adobe XD, and may include annotations explaining interactive behaviors.