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?
Five Ways to Remove Backgrounds in Photoshop in 2021
By Amber Leigh Turner,
Need to remove an image background? Learn five ways to remove backgrounds in Photoshop, depending on the kind of image you're working with.
Figma Prototypes: A Quick, Step-by-Step Guide to Useful Mockups
By Daniel Schwarz,
Take your wireframes and mockups to the next level by creating interactive FIgma prototypes that are navigable and animated. Here's how!
5 Web Design Trends for 2021
By SitePoint Sponsors,
Web design trends come and go. 2020 was no exception. Web designers will see some familiar trends replaced by safer and more dependable design choices.
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.