A Practical Wireframe Primer

In the current design atmosphere , I hear the term wireframe being thrown around a lot more than it used to be. Over the last few years, wireframing is a process that has endured a lot of misunderstanding and has been become much more widely known as a software and web design methodology. I’ve begun to notice that the concept is warping and not for the better. This twisting of the terms is making it difficult for newer designers and students to understand the real application of the process.

Wait, whats the problem?

Recently, I gave a talk at a design school and I had a few students ask me about wire-framing and their mental model of it was pretty far off base. Their concept of wireframes included design, finalized layout, and a number of aesthetic decisions to name a few of the inappropriate things they considered part of wireframes. The worst part : they didn’t even want to do it. These students just knew it was a step they were supposed to do but didn’t understand why it was so useful. They just accepted it as step in the process and breezed through it to get to the fun look and feel parts. This was troubling to me. At first, I thought it may have been an isolated incident, but more and more I have been noticing that the workplace application of the process is suffering due to a bit of incorrect and popular saturation among clients, new designers, producers, product designers, etc. Wireframing is an essential step in the web design process and it would be a shame if up-and-coming designers did not learn to love it.

Wireframes are blueprints

It interesting that designers will understand that complex structures such as buildings or cars require careful planning and architecture but then take a similar ideas for the web industry and barrel into them with little or no planning. Granted, a website is not a car, it is still a substantially complex undertaking and leaving out careful planning and structure is the recipe for a lot of wasted time, work and money. I promise I’ll get to the practical implementations but first, part of the initial battle is making sure everyone understands what a wire-frame is and what it is for.

Use the metaphor

The blueprint is my favorite metaphor for wire-frames because no person thinks of a blueprint as a rendering of what the building will look like or uses it to make design or aesthetic decisions. It is purely a map of function, priority and information. Perhaps more importantly, no sane person thinks you can a create a building or car without a blueprint. That’s a healthy attitude.

Wireframing is not…

Before you begin to start using wire-frames in practical situations you have to know and be able to explain to clients, employers and colleagues what wire-frames are NOT for:

Wireframes are NOT designs
In fact, wireframes should be completely devoid of font choices, color, pictures, logos, etc. Most people think visually and it is extremely common to think that a wire-frame is a intended to convey design. It is extremely easy for a non-designer to think or act like wireframes reflect final designs or placements. Don’t confuse the function by putting visual distractions on your wireframes. Remind them: there is little visual fidelity, wire-frames are about working through functional issues and organizing information.

Wireframes are NOT final layouts
Another common belief about wire-frames is that the designer is just going to come in and lay a skin over the top of the frame and BAM! the site is finished. It is clear by the difference in many designers that it is nearly impossible to separate the final effective layout from the aesthetic design. But, that is a different stage and it can be stifling and disastrous to try and cling to a wireframe layout.

Wireframes are NOT prototypes
There is actually quite a bit of confusion between wireframes and prototypes. Its surprising since they are pretty radically different tools in the process. Simply, wireframes are for organizing information and prototypes are for evaluating interaction. While wireframes and prototypes can have similar levels of visual fidelity to the final product they are really completely separate steps with fundamentally different objectives.

Take the time to establish the basic goals and purpose for building wire-frames with your clients and teams. It will always get you off on the right foot.

Using Wireframes

As I mentioned, I have heard from a shocking amount of novice designers and students that they do not want to wire-frame, but they know they should. A few have even told me that they don’t see how it helps them. Absolutely, there is no reason to work within a step of the process if it doesn’t serve any purpose. Fear not, wireframing is one of the most purpose driven and useful pieces of the design process.

Let’s get practical…
In an effort to fulfill my previous promise and give a springboard for production application of wireframing beyond the conceptual : I am going to detail a few main aspects and purposes of wire-frames and give practical uses and action items that I have used in successful client situations.

Pure Usability

Wire-frames are one of the most effective methods to work through usability testing and ideas. Keep in mind, we are taking about usability NOT user experience. A common mistake is to think that Usabilty = UX. It does not. But, that’s really whole other discussion for another time. However, it is important to take away that usability is simply the measure of how easy it is to use a product. Which is a measure of function not design or experience. In a final production situation, sometimes it is difficult to separate the easy of use from the other elements that are at play in the overall experience. When you chose to attack usability while its out in the open you will not be distracted by other elements.

Practical Usability Tips:

  • Walk-through a conversion path : Map out every path that a user can take. Map how many steps and how if it is difficult for the user to get to where you want them to go.
  • Test system language : Does every member of the team from developer to client understand what the terminology means without explanation?
  • Map out user tasks : Using the wire-frame, go through each step that a user needs to take to complete a task via the information only. This can expose fatal site architecture issues early.
  • Check for error cases : Wire-frames are a great way of helping designers and developers prepare all potential error cases and be ready with custom, informative and helpful error messages. When you know exactly where each error came from, you can create a check-list to help return the user to a usable recovery in each case.

Detail Site Features

More often than not, clients, managers and product developers have an extremely macro approach to the design. In short, they don’t really have a specific list of features. They are more interested in the big picture and that is really a problem for designers and especially developers. Wire-frames are an effective method of matching every problem with an actionable solution. Many times , there are simple communication issues that arise between the verbiage being thrown around about what a feature actually does. By visually exploring and explaining the features it maps out the scope of work and gets everyone on the same page. You will be surprised at all the details that might have been overlooked or simply not considered.

Practical Site Feature Tips:

  • Do a deep dive on each feature: Don’t just use a box to communicate a feature like a photo gallery or map. Dive deep and list out each element that makes that feature work and where it needs to connect to the site map. Write notes on the specific connection and exactly how and where it gets its data from. The more specific you are, the more effective the list will be.

Deep diving in wireframes

 

  • List out relative content limitations: Many designers overlook relative content limitations like text strings, amount of items, overall screen real estate , etc. No one expects exact measurements, but spending the time on wire-frames to determine the reason range and limitation of content allows you to plan for scalability. Discuss with the team and write down roughly how long a title will need to be, how many images will you have, will the content need to scale, and how much will it need to scale. You’ll thank yourself when you don’t have to go back to the drawing board in mid production. It seems superfluous, but you will be glad you have it.

Feature Limitations List

You’ll thank yourself when you don’t have to go back to the drawing board in mid production.

Visualize Architecture

It can be overwhelming and mind-boggling for some members of a team to look at a site architecture when they are well…not site architects. Especially when projects become enterprise level or simply filled with content that site map and information structure will get increasingly complex and abstracted. The architecture is the underlying structure and in and of itself is heavily conceptual. Wire-framing is the first step and beginning to connect the concept of the information to a tangible product.

Practical Architecture Tips:

  • Illustrate Navigation: A tangible place to start when visualizing architecture is to visualize the relationships between the navigation pieces as well as the tiers of navigation. Wire-frame out the top level, secondary and local navigation systems and make sure to detail how they connect to each other. Explore what methods of listing or illustration are ideal for the information detailed in the site map.

 

 

  • Visualize Steps and Exits: Many times the screen design can feel disconnected from the overall site map. To make sure that no structural paths can lead to dead-ends or trap the user : An incredibly useful exercise is to use the wire-frames to compare to the architecture map and record on each screen, how the user can exit, proceed or move backwards. I recommend using Mind-mapping software such as Freemind.

 

Conclusion

This is only small primer on how wire-frames are an essential , powerful and time saving part of the design process. The practical action tips in this article are a springboard to build a useful wire-frame step in your development process. Many designers have the tendency to dive right into designing look and feel, cool features, and graphics. Take a step back and remember that websites and software are complex ( even the simple ones). Proper planning is not just a formality but the most important step you can take. Getting friendly with wire-framing will build awesome team communication and facilitate solid, professional and well-planned projects.

 

Shawn Borsky

Shawn is a10 year battle-hardened UI Designer and user experience sherpa. Lover of coffee, and whiskey. Currently UI/UX Lead Designer at Rivet Games and design/UX writer. His website is http://theborsky.com and his twitter handle is @anthemcg.

  • Here we are again.
    If I had a penny every time IA and/or wireframes were defined online, I’d be rich.

    My only real issue with this article is point #1 under the subtitle “Wireframes are not” which states:
    Wireframes are NOT designs
    In fact, wireframes should be completely devoid of font choices, color, pictures, logos, etc. Most people think visually and it is extremely common to think that a wire-frame is a intended to convey design. It is extremely easy for a non-designer to think or act like wireframes reflect final designs or placements. Don’t confuse the function by putting visual distractions on your wireframes. Remind them: there is little visual fidelity, wire-frames are about working through functional issues and organizing information.

    This is simply not true.
    Wireframes are by their very definition design in the truest sense of the word. I think the author here is confusing the concept of art with design (or graphics with design.)

    Websters dictionary defines design as seen here: http://www.merriam-webster.com/dictionary/design

    In short, wireframes are design. (If they weren’t, what are we doing here?)
    Wireframes are not are they a graphical portfolio of some sort to show off talent.
    When we wireframe, all we are doing is designing an intended- proposed direction on which we will be building our foundation on.

    Design is:
    “Conceiving, planning & constructing a proposed, intended element for a specific purpose.”

    Examples:
    1. A chair was “designed” to withhold a medium body weight that allows the user to sit down.
    2. The car was “designed” to transport us from point A to point B over extended distances.
    3. The pencil was “designed” in such a way that it allows us to ergonomically place our hands around in order to write something down.

    It doesn’t matter what the chair, car or pencil looks like in terms of esthetics. That comes later when we want to add a graphical element to the finished product.

    Dictionary.com has 13 definitions for the word “design” and only 3 of them (points 8, 10 and 11) refer to design in artistic expression: http://dictionary.reference.com/browse/design

    Make no mistake, when we as design professionals craft our wireframes together, we are indeed designing. This is very important to understand and appreciate as many of our fellow co-workers view wireframing as sketches and just a simple step to overcome so we can move on with the project. Even more of the general viewing public do not know or appreciate the craftsmanship, intelligence and thought that goes in to designing wireframes.

    Design is not artsy-fartsy feel good graphics. I believe this is where the disconnect is with many inexperienced work professionals as they do not have a proper understanding of the creative design process.

    Two of the best and most popular examples of design is the story of the Wright brothers: http://en.wikipedia.org/wiki/Wright_brothers who designed an aircraft of sorts to fly.
    All the while displaying key components of the design process: Creativity, thought leadership, sketching, planning, constructing, etc.,… all the while designing a proposed object with an intended purpose for a certain outcome.

    This design process can also be witnessed with the inception of my second example, the automobile: http://en.wikipedia.org/wiki/Automobile#History
    Ferdinand Verbiest, Karl Benz, Henry Ford and a few others all followed and practically reiterated the design process as well.
    Again, the automobile was designed with an intended purpose for a certain task in mind. The steering wheel was designed to provide direction, the seats designed to allow drivers and passengers to sit, etc.,

    In all of this, esthetics came later, and we all know that the graphical layer is simply an eye-catching process to appeal to the buyer’s emotions in order to make the sale.

    Not to harp on the author here, I luv other components of this article which are spot-on, but IA types had better wise up to their craft and what it is that they’re producing. If we as designers don’t appreciate or understand fully what it is that we’re doing, nobody else will.

    We are not simple wire monkeys placing boxes and arrows together in the early stages of a project.

    IA types should be cutting-edge, business oriented thought-leaders who craft and design proposed intelligent schematics for a certain demographic to accomplish a certain task for a certain purpose for a certain outcome.

    Design is creation.

  • Great overview of why everyone needs to wireframe

  • Really,i still consider wireframe as software and web design methodology.Thank you for your information blog!i will always support you

  • Well said, Shawn!

    I have so many funny client, and team, stories around neglecting wireframes as essential references, but this isn’t the time or the place 🙂

    I will say that when I discovered prototyping, I left wireframing behind to achieve a hybrid wireframe/prototype approach where the wireframe starts in the prototyping software minus functionality and slowly evolves into an interactive experience as the project evolves.

    Great article and keep on spreading the good word.