Many successful web designers and developers can visualize interfaces in their head. It’s a skill few others possess. Consider your clients. If you were lucky enough to receive a specification, did they re-evaluate their interface the minute they tried your lovingly-crafted application?
Wireframing helps minimize these issues. Clients can be provided with a series of sketched screenshots or a mock interface they can try before they’re coded. There are some good commercial products — Balsamiq is one of the better known — but there are several free online applications you can consider. As a bonus, some offer collaboration and demonstration URLs which can be shared…
Moqups is my current favorite. It’s fast, easy to use and works without a browser plug-in. Screens and buttons can be linked so you can publish a demonstration for your clients to view and use. Images can also be exported for specification diagrams.
I’ve used Lumzy for several projects. It’s a Flash application and, while the interface isn’t the prettiest, it’s fast, provides collaboration options and offers a wide range of controls which are easy to edit and configure.
Screens can have pop-up notes and controls can be linked to other screens for online demonstrations. Lumzy can become a little slow for very large projects but it’s a great application nonetheless.
Gliffy is another Flash offering. It’s a little slicker, prettier and easier to use than Lumzy. It also offers further diagrams types such as flowcharts, floor plans, Venn diagrams, networks, processes and UML with export to SVG, JPEG and PNG.
The only drawback is that Gliffy is primarily designed for single-page diagrams. Control shapes are more limited and you cannot create a series of linked wireframed screens.
Lovely Charts is a Flash version of the company’s desktop and tablet application. Functionally, it’s similar to Gliffy with a range of diagram types and export options, but you must sign-up prior to use.
Again, it offers fewer control shapes than Moqups or Lumzy and cannot output a viewable demonstration. However, you may prefer it if you’re creating written documentation.
While Google Drawings is not a wireframing application, it can be used for simple screen mock-ups. The tool is fast, offers collaboration and is an absolute joy to use. Diagrams can be output to a range of file types and embedded within other Google Drive documents.
Have I missed your favorite online wireframing application?
Comments on this article are closed. Have a question about wireframing? Why not ask it on our forums?
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.
Jump Start Git, 2nd Edition
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers