What are wireframes all about?
The design artifacts on this page are called wireframes (sometimes called wires, mockups, or mocks).
A wireframe is a rough schematic created in the early stages of digital product design to help visualize and communicate the structure of a product or website.
The video below explains how wireframes are used through a real world example.
Why are wireframes used?
The same screen can be built in a lot of different ways, but only a few of them will get your message across correctly and result in an easy-to-use software or website.
The purpose of a wireframe is to define a skeletal layout that is easy to understand, and encourages iteration and feedback. Getting to agreement on a good interface structure is a critical part of the software design process.
Wireframes are important because doing this work now, before any code is written and before the visual design is finalized, will save you lots of time and painful adjustment work later.
Watch the short video below to learn more.
Summary:
- Wireframes let you explore solutions quickly.
- Wireframes help collaborate with others.
- Wireframes let you show your ideas visually.
The end result is that wireframes save you time and effort.
No design experience? No problem. Balsamiq helps product minds like PMs and developers sketch out ideas in minutes. Try it free.
Who is responsible for creating wireframes?
The primary reason for wireframing is to generate and communicate ideas, so making wireframes is not limited to any single role or specialization in an organization.
Here are some roles that commonly make and use wireframes:
- Founders and Business Owners use them to communicate or pitch their product or app ideas to investors or product teams.
- Product Managers and Business Analysts use wireframes to translate requirements into visual specifications for designers or developers.
- UX Designers use them to explore and refine concepts before moving to high fidelity.
- Developers use them to sketch out user interfaces when they don’t have a designer or when working directly with clients.
- Marketers and Copywriters use wireframes to explore landing page concepts and visualize the placement and size of copy on the page.
Low fidelity vs. high fidelity
The term fidelity is often used to describe wireframes and other digital product designs. In this context, fidelity means the degree of realism of a design artifact.