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

University of Michigan - Ann Arbor

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

Levels of wireframing

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

Wireframing

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. 

Learn Before

Related