Wireframe
UX Design
What is a Wireframe
A Wireframe is a basic visual guide that represents the skeletal framework of a website or application. It's a low-fidelity layout that outlines the specific size and placement of page elements, features, conversion areas, and navigation.
Types of Wireframes
Common variations include:
- Low-fidelity: Basic boxes and lines showing layout
- Mid-fidelity: More detailed with accurate sizing and spacing
- Annotated: Including notes explaining functionality
- Clickable: Interactive versions showing basic navigation
When to create Wireframes
Develop wireframes during early design phases, after information architecture is defined but before visual design begins. They're particularly valuable for establishing layout consensus and testing basic usability.
Benefits of Wireframes
Wireframes help teams focus on functionality without the distraction of visual design, facilitate quick iterations, identify usability issues early, and provide a foundation for detailed design work. They're essential for efficient communication between designers and stakeholders.
Move to high-fidelity designs after validating the basic layout and functionality with stakeholders and users. Ensure the fundamental structure works before investing in visual design.
Yes, create wireframes for key breakpoints to ensure your layout works across different screen sizes. Focus on how content and functionality adapt to different devices.
Wireframes are static layouts focusing on structure and content placement, while prototypes are interactive simulations that demonstrate how the interface works. Wireframes typically come before prototypes in the design process.
UX Design Terms
See more UX Design terms
Menu-Driven Interface
What is a Menu-Driven Interface A Menu-Driven Interface is a ...
Skeuomorphism
What is Skeuomorphism Skeuomorphism is a design principle whe...
Landing Page
What is a Landing Page A Landing Page is a standalone web pag...
Gestalt Principles
What are Gestalt Principles Gestalt Principles are fundamenta...
Net Promoter Score
What is Net Promoter Score Net Promoter Score (NPS) is a cust...
Customer-Centric Design
What is Customer-Centric Design Customer-Centric Design is an...