What are low-fidelity wireframes?

Low-fidelity wireframes (also referred to as lo-fi wires) are black-and-white or grayscale designs that establish the overall structure and layout of a future product. 

Lo-fi wires are the stage of the Stride design process in which all of the previous-stage design artifacts – user personas, process flows, workflows, and storyboard sketches – come together to form an early-stage version of a recognizable product.

Low-fidelity wireframes low-level detail

To achieve the abstraction needed to focus users and teams on the design elements rather than content, lo-fi wires use Latin to populate areas of text. This allows designers to remove the potential for distraction without compromising overall layout presentation.

For that same reason, lo-fi wires do not use colors or images.

The low level of detail used when creating lo-fi wires helps teams focus on the components more important to this stage, such as which elements to include on a page and how they should be laid out.

For example, a lo-fi wireframe helps to focus the discussion on whether an area for “Reminders” is needed for that specific screen (Do we need that element?) and if the placement on the page works (Is the layout correct?).

Lo-fi wires build on the previous stage’s storyboard sketches by adding detail around what to display on a screen. This level of wireframes:

• Establishes the screen’s structure by identifying the placement for different areas of information and showing a hierarchy of elements within the layout.
• Defines the basic elements needed for a screen. More details will be added with every iteration to refine those elements.
• Shows how a user will flow through a product, stepping through the various screens to complete their objective. This informs the overall scope of the product.

In addition to establishing the product’s structure, lo-fi wires also aid in the development process. For example, they help developers identify global elements (elements present on every screen) and can begin to give your team an idea of the level of effort needed to develop a screen by showing the elements or components that will be present, as well as some of the interactions (e.g., a slide-out panel).

Lo-fi design is iteration-intensive

Because lo-fi wires establish the layout, structure, and elements (e.g., lists, images, navigation menus, logos) of the actual product, their design often goes through several iterations to ensure that the product will work as expected.

Each iteration builds on the next, soliciting and incorporating feedback with every cycle until the overall layout and structure of each screen’s design are approved, which forms the foundation for the next stage: Hi-Fidelity Wireframes. 

‍