Skip to content

Wireframes

Wireframes provide essential structural & functional blueprints to guide teams through the design & development phases of a digital project.

What is a Wireframe?

A wireframe is (usually) a grayscale mock-up of the structure of a web page or app screen. They illustrate the types of information present, hierarchy and the intended functionality.

Due to their paired-back nature, wireframes help stakeholders and digital design teams focus on a product’s structure and functionality.  This means time can be saved in visual design as the structure and functionality have already been defined without the distraction of  styling, branding and interaction.

Wireframe Fidelity

Depending on their purpose/audience, wireframes vary in fidelity.

Low-fidelity

To communicate early design concepts, a wireframe may take the form of a pen/pencil sketch on paper or a whiteboard.

High-fidelity

If more technical detail is required, wireframes can be formalised into a high-fidelity format and annotated using various software e.g. Axure, Sketch, OmniGraffle etc.

Using Sketch for Wireframes

Over recent years, I’ve moved my entire wireframe development process to Sketch App. This allows me to reuse assets in later stages of a project such as a Flinto, Framer or InVision prototype.

I’ve tried to move away from lengthy annotations and creating multiple states of each page or screen in favour of prototyping. But each project has its own nuances, so sometimes it is a necessary evil.