Photo credit: Josh DiMauro via Flickr

I recently explained why wireframes can hurt your project. My point was that in a lot of cases, you can save time by designing in Photoshop straight away or using a HTML prototype to flesh out your app. But some people rightly pointed out that wireframes were a better tool for sharing information in a way that’s approachable to people without design or coding skills.

Although that’s a good point, in my opinion there’s a better, faster, and easier way to accomplish that goal: prioritized lists.

Wireframes: an evil force of destruction and despair?

Goals and elements

It’s an extremely simple technique, and you don’t need any special kind of software to do it. You can do it inside a plain old email, and here’s how it works. For each page, make a list of all of that page’s goals and elements.

A goal is the reason that page exists in the first place. For a homepage, it could be something like “make people sign up”. For a support page, it could be “make it easy for people to contact us”, or maybe “route people through the right support channels so they don’t need to contact us”. You goal list should generally have between 1 and 3 items. Any more than that and it means your page lacks purpose and will not be effective.

And an element is simply anything that appears on the page: buttons, navigations, taglines, forms, etc. Your element list should include between 5 and 10 items, depending on how thorough you want to be. For example, it’s usually not very useful to list every single navigation element as separate items, and you can also omit basic elements that already have a fixed location like the logo or footer.

A call-to-action button on Zendesk.com

Once you have your two lists, sort everything in three buckets: Most Important, Important, and Secondary. Your “Most Important” bucket should not have more than 1 to 3 items, otherwise it’s a symptom of an unfocused page. Your “Important” bucket will usually have about 4-5 items, and the “Secondary” bucket simply contains all the other stuff.

Focusing on content

The advantages of this technique over traditional wireframes are two-fold: first, it’s quicker and simpler to do. But the other big advantage is that it encourages people to think in terms of goals and content rather than layout. Removing the layout from the equation completely means that all design decisions will belong to the designer when it comes time to create a Photoshop mock-up or a HTML prototype, and those decisions will be much more meaningful at that stage.

An example: Zendesk.com

Since the easiest way to learn is by studying a concrete example, let’s pick a site (for example, the great Zendesk.com by the fine folks at the Cuban Council) and apply this technique retroactively.

The Zendesk.com homepage

Goals

• Get people to try the service

Elements

Most Important

1. “Try it free” button
2. Tagline

Important

1. Main navigation (home, pricing, customers, your)
2. “What is Zendesk” paragraph
3. Companies using Zendesk

Secondary

1. Secondary navigation (contact us, resources, login)
2. “Close your customer loop”
3. “Register for live webinar”
4. “Your guide to selecting help desk software”

That’s it! Of course, coming up with that list in the first place takes some time and effort, but it’s still a fairly quick process compared to whipping up a wireframe.

You’ll notice I left out some elements. For example I didn’t mention the homepage screenshots illustration at all. That’s because this kind of graphics is there to support your message, but it’s usually not the message itself. At this stage of the process, you probably won’t know what will work best yet, and that kind of decision is best left to your designer.

I hope you’ll get a chance to try this technique for your next project, and be sure to let me know how it worked for you.

Sasha Greif just recently published this follow up on his article "Why wireframes can hurt your project". With "A simpler and faster alternative to wireframes" he introduces a technique that prioritizes content and focuses on goals and elements before a Photoshop design or HTML prototype comes into play.

Image credit: Chris Depa, Straight North

Additionally, sketching helps us change our ideas to make them more reasonable where they can become a reality, and gives us a general outline when we bring our design ideas to say, Photoshop.

Great design ideas should always be sketched out to be better formulated and somewhat finalized before brought to the digital world. Great design ideas should always be sketched out to be better formulated and somewhat finalized before brought to the digital world. This helps us develop on our design idea, which actually helps us provide a better end result or product, than that of whom did not sketch the idea.

Therefore, eliminating sketching as a process of gaining experience is not a valid point as you are eliminating a crucial process in design that can sometimes make or break a project. To better prove the point on how sketching can strengthen your design ideas, we discuss several benefits to sketching out our designs before making them a reality.

Eliminates Time Wasted

One obvious factor or benefit of sketching your design ideas is that it eliminates time you could have wasted.

You may be wondering how sketching can eliminate wasted time while you could simply start right into Photoshop or Fireworks. You have a valid point; however, even the greatest ideas need refining. Sketching enables you to plan before actually starting to design. You can solve a lot of UX and design problems by sketching ideas on paper prior to firing up your preferred design software.

What this means is, spending the time to sketch your idea on paper will actually help you visualize your idea better than you would when you imagine it.

It allows you to get a better overlook on how it will turn out, and if you do not like how the design idea is turning out on paper, or the idea may not be reachable or feasible, you have not spent the time actually bringing it to life in Photoshop, but rather just a half hour throwing it on paper.

Therefore, a not so great idea will not waste hours out of your day just to realize that it will be heading straight to your trash bin.

Helps Expand on Our Ideas

Whenever we imagine ideas, they are usually the skeleton of what the end result can be.

However, when you take an idea directly to Photoshop, you do not quite have the brainstorming you would if you brought it to paper to expand on it, and thus great ideas are often suppressed and lost, making your great idea turn into an exceptional idea or design.

However, by bringing your designs from mind directly to paper, it gives you a completely new and different level of how you visualized it, allowing you to expand on your ideas for the design often bringing it from exceptional, to a mesmerizing drool-worthy design.

Therefore, it is definitely worth the time and effort to sketch your ideas out before making them a reality.

Helps with Group Feedback

Let’s face it, when we spend hours and days and weeks bringing an idea to life in Photoshop, we are generally not open to major feedback that will attempt to overhaul all the work, effort, and time we have put into it to bring it to life already.

We would just reject credible and excellent feedback if it means we need to change a huge chunk of our design such as a structural change, or we would be forced to perform these major changes by a design firm, which causes delays in the completion of the design project.

However, when you sketch your ideas on paper or on a whiteboard, your group can provide feedback allowing you to bring changes to the sketch in seconds helping make your design an excellent piece of work in the end.

In fact, many new great ideas whether design or not are structured by brainstorming on paper first with their group before going forth and bringing some sort of prototype to life.

Increases Creativity

By bringing your design directly to Photoshop you are limiting your creativity as you are trying to follow the idea you imagined to get some sort of prototype completed before actually changing a few things around.

A sketch on paper acts like your design prototype for your idea or ideas. This allows you to quickly expand on it by using your creativity before actually bringing it into Photoshop or to the browser for a graphical preview.

This also happens to save you time from manipulating your prototype in a graphic editing program rather than on paper which tends to only take several seconds rather than several hours.

Design Evolution

One great thing about sketching out your design ideas is that later on you can look back and see how your design has evolved, from sketch, to prototype, to the final product.

This not only is just for personal satisfactory, but it actually helps you improve on your final product months down the line.

When we design websites, we tend to design them specifically for the content we need for that website at that current point in time, however, our sketches often contain different content containers before we scratched them out.

By going back and looking at our sketches when we are looking for ideas or how our design or designs evolved, it will actually help us bring the containers we eliminated into our current design if we decided we needed such containers or elements later on.

GrindSmart Magazine on idea strengthening with the help of sketch notes and wireframes.

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.

 

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

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 Borskys article on the definition of wireframes. This is the article Brett Lutchman was responding to in a previous entry.

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.

Here is an examples of what a wireframe looks like:

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.

This week it's Nick Haas with 7 reasons why you should consider wireframing before designing/coding a website.