What is wireframing? How to create a website wireframe and the best tools to use

What are the different types of wireframes?

Now you’re well and truly sold on the value of a wireframe, maybe it’s time to make one for yourself? Before you rush off and start designing, it’s wise to figure out which type of wireframe best suits your project. The most common types of wireframe include: 

• Low-fidelity wireframes

Low-fidelity wireframes are normally just quick, simple designs that make ideas more tangible. Low-fidelity wireframes are usually black and white sketches that focus on the ‘big picture’ of a website’s layout. UI elements are usually depicted as boxes and lines without any details.

• Mid-fidelity wireframes

A mid-fidelity wireframe is a step up from its low-fidelity counterpart. Mid-fidelity wireframes will have more detail, including accurate spacing, headlines, banners and buttons. The page designs might even be displayed in a sequence, called a wireflow, illustrating exactly how the whole website will fit together.

• High-fidelity wireframes

A high-fidelity wireframe captures the look and feel of a website in the advanced stages of the design process. Hi-fidelity wireframes go beyond the placeholders and lorem ipsum text of low-fidelity wireframes, specifying actual content, typefaces, colour schemes, image dimensions and branded elements.

• Mobile website wireframes

Much like a low-fidelity wireframe, a mobile website wireframe is normally a two-dimensional sketch that serves as a visual guide for the appearance and functionality of a mobile website. A mobile website wireframe doesn’t represent the full design, only depicting the screen layouts and key design components.

How to create a simple wireframe

Now you’ve picked the type of wireframe you’re going to create, here’s a four-step guide to help you kickstart the wireframing process:

• Step 1: Determine your website device size

The sizing of your wireframe will depend on which device you’re designing for. There are three device sizes to choose from:

• Desktops have a size of 768 pixels wide x 1366 pixels long
• Tablets have a size of 800 pixels wide x 1280 pixels long (8” tablet) and 1200 pixels wide x 1920 pixels long (10” tablet)

• Mobiles have a size of 1080 pixels wide x 1920 pixels long

Depending on the usage you’re planning for your website, you might design wireframes for all three device sizes.

• Step 2: Understand the goal of the website

At the beginning of the wireframing process, it’s crucial to define your website’s goals. Do you want to generate more traffic? Do you want users to purchase something, or download an app?

Whatever your goals are, they will guide the wireframing process at every stage. Write your goals down on sticky notes and attach them to your wireframe template. This will keep the website’s goals top of mind amongst your team.

• Step 3: Understand the user flow

Designing your user flow will help you track and plan movement within your website. The aim is to make your website as easy to navigate as possible. 

A wireflow is a hybrid document that combines a wireframe with a user flow diagram. Simply adding arrows and annotation between wireframes on a single canvas will indicate the paths a user may take while moving around in your website.

• Step 4: Know the conversion points

Building on your understanding of the user flow, it’s important to plan exactly how the user will move through the website and complete each step of the process you want them to carry out. 

You’ll need to determine which buttons, menus and links will guide the user through each step. You’re aiming to smoothly move the user through the conversion points, enabling them to easily perform the task that you set as your goal in step 2.