Wireframe
A wireframe shows the structure of a page or screen. It supports discussion of content placement without proving a complete interaction flow.
A wireframe is a simplified representation of the structure of a page or screen. It can show where navigation, content and controls sit and which information should stand out. Visual detail may deliberately remain limited.
What the sketch can support
In a hypothetical customer portal, a wireframe places document search above the results list. The intended arrangement of information can then be discussed before the details are designed.
The drawing alone does not show how search responds or where a link leads. Additional descriptions, a flow or an interactive prototype are needed for that. A wireframe is also neither a technical specification for every screen size nor evidence that the interface is understandable.
Sources
Related terms
- User interfaceA user interface enables interaction with a system. Labels, feedback and responses to actions matter alongside the visual layout.
- PrototypeA prototype makes a design testable against a specific question. Its form and scope follow the uncertainty that needs to be resolved.
- Interactive prototypeAn interactive prototype responds to selected actions. It can reveal a path through an interface without implementing the real processing behind it.
- Focus orderFocus order determines the route through focusable elements. It should preserve meaning and operability, including during dynamic changes.
- Keyboard trapA keyboard trap leaves keyboard users stuck within a region. Deliberately containing focus in a dialog needs a keyboard-operable exit.
- Skip linkA skip link bypasses repeated navigation and leads to the main content. The destination must also work for subsequent keyboard navigation.
Articles on this topic
Design & UX with ASES
User experience, interfaces and brand presence