In the previous chapters, we saw some examples of design roughs that visualised different layout patterns. Now that we have an understanding of the principles of layout and placing/distributing content on one axis at a time (and have been exposed to a range of semantic HTML elements by way of in-class examples and the last chapter) let’s shift our focus for the moment, to crafting our own wireframes to describe a layout and design.

<aside> <img src="/icons/list_purple.svg" alt="/icons/list_purple.svg" width="40px" />

Learning objectives

By the end of this short chapter you will:

• have a generalised understanding of the reasons that wireframes are created as part of the design process
• be familiar with levels of fidelity (or ‘truth’) in wireframeing
• learn some visual conventions for describing types of content in low-fidelity wireframes. </aside>

Wireframes and Wireframing

When thinking about how to organise/distribute your content on a page, wireframing is a formative step in the design process where you create a basic visual guide (or skeleton) of a user interface (UI). This early ‘wireframe’ is a low-fidelity representation that outlines the basic structure, layout, and functionality of your ‘digital product’.

“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.” From: https://balsamiq.com/learn/articles/what-are-wireframes/

Here’s a collection of quick dot points that argue for the usefulness in wireframing as part of the design/implementation process.

Key Elements of Wireframes

Wireframes illustrate:

• The layout and structure of pages (often without the distraction of ‘real’ content)
• The placement of content and rough scale/spacing
• Information hierarchy and organisation
• Basic functionality, navigation, and other usability cues
• Optional: General style of user interface elements.

Benefits of Wireframing

Wireframes serve multiple purposes in the design process. They function and aid as:

• A quick visualisation of a concept before embarking on/investing in detailed design
• (In functioning prototypes) Early identification of usability issues and layout problems