How to use website wireframes
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?
When should you use a wireframe?
- 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...
What are the pitfalls?
How can you use a wireframe to best advantage?
- 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.
- 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.
- 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.