Low-fidelity wireframes are basic visual representations of the webpage and usually serve as the design’s starting point.

Low-fidelity wireframes omit any detail that could potentially be a distraction and include only simplistic images, block shapes, and mock content—such as filler text for labels and headings.

Low fidelity wireframes are useful for starting conversations, deciding on navigation layout, and mapping the user flow. In short, low-fidelity wireframes are ideal if you’ve got stakeholders or clients in the room and you want to sketch something up with a pen mid-meeting. They’re also incredibly useful for designers who have multiple product concepts and want to quickly decide which direction to go down.

Low-fidelity Wireframes

The most commonly used wireframe of the three, mid-fidelity wireframes feature more accurate representations of the layout. While they still avoid distractions such as images or typography, more detail is assigned to specific components, and features are clearly differentiated from each other.

Varying text weights might also be used to separate headings and body content. Though still black and white, designers can use different shades of grey to communicate the visual prominence of individual elements. 

Mid-Fidelity Wireframes

Finally, high-fidelity wireframes boast pixel-specific layouts. Where a low-fidelity wireframe may include pseudo-Latin text fillers and grey boxes filled in with an ‘X’ to indicate an image, high-fidelity wireframes may include actual featured images and relevant written content.

This added detail makes high-fidelity wireframes ideal for exploring and documenting complex concepts such as menu systems or interactive maps.

High-fidelity wireframes should be saved for the latter stages of the product’s design cycle

High-Fidelity Wireframes

1. Low-fidelity
2. Mid-fidelity
3. High-fidelity

University of Michigan - Ann Arbor

Wireframing is the practice of providing a clear overview of the page structure, layout, information architecture, user flow, functionality, and intended behaviors through a two-dimensional outline. 
Wireframing takes place during the exploratory phase of the product life cycle in order to test scope, collaborate, and identify requirements. 


Wireframing

https://careerfoundry.com/en/blog/ux-design/what-is-a-wireframe-guide/

- Wireframes keep the concept user-focused
- Wireframes clarify and define website features
- Wireframes are quick and cheap to create

Why wireframe?

- Sketch
- Figma 
- Balsamiq 
- invision
- Canva

Learn Before

Related

Learn After

Learn After

Related