The Power of Wireframes and Mockups

by on 08/17/10 at 8:16 pm

There are a variety of deliverables that most UX designers make before web development. They include personas, process flows, site maps, heuristic evaluations, user scenarios and content inventories. While these deliverables are fashionable in their own way, there is one set of deliverables that outshine the rest. They are wireframes & mockups.

These deliverables are the most important deliverables for the following reasons:

  • They are easy for clients to understand.
  • They realistically communicate vision and expectations.
  • They directly relate to the design.
  • They are the most actionable.
  • They create the most change & impact.
  • They allow for easy discussion & collaboration
  • They track the progress being made.

I’m always baffled when people spend so much time and effort focusing on the other deliverables that make little to no impact. Designers spend hours perfecting them, but at the end of the day when you’re finally done a few people will give your work a glance and move on with their lives. No real change or impact happens. Deliverables aren’t something to look at and put on a shelf. It’s purpose is to inspire change and action.

If you want to solve a design problem and communicate the solution effectively and efficiently, then wireframes and mockups are the way to go. They inspire change, stimulate the imagination, clarify understanding and give people something real to look forward to. No other deliverable does that as effectively.  The power of wireframes and mockups should never be overlooked no matter how trendy the other deliverables are.

Wireframes

Wireframes are like blueprints in architecture. The purpose is to communicate the order, structure, layout, navigation and organization of content, and NOT the visual aspects of the design such as imagery, color and typography. For that reason, they are often done in black and white. The emphasis of wireframes are more on content than form. These are normally done before mockups.

The Power of Wireframes and Mockups

Mockups

Mockups communicate the visual aspects of the design that wireframes don’t. These include imagery, color and typography.  When completed, you usually get a sense of what the design will look like pixel-for-pixel before it’s brought to life with programming and development.  The emphasis of mockups are more on form than content.  When the mockups are complete, they usually go to development for the necessary programming to bring them to life.

The Power of Wireframes and Mockups

Form + Content = Design

Design is the synthesis of form and content. Wireframes bring together the content, while mockups bring together the form. Together they are the potent package of design. Every great designer should know how to create both. Seeing a design evolve from wireframes to mockups is surely a great pleasure for any designer. I know it is for me.


The Power of Wireframes and Mockups The Power of Wireframes and Mockups

Author and editor-in-chief of UX Movement. Loves great web experiences and fights for the user.

8 Responses to “The Power of Wireframes and Mockups”

  1. Joshua Lay

    Aug 28th, 2010

    I agree with you anthony, but think there’s something missing.

    What about including prototypes prior (paper prototypes) or after the wireframing stage. (html + jquery, axure, fireworks, etc.)

    You mentioned about clarifying deliverables. Prototyping helps people understand how you believe something is going to work.

    A static image may not help translate your vision as something that is interactive for the client to play with.

    • anthony

      Aug 29th, 2010

      Hi Joshua,
      Paper prototypes might work internally, but when you are dealing with a client you need to excite them and show them something that closely resembles their product. The problem with axure and other clickable prototypes is that they take too long to make and provide little to no benefit. It’s an extra step that designers have to do after they design their static images. Most clients have some understanding of how different UI components work, so telling them that a button does this, or a link takes you here is not really necessary. All of that can be communicated in a static image. It may be cool to play with, but you have to always keep in mind efficiency and effectiveness, or in other words the 80/20 rule.

      • Adam Bisogno

        Jun 2nd, 2011

        I have to agree with this. However, I have had several clients who for whatever reason were unable to visualize interactive widgets or even simple dialog boxes without seeing them “execute” on click.

        For this reason I still rely on prototyping as it is more efficient than changing workflows or widgets while coding.

        Thanks

  2. Owais

    Sep 7th, 2010

    We have recently started to use Axure for wireframing with two key objectives:

    - keep the visual/cosmetic elements away from iterations\
    - focus more on flows and get those iterations done as quickly as possible

    We are not yet done, but I am simply amazed at the convenience and speed this approach has delivered. The fact that we don’t have to think about colors and fonts makes the process so much faster to iterate on (quick implementation, effective feedback).

    In my previous experience (where and content and form were not segregated), every discussion that was intended for content ended up inadvertently focusing on form.

    Thumbs up for setting this up as more and more people and organizations need to be doing this.

  3. [...] The Power of Wireframes and Mockups A short piece on the benefits of using wireframes and mockups in your design process. It also briefly discusses the differences between wireframes and mockups. [...]

  4. Andrea at ProtoShare

    Oct 29th, 2010

    Hi Anthony,
    Great post; I agree that some people underestimate the power of wireframes and mockups and I think the 7 reasons you list as to why people should use them are spot on.

    However, I also agree with @Joshua Lay on the need of prototypes as well. But this is not to say that creating something that is interactive is needed for each and every page of each and every project. That would take up a lot of valuable time. Prototype necessary areas or elements.

    If you are creating a simple website where explaining the interactions to clients is sufficient, you likely do not need to move into prototyping. However, if you are creating complex websites or web applications that may be difficult to understand in terms of text explanations, using tools like Axure, ProtoShare, or straight HTML to illustrate functionality help clients understand what you are talking about and help save headaches further down the road. Taking the time to simulate those interactions may very well be more efficient than assuming the client understands what you are referring to.

    It all boils down to your needs as the designer and your client’s needs in terms of technical knowledge and project complexity.

    Cheers,
    Andrea
    (disclosure: I work at ProtoShare)

  5. Dan Moser

    Nov 3rd, 2010

    Hi,

    Some good points were mentioned already. The thing is that you don’t necessarily have to choose between wireframing and prototyping, you can mix both things. You can end up having different fidelity degrees when presenting something to your client, this might not be bad at all.

    Of course you’re right when you say many clients have a basic understanding about how some common UI components work. Don’t waste time in it. Anyway, when moving to more complex environments, being able to show how something exactly works will save you a lot of time, work and stress.

    Another things I often hear is that “it takes too much time to create a prototype”. We put a big effort in saving this obstacle and we feel we succeded. If you’re interested, give us a try: Justinmind Prototyper.

    Cheers,
    Dan
    @Justinmind

  6. Visitor

    Apr 3rd, 2012

    From my experience – long – building a prototype is fundamental but using a tool to do it might not be the best way. Cheap tools like Axure – IMHP – are a waste of time and I can’t afford expensive tools. If you are competent developer usin the final tools to build your prototype might be the best way to go…

Leave a Comment