Subscribe to our updates:

A Design, WordPress and Tutorials Blog.

Dedicated to helping you learn the art and science of the web.

Wireframes Are A Web Strategy Tool, Not An Aesthetics Tools

Andy Rutledge of Unit Interactive and Design View recently wrote a compelling and interesting article questioning the value of wireframes as a first deliverable for clients. While I have great respect for Andy, his company and views on design I can't help but think that he might be looking at wireframes from the wrong perspective.

His argument is that wireframes really don't communicate to clients what we may think and instead may confuse them instead. Lets be honest, wireframes do a piss poor job at conveying any sort of aesthetic value or impact. I really don't disagree with this statement or argument. If you are using wireframes as an iterative way to design from a visual perspective then yes, you might as well skip them all together and either do a complete mock-up or work on mood boards instead. Andy states:

Wireframes, however, cannot easily accommodate and convey vitally important components of the design. Gray boxes and non-contextual dummy content cannot describe…

  • how contrast impacts content hierarchy
  • the impact of brand-specific design features
  • the impact of graphic and textural elements
  • the eye/energy paths created or interrupted by color and contrast of graphic elements

I think everyone reading would agree with this statement. I know I do.

Wireframes Shouldn't Represent or Dictate Graphics

We don't evaluate a creative brief in terms of a logo's end visual. No one would look at a blueprint for a home and expect to see what the siding material would look like, or what color the house would be painted. I am sure that you would agree that you wouldn't look at a map of a park and expect to understand what it would look like to walk through the park.

Wireframes should not be used for layout or visual design. In fact if you don't think about changing layout, placement or emphasis when moving from wireframes to design you should seriously reconsider your process as a designer. Based on your approach to the design you placement, size and emphasis will change dramatically and that is OK.

Wireframes Should Represent Strategy

Wireframes rather than dictate or represent layout or aesthetics, should indicate what content needs to be on any given page as well as outline level of importance, goals and user paths. They should guide and inform the designer on business and user objectives so that they can make design and visual decisions that will best achieve those objectives.

This can easily assist in the design process as you are establishing with the client up front which elements on the page are most important and why. This will help them understand why you have as a designer put more emphasis on some elements vs others (in particular this can really help with the "make my logo bigger" issues).

If as a designer you are also creating the wireframes it will help in having you focus on the site objectives with out worrying about aesthetics and visuals. Separating this process can be valuable as moving straight into pure mockups can have a tendency in making one think in terms of visual impact rather than website effectiveness.

Example of a Detailed, Strategic Wireframe

Example of a Detailed, Strategic Wireframe

Elements of a Good Wireframe

Most designers go wrong because that they don't realize that a good wireframe should be more than just shaded boxes and filler text. The wireframe should contain more information than just a layout, it should outline what different elements are on the page, why they are there and how they tie into the objectives of the site and users. They should also clearly convey that it is not supposed to be representative of any sort of final design. A simple text disclaimer can go a long way in this case.

This means that the wireframe should contain both visual representations of content as well as supplementary information that details the approach and strategy of the page. This supplementary information can cover the primary and secondary calls to action, the stage the user is likely in of the sales funnel (AIDAS), the next logical page they will move to and so on.

When crafted this way it becomes much more apparent that the wireframe is a strategic plan not a "pre-mockup mockup" that has little or no value.

Wireframes are Incredibly Valuable

Ultimately wireframes are incredibly valuable when used correctly. I find it hard to think of a situation where it wouldn't be beneficial to start off with a plan focusing on objectives and goals rather than straight visuals. In design and website development the former informs the latter. To skip the step of planning and aligning goals to real pieces on the website would simply leave out one of the most important elements of process.

Leave a comment on Stylized Web Have some feedback? Leave a comment

16 Comments So Far

  1. The client can only see what we show them. We show the client wireframes with grey boxes and filler text to explain how the web site or the application will work. We also show the client a detailed mock up of key pages such as the home page or a product page so the client can get a sense on how the final web site will look like. That works the best.

  2. Exactly Jonas. I think the key element as you brilliantly put it, “We show the client wireframes… to explain how the web site or the application will work.”

    Wireframes are about function and approach, not about design or visuals.

  3. I recently had an argument with a client when discussing this is the first step to the website design, they want to see the final thing, and chucked this “strategy” and deep thinking as nonsense, Of course he immediately became a red flag client and I tried to separate our ways, in the end the money is needed so I will only show him designs, but the schematic was still done internally, no matter if its being presented or not, a schematic is a great way to get some ideas going, I love your suggestion of add the descriptions and identifiers for these description, I will do this myself to make sure I have included all the features that need to go into the site.

    Thanks and Regards

    Noel for
    a graphic design studio

  4. Wow Noel, you are right that is a huge indicator of a red flag client. I admire your ability to stick with it though!

    Sounds like he clearly doesn’t appreciate your expertise, process or skill. Best of luck, hopefully the wireframe helps in your process even if he doesn’t understand it.

  5. Interesting argument, I like working with wireframes myself. However I don’t always use them as sometimes they don’t fit with the type of site I’m working with.

  6. Pingback: Wireframes Are A Web Strategy Tool, Not An Aesthetics Tools | Design Newz

  7. Hey this is one of the best articles that I have read till date. I m really very much impressed with your work. It has been a pleasure reading this article of yours. I never knew that there was so much to learn in this subject. I am glad to have read your article.

  8. Great info. Thanks!

  9. i think we should contexturalize wireframes for different people.

    For ourselves, we could freely wireframe anything flashing in our minds, from raw ideas, to layouts and elements, to usage cases and processes. Wireframes are like visual recorders of our thoughts.

    For others, such as team members and clients. Wireframes are not recorders any more, instead, communication tools. So we should organize our thoughts well and make wireframes more specific and understandable, like supplementary info in this article.

  10. Very well put. I think that having more details than just the basic is a waste for both the designer and the client. You have to establish the core elements and positioning first or you’re in for a long process…

  11. great post, and i like your site to, thanks

  12. Good job on getting the point across, to many people tend to confuse the use of wireframes.

  13. Good job thanks

  14. Seek a higher voice tones and sound too tired to talk. izlanda yosunu

  15. By Webdesign posted on May 10, 2012 at 10:17 am

    Awesome… This is quite meaningful deals. Generally we’ve possibility to do mistake in that arena Wireframes are an Aesthetics Tools. Actually Wireframes are a web strategy tool that is cleared to read the post.webdesignThanks for effective dealing.

  16. dusakabin, dus teknesi, kuvet

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>