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…
1. Moqups.com
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.
Moqups has been created in standard HTML5 and JavaScript which makes it more impressive. Highly recommended.
2. Lumzy.com
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.
3. Gliffy.com
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.
4. Lovely Charts (web)
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.
5. Google Drive Drawings
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?
Learn Responsive Web Design
- SitePoint's ebook: Jump Start Responsive Web Design
- Responsive Web Design: Key Concepts online course
- Unlimited access to SitePoint Premium Content
Join Learnable $29 Includes all SitePoint books
