--- title: "Wireframe" url: "https://www.insideuxdesign.com/en/glossar/wireframe" language: "en" description: "What is a wireframe? A plain-language explanation with an example and practical tips. Learn how to settle structure before anyone argues about colors." published: "2026-10-14T09:50:32+02:00" updated: "2026-10-14T13:00:32+02:00" --- # Wireframe A wireframe is a schematic floor plan of a page or screen. It shows which content and controls go where, deliberately without colors, fonts or images. - **Buchstabe:** W UX glossary # Wireframe A wireframe is a schematic floor plan of a page or screen. It shows which content and controls go where, deliberately without colors, fonts or images. Imagine a small carpentry business that wants a new website. At the first meeting, the design agency presents a polished draft right away, complete with photos, wood tones and a stylish typeface. The next hour is spent debating the exact shade of brown in the background. Nobody asks whether customers can quickly find the phone number and the services on offer. A wireframe would have changed that conversation. It shows only boxes, lines and placeholders, which pulls everyone’s attention to what needs settling first: what goes where, and how do people get to the next step? ## Explained simply A wireframe is the floor plan of a page or app screen. Just as an architect’s plan shows where the kitchen, bathroom and doors go before anyone talks about tiles, a wireframe shows where navigation, headings, text, images and buttons belong. It deliberately leaves out colors, fonts and photos. Images are often just a box with a cross through it. The name refers to a frame made of wire: a skeleton that shows shape and structure but has no surface yet. A wireframe captures the structure that was defined earlier in the [information architecture](https://www.insideuxdesign.com/en/glossar/information-architecture). If you want to know how to organize content before it ends up in a wireframe, read [An Introduction to Information Architecture](https://www.insideuxdesign.com/en/blog/introduction-to-information-architecture). ## Wireframe, mockup, prototype: what’s the difference? These three terms get mixed up a lot. A **wireframe** shows structure. A **mockup** shows appearance, with real colors, fonts and images, but it’s usually static. A [prototype](https://www.insideuxdesign.com/en/glossar/prototype) simulates interaction: you can click and try out flows. Link a few wireframes together so they’re clickable, and you’ve got a simple prototype. Wireframes come in different levels of detail. Low-fidelity wireframes are rough sketches, often on paper or a whiteboard. Mid-fidelity wireframes are usually digital, for example in [Figma](https://www.insideuxdesign.com/en/ressourcen/figma), using shades of gray to show emphasis and including some real copy. The Nielsen Norman Group points out that classic wireframes are good at showing page layout but poor at showing interactions and changing states in apps. That’s what *wireflows* are for: wireframes connected by arrows that show which click leads to which screen. ## An example Back to the carpentry business. Before: an attractive draft, lots of talk about colors, and the contact details buried at the bottom of the footer. After: the team starts with three quick wireframes of the homepage. In version B, the phone number and a “Request a quote” button sit right at the top, with the services below as three boxes. Talking it through with the business owner, it becomes clear right away that a section for past projects is missing. Adding it takes ten minutes. Only then does the team move on to colors and photos, and the visual design builds on a structure that has already been checked. ## In practice - **Use real content.** Replace “lorem ipsum” early with real headings and button labels. Only then can you tell whether the space and order actually work. - **Sketch several versions.** Three rough drafts in half an hour teach you more than one draft you polish for a whole day. - **Ask for the right feedback.** Ask about structure and flow, not taste. There’s time for questions about look and feel later. ## Related terms [Prototype](https://www.insideuxdesign.com/en/glossar/prototype), [Information Architecture](https://www.insideuxdesign.com/en/glossar/information-architecture), [Design System](https://www.insideuxdesign.com/en/glossar/design-system) ## Sources - [Page Laubheimer: Wireflows: A UX Deliverable for Workflows and Apps. Nielsen Norman Group, 2016](https://www.nngroup.com/articles/wireflows/) - [Interaction Design Foundation: What are Wireframes? IxDF, n.d.](https://ixdf.org/literature/topics/wireframe) ## More terms [ ### A/B Testing An A/B test is an experiment that shows two versions of a page or element at the same time to randomly split groups of visitors. It lets you decide with real data which version works better. ](https://www.insideuxdesign.com/en/glossar/a-b-testing) [ ### ARIA ARIA is a W3C standard that adds roles, states and properties to HTML. It tells screen readers what an element is and how it currently behaves. ](https://www.insideuxdesign.com/en/glossar/aria) [ ### Accessibility Accessibility means designing websites, apps and digital documents so that everyone can use them, including people with visual, hearing, motor or cognitive disabilities. ](https://www.insideuxdesign.com/en/glossar/accessibility) [ ### Affordance An affordance describes what action an object makes possible and whether people can recognize it: a button invites you to press it, a handle invites you to pull. ](https://www.insideuxdesign.com/en/glossar/affordance) [ ### Alt Text Alt text is a short text version of an image, stored in the HTML alt attribute. Screen readers read it aloud so people who can’t see the image get the same information. ](https://www.insideuxdesign.com/en/glossar/alt-text) [ ### Atomic Design Atomic Design is a method for building user interfaces from small, reusable building blocks, from single elements like buttons all the way up to complete pages. ](https://www.insideuxdesign.com/en/glossar/atomic-design) [ ### BFSG The BFSG, Germany’s Accessibility Strengthening Act, has required many companies since 28 June 2025 to make certain products and digital services, such as online shops, accessible. ](https://www.insideuxdesign.com/en/glossar/bfsg) [ ### Card Sorting Card sorting is a research method in which people sort terms written on cards into groups. It shows you how they mentally organize content, so you can plan navigation that makes sense to them. ](https://www.insideuxdesign.com/en/glossar/card-sorting) [ ### Cognitive Load Cognitive load is the mental effort it takes to understand and use an interface. The less unnecessary thinking a design demands, the easier the actual task becomes. ](https://www.insideuxdesign.com/en/glossar/cognitive-load) [ ### Color Vision Deficiency A color vision deficiency means someone has a harder time telling certain colors apart than most people. The most common type is red-green deficiency. ](https://www.insideuxdesign.com/en/glossar/color-vision-deficiency) [ ### Contextual Inquiry Contextual inquiry is a research method where you observe and interview people in their real work environment. It shows you how they actually get tasks done, not just how they describe it. ](https://www.insideuxdesign.com/en/glossar/contextual-inquiry) [ ### Contrast Ratio The contrast ratio describes how much two colors differ in brightness, such as text and background. WCAG requires at least 4.5:1 for normal text. ](https://www.insideuxdesign.com/en/glossar/contrast-ratio)