Can you save time and money with your next site launch by using website wireframes? If you are careful about setting expectations up front, wireframes can be an excellent tool for getting everyone on the same page before your designer invests time in developing a user experience. And since building a wireframe takes no special skills, it’s easy for marketing folks to lay out their expectations and then iterate quickly.
What is a wireframe?
“A wireframe is a visualization tool for presenting proposed functions, structure and content of a Web page or Web site,” according to Webopedia. It is a good starting point for a discussion between project manager, designer and developer. Taken far enough, it can replace most of the work of a requirements document.
A wireframe is not a mockup. A mockup attempts to convey what the site will actually look like, with color and images and graphical elements. A wireframe should be grayscale, with no pretty pictures. Some wireframe tools intentionally use drag-and-drop elements that look like they were hand-drawn to force everyone to focus on the essentials of what needs to be on the page rather than “can you make the font Comic Sans?“
Low fidelity wireframe aesthetic
When should you use a wireframe?
Wireframes should be used at the beginning of every website design or redesign project, because they force everyone to focus on the “what” before they get to where everyone wants to be, which is the “how.” For example:
- What is the site supposed to accomplish?
- What navigation elements do we need?
- What elements should be on every page?
- What should be on an article page or a blog page?
- What ad units will we need on each page?
- and so on…
The “what” is the piece the marketers/publishers/subject matter experts own. They are the only ones who can make these decisions, and they must be agreed to and signed off on before real design work or (God forbid) coding starts. A wireframe makes this process pretty easy for everyone to understand and agree to.
The “how” belongs to your Web designer and your developer. If you don’t believe me, please read “Let your designers do their job.”
What are the pitfalls?
The client may interpret your wireframe to be a literal representation of how the site will look. As you make your wireframe more detailed and pixel-perfect, the risk of this goes up. If the wireframe is interpreted as a blueprint for the site, with all elements laid out in final form, you are severely limiting your designer’s options for creating an exceptional design. It is up to the person creating the wireframe to clarify and repeat that the wireframe is not a mockup.
How can you use a wireframe to best advantage?
Very few people have the ability to look at a bulleted list of content elements for a Web page and see what’s missing. Having things laid out visually makes it much easier to pick out missing elements, and to see when there are perhaps too many things being stuffed into the page. Because you use a wireframe early in the process, this is an excellent time to get input from all the stakeholders. We all have our blind spots, but with edit, sales, marketing, ad ops and developers involved in reviewing the wireframe, the chances of missing something are pretty small.
Wireframing tools
There are quite a few tools that let you assemble and share nice-looking wireframes. They easily produce results that look better and take less time than they would if you built them in, say, Excel.
High-end tools
- Balsamiq: Available in paid Web-based or desktop versions, Balsamiq includes a full feature set indcluding API integrations, and has a rough lines “lo-fi” aesthetic. The desktop version allows offline working, while the online version, called myBalsamiq is designed for real-time team collaboration. Desktop application is $79, myBalsamiq from $12/month to $249/month, based on the number of active projects.
- Gliffy: This is an enterprise-focused, web-based paid tool for making lots of pretty charts and diagrams, including wireframes. If your organization needs the ability to produce and collaborate on lots of diagrams and other infograpnhics, these guys are worth a look. Several integrations are available, including with Google Apps. $4.95/user/month to $9.95/user/month.
Midrange tools
- Hotgloo: This is an online, paid wireframing tool. Lots of customizations and features in a wireframe-specific tool. Pricing is on a project basis, from $7/month to $48/month.
- Mockingbird: Mockingbird is an online tool with a limited free product and paid versions ranging from $9 to $85/month based on the number of active projects. All paid plans have unlimited users. This is what we use at eMedia Vitals, and we like it, but I haven’t tried the others, so don’t take our choice as an endorsement.
- Lovely Charts: Lovely Charts takes a different approach with a full-featured desktop applications for power users and a simpler Firefox only online version that’s available free with limited functionality. Desktop app is 59 Euros, online is 29 Euros/year.
- Cacoo: This web-based tool emphasizes collaboration and workflow ease. A limited free version is available, and premium plans range from $4.95/user month to $99 for 100 users/month.
- Mockflow: This tool usefully includes both desktop and mobile clients as extensions of the main online product, allowing editing and viewing mockups offline. Focus is on mockups/wireframes. There is a limited free version, and the premium product is $69/year.
Entry-level tools
- Pencil Project: This is a Firefox-only open source free wireframing tool. If you can live with Firefox only and open-source style support, this looks like a very robust solution for no money.
- Simple Diagrams: Desktop only, super simple paid wireframing tool. Very basic, and the diagram elements all look like someone drew them by hand, so it lends your wireframes a very casual, hipster vibe. That will work for some, not for others. Adobe Air app works onWindows/Mac/Linux, with both a very limited free version and the full version for $25.
- Lumzy: This is an online fully free tool focused on wireframes/mockups. They’ve been in beta for over a year, and pulled back their premium product, so I’d be cautious about putting all your eggs in this basket.
- Website Wireframe: Free, Web-based, very basic, it would have blown my mind in 1997. It works in IE, which is an unusual bonus.
You can also go old-school, with pencil and paper. I prefer using software because I can’t draw, and collaboration and updates are easier than erasing and re-drawing.
Mitch Speers 