Blog

Website Wireframe Beginner’s Guide

“By taking the time to create a wireframe when building or redesigning a website, you can focus on the user experience as a separate (but connected) piece of the puzzle. A wireframe enables you to test drive the page layout and evaluate user flows in order to see exactly how the new website will function and find any potential mistakes that might eventually get in the way of conversions.”

What is a website wireframe?

A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. The term wireframe is taken from other fields that use a skeletal framework to represent a 3-dimensional shape. Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. The purpose is usually driven by a business objective and a creative idea. The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together. The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content. In other words, it focuses on what a screen does, not what it looks like. Wireframes can be pencil drawings or sketches on a whiteboard, or they can be produced by means of a broad array of free or commercial software applications. Wireframes are generally created by business analysts, user experience designers, developers, visual designers, and those with expertise in interaction design, information architecture, and user research.

Wireframes focus on:

The range of functions available
The relative priorities of the information and functions
The rules for displaying certain kinds of information
The effect of different scenarios on the display

The website wireframe connects the underlying conceptual structure, or information architecture, to the surface, or visual design of the website. Wireframes help establish the functionality and the relationships between different screen templates of a website. An iterative process, creating wireframes is an effective way to make rapid prototypes of pages, while measuring the practicality of a design concept. Wireframing typically begins between “high-level structural work—like flowcharts or site maps—and screen designs.” Within the process of building a website, wireframing is where thinking becomes tangible.

Wireframes are also utilized for the prototyping of mobile sites, computer applications, or other screen-based products that involve human-computer interaction.

1. Identify the goal of the website

Before taking pen to paper to mock up a wireframe, you’ll find it helpful to understand the goal of your website. While it might seem obvious that you want to bring in as much traffic as your server can handle, think through what you want all those visitors to see and do while you’ve got their attention. Should they end their visit with a purchase? Should they download an app? Perhaps you’d like them to view a certain page before dropping off to another website entirely. Whatever your goal is, make sure your team is aligned around it so that the subsequent steps flow smoothly until you take your site to production.

2. Understand the user flow

Wireframes help you identify and evaluate user flows so that everyone on your team understands how the visitor should interact with each page on your site. During this step, you should outline each entry point a visitor could use to land on your homepage, then choose a few primary entry points to create a journey flow.

Take some time to outline your user flow in a text format before sketching a wireframe. Why? It’s much easier and faster to move steps around when they’re simply written out rather than mocked up as a wireframe.

3. Determine your website wireframe size

Your wireframes will need to vary in size depending on what screen size you’re creating it for. Mobile devices, tablets, and desktop screens will vary in size — not to mention the window on a desktop can be scaled up or down. To get the most accurate measurements for your wireframe, use pixel measurements rather than inches or points. Here are the standard sizes for each screen type:

4. Begin your website wireframe design

Now it’s time to visualize your user flow in a wireframe. If you’re using physical pen and paper, we recommend using dotted paper or grid paper to keep things in alignment. This will help you transform the physical version of your wireframe to a digital copy more easily.

If you’re starting on a digital platform, choose a tool that works best for your wireframe fidelity needs. If you’re not sure whether to use low, medium, or high fidelity, check out this comprehensive wireframe fidelity guide on the topic.

5. Determine conversion points

Once you’ve got your wireframes sketched, it’s time to decide exactly how the user should move through each step. Just because you’ve outlined the steps the user should take doesn’t mean they’re intuitive for them to flow through. At this stage, you’ll determine what buttons, hyperlinks, images, or other elements on the page will guide the reader onto the next step until they reach the end goal that we discussed earlier.