What Is a Wireframe? 7 Reasons Why Wireframing Is Important In Web Design

Share This
Nick Haas
Share

Recently, I have been in a few meetings where we are working on developing a website. In these meetings, it has been suggested that we skip the wireframe stage and roll right into what the site is going to look like, the design.

This kind of thinking stemmed from the notion that the client would not understand what wireframes are and that jumping into design would get us one step closer to launch. This suggestion is a bad one.

First, let’s back up and talk about what a wireframe is. For those looking to build a website of any size or shape, wireframes are the foundation on which to begin building. Wireframing usually comes after the site architecture has been determined by a site map or flow chart of the web-site’s pages and before the creative design phase.

What is a wireframe? 

  • Wireframes are simple black and white layouts that outline the specific size and placement of page elements, site features, conversion areas and navigation for your website.
  • They are devoid of color, font choices, logos or any real design elements that take away from purely focusing on a site’s structure.
  • We often say that they are much like a blue print to a home, where you can easily see the structural placement of your plumbing, electrical and other structural elements without any interior design treatments.

Here is an example of what a wireframe looks like:

wireframe 1

Simply overlooking this step in order to get to the look and feel is a huge mistake that would prove disastrous for any website or any contractor building a home. To reinforce the importance of this phase in a web process, I have outlined seven extremely important reasons on why you need to wireframe.

1. Wireframes display site architecture visually

A sitemap can be a bit abstract, especially ones that are very large. Taking the sitemap to wireframe starts the first real concrete visual process for a project. Wireframes turn the abstract nature of a flow chart into something real and tangible without distractions. This step ensures that all parties are on the same page.

2. Wireframes allow for clarification of website features

In many instances, clients may not understand what you mean when you say “hero image,” “google map integration,” “product filtering,” “light boxes” and hundreds of other types of features. Wireframing specific project features on a website provides a clear communication to a client how these features will function, where they will live on the specific page and how useful they might actually be.

Sometimes you may decide to take out a feature once it is wireframed due to the fact that it just does’t work with what your site’s goals are. Seeing the features without any creative influence really allows a client to focus on other equally important aspects of the project and clarifies any expectations about how features will be executed.

3. Wireframes push usability to the forefront

This is the one of the most important points of the entire wireframing process. Creating wireframes pushes usability to the forefront in showcasing page layouts at their core.

It forces everyone to look objectively at a website’s ease of use, conversion paths, naming of links, navigation placement and feature placement. Wireframes can point out flaws in your site architecture or how a specific feature may work. And this is a great thing.

4. Wireframes identify ease of updates

For clients who purchase a content managed website, this point is especially important. A wireframe will immediately identify how well your site will handle content growth.

For example, if you only have ten products offered right now, but in six months you may have 100, you will want your website to accommodate this growth without impact to the website design, site architecture or usability. Wireframes will identify these important areas of content growth.

5. Wireframes help make the design process iterative

Instead of trying to combine the functionality/layout and creative/branding aspects of the website in one step, wireframes ensure that these elements are taken in one at a time. This allows clients (and other team members) to provide feedback earlier in the process.

Skipping wireframes delays this feedback and increases the costs of making changes because full design mock-ups must be reworked, not just simplified wireframes.

6. Wireframes save time on the entire project

Wireframing saves time in a multitude of ways.

  • Your designs are more calculated.
  • Your development team understands what they are building.
  • Content creation becomes much clearer.
  • You avoid hacks later on in the process.

Everyone from the web team, the agency and client are all on the same page about what the website is supposed to do and how it is supposed to function.

7. Experience shows it works

Building a website is a process. Wireframing is one of those parts of the web process that should not be skipped, just as you wouldn’t build a house without a blueprint, or live in it without decoration. Each step has an important place in a larger process.

Here are some additional articles on this topic:

Share This

What are your thoughts?

Comments (10)
  • Nick, I stumbled upon this post and it’s a great read. I would add, however, that in many cases, #2 will often need to be taken a step further. For some of the more complex interactions where clients don’t understand the terms used (eg.dynamic slide show), they not only need to see what a slide show is, but also experience how it works to be able to give proper feedback.

    You may have alluded to this, but I feel it’s important to emphasize that particular elements, like a slide show, often need to be prototyped – given interactivity to explain their functionality.

    People truly are able to save time and money by wireframing and prototyping in early stages of development. The key is to communicate these phases with the client, not become too invested in your wireframes, and only prototype the areas that need further clarification.

    I hope you were able to save the process with your team!

    • Andrea, you are absolutely right in taking these interactions a step further for certain features. It many cases it saves even more time and really clarifies the interactions for all parties. Appreciate the read and comment!

  • I agree with everything, I myself started wireframing. What you realize is, the more you wireframe, the better it is you not skip it. Wireframing costs time up front, but saves you time later on. A product should not be built without a blueprint in most cases.

    I enjoy wireframing because it allows me to hone in on user goals and tasks within the app, and usability. Wireframing is also fun, quick, and allows me to toy without ideas (unlike redesigning a mockup, which is time intensive).

    Even though wireframing is just a part of the process, it really allows you to see the bigger picture and this is what I love most. I focus on the structure, the layout, the functionality, and call to action links. You need solid information and a good plan to make a good website, a website is MUCH more than pretty css and gradients. 🙂

  • *with ideas

  • totally agree on everything except one minor point – we find it really useful to include a colour in addtion to black and white to denote links/calls to action. this helps clients or internal teams looking at the wireframed pages to better understand the paths around the site

  • Nick,

    Thank you so much for writing this article. I see the great value of wireframing. I have paid the price of not using it and not having a process in place. Andrea, thank you for your input, I find it very valuable.

    Kudos!

  • I’m not sold on Wire frames at all I’m afraid. I’ve looked at it over and over during my many years designing and developing websites, yet I’ve never seen the value in it for the amount of extra time involved.

    I agree with everyone that correct and thorough planning is the key. This is exactly why I don’t find myself having to use wire frames.

    The concept we seek approval for has very little to do with the functionality, as this has already been discussed, planned and determined. The concept provides an overview of the website look and feel including fonts, colours etc.

    We add a logo, slider image, social media icons into our concept, and the client can view the provided concept in their website browser at full size also.

    Amendments are made with ease, and we can go directly onto developing the website once the concept has been approved.

    We can even use our graphics from the concept as required for the live website.

    Our website concept shows everything included in any wire frame, plus a whole lot more with very little additional time spent. Overall this saves us allot of time and trouble.

    I feel like I’m missing something here?

  • ” Pushes usability to the forefront” is important and often overlooked. As a developer for many years I have neglected usability too many times to my own peril. These are are good conversation starters.

  • Hi Nick,

    This is very good post to learn something new. I am learning designing and gaining knowledge in HTML/HTML5, CSS, Bootstrap. I hope you will also write on these topics as well.

    Thanks
    Mark

  • Greatness! I was looking for some brief explanations about wireframing and this sums it up nicely. Thanks Nick! I’m finding wireframing particularly helpful when trying to workout an application onboarding process to identify ways to get newbies to complete extended user account information and making the “stickiness” on the homepage.

 
Join over 16,000 people who receive bi-weekly web marketing tips.
Share This