Tweet

7 Reasons Why Wireframing Is Important in Web Design by Nick Haas

Guest post by: Andy Crestodina

Article Overview: Recently, I have been in a few meetings where we are working on developing a web site. 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.

7 Reasons Why Wireframing Is Important in Web Design by Nick Haas

Recently, I have been in a few meetings where we are working on developing a web site. 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 web site 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.

There are 3 easy ways to describe 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 web site.

* 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.

Simply overlooking this step in order to get to the look and feel is a huge mistake that would prove disastrous for any web site 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. Displays site architecture visually

A site map can be a bit abstract, especially ones that are very large. Taking the site map 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. Allows for clarification of web site features

In many instances, clients may not understand what you mean when you say "dynamic slide show," "news feeds," "google map integration," "product filtering," "light boxes" and hundreds of other types of features. Wire framing specific project features on a web site 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. Pushes usability to the forefront

This is the one of the most important points of the entire wire framing process. Creating wireframes pushes usability to the forefront in showcasing page layouts at their core. It forces everyone to look objectively at a web site'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. Identifies ease of updates

For clients who purchase a content managed web site 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 web site to accommodate this growth without impact to the website design, site architecture or usability. Wireframes will identify these important areas of content growth.

5. Helps 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. Saves 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 web site is supposed to do and how it is supposed to function.



7. Experience shows it works

Building a web site 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.

Related Articles
  Overcoming No Response and Negative Response
  Leadership means better not bitter
  Getting My Attention
  From Student to Shoe Salesman: The Early Years of Zappos’ Tony Hsieh
  How to...launch a successful business
  Make Money Online - in Your Spare Time
  Practice Landing Your Next Client
  Tables or Table-Less Design in Website Development
  Get a Custom Logo Design and watch your Business Grow
  Create High Impact Copy
  Things to do before you hire a web design company
  All you need to do before hiring a web design company
  How to get the best web design company?
  Basic Visual Web Design Mistakes to Avoid
  4 Cool Website Design Ideas
  When Graphic Design Takes Over Web Design
  AWAI Member Mike Ervin's "$30,000 Secret" to Make Money Online This Year
  Web Design - Little Things Make a Big Difference
  Franchising is a Design-Build Program
  Ways to Design Business Cards

Article Tags: page layout, site architecture, web design, wireframes



Related Forum Posts
Re: What works for you? - Hi Yinka, I work better under pressure of deadlines when I am doing something for other people. However, I like to have the leisure to develop my own projects. The first case is what Stephen Covey calls a "Quadrant 1" activity ("Important and urgent") whereas the second case is a "Quadrant 2" activity ("Important, not urgent"). We should aim to make as much time as possible for Q2 activities so that we can develop our own projects. Easier said than done!
Re: Hey I'm new here - Hi Nick, Welcome to the forum.
Re: Hey I'm new here - Hi Nick, welcome to the forum. There is a wealth of information here to take advantage of. Good luck with your business. Tim
Re: Hey I'm new here - Hi Nick Welcome to the forum I am sure that you will find a lot of useful information here and the members are always ready to help. Looking forward to your posts. MichelleJ
Re: Top Banner Help - [quote:35xjo6uq]Good job on the banners BennyBoy![/quote:35xjo6uq] No probs:) I agree Online Marketing and Publicity Search Engine Optimization - Web Design and Programming Blogging also may be... Web Design Tutorials Looking to Hire - jobs section Interesting Articles / websites


Share this article with your friends. Fund someone's dream.

Leave a comment below or share on the left and you'll help support entrepreneurs in Africa through our partnership with Kiva. Over $50,000 raised and counting - Please keep sharing! Learn more.

Newsletter

Get advice & tips from famous business
owners, new articles by entrepreneur
experts, my latest website updates, &
special sneak peaks at what's to come!

Name:
Email:

Popular Articles

How to Conduct a B2B Marketing Content Audit

What is Give Back Marketing?

What is an Adaptive Organization

Suggestions

Email us your ideas on how to make our
website more valuable! Thank you Sharon
from Toronto Salsa Lessons / Classes for
your suggestions to make the newsletter
look like the website and profile younger
entrepreneurs like Jennifer Lopez.