What is a Wireframe and Why is it Important?

Kiersten Bonifant, Web Designer at Evolve Creative Group, explains what a wireframe is and why it’s important to make one before designing a website. She’ll review three main benefits of wireframing as well as some best practices to consider. By the end of this video you’ll know what a wireframe is, what it looks like and why you should create one before designing a website. If you have any questions or feedback please leave a comment below.

Hi, I’m Kiersten Bonifant, a web designer here at Evolve Creative Group and today we’re going to be learning about wireframes and why they’re a crucial part of the web design process. 

To get started, we need to understand what is a wireframe? Basically, to simplify it, a wireframe is a sketch of your website, before any kind of design elements or development even takes place. So, to sum it up, it’s basically a visual representation of elements on a website. 

To give you an idea of what that might look like, without any colors, shading, fonts, or other design elements, you basically have your webpage and then the most important pieces outlined in boxes, shapes, colors, but only in gray-scale to keep it really simple. For example, maybe we have a logo in the top left corner, our navigation can come after that. Perhaps we have a sign up box for people to log in. Maybe there’s an image rotator for important news updates and bulletins, and maybe there’s a donate button for a call to action on this website. So, you can see that it’s very simple. It’s a dumbed down version of what the website’s going to grow to be in time. 

So, now that we know what a wireframe is and what it looks like, we need to talk about why it’s a really important part of the web design process. You should always be sure to do it before you start designing or developing. The first and most important reason that you should always wireframe is it lets you establish hierarchy of information on the page or website. What that means is that it lets you map out where the most important elements are going to go. That could be a call to action, like a donate button, or maybe it’s a sign-up form, or important information. 

To show you how users view a page whenever they arrive at it, it’s basically an F-shape pattern, which has been proven through research and eye tracking software over the years. So, when somebody arrives on a page, they start at the upper left and work their way across the webpage, going almost the full width. After that, they’ll start to work their way down the page, and then across again a little bit lower, but not as far over. So, you can see how we start to develop an F-shaped pattern. 

So, your most important elements, your calls to action, are going to want to be located somewhere in the upper left. Historically, that’s where users are looking first. Another thing it allows you to do when you’re establishing this hierarchy of information is it’s basically an outline of your website, a really simplified version of where that information is going to go. 

So the next most important aspect of wireframing is it allows you to simplify communication. What I’m talking about here is communication between you and your client. So since we basically have a stripped down, bare bones version of what your website is going to become, you don’t have to worry about your client being distracted by design elements like colors, fonts, things like that that might get in the way of seeing the functionality of the site and how a user is going to work their way through it. You don’t have to worry about that with a wireframe. There’s nothing to focus on, other than where things are located and how prominent they are on the page. 

Now the last point I want to touch on today about wireframing is that it can kind of act as a blueprint for you when you get to the design process of your project. What I mean by that is, really, if you look at this, it’s an outline. It’s similar to a blueprint that an architect might use for their new building. So, you can even, if you want to, underlay that below a Photoshop document or something like that as a point of reference for where your main objects are going to be located. Then, the styles and aesthetic of the site are up to you to decide from then on. 

So I think what we’ve establish here today is that wireframing is a really important part of the process. It’s going to be a basic visual representation of all the elements on your web site. It’s important, because it allows you to establish hierarchy of information. You want to follow that F-shape pattern that we know users are looking for information in. And, it lets you understand what are the most important parts of your web site. What do you need people to click on first? 

It simplifies communication between you and your client, which is always good for everyone involved, and it acts as a visual blueprint when you start the design portion of your process. So basically, in short, it’s going to save you a lot of time, money, and headaches to start off every design project with a wireframe.