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?
Comments on this article are closed. Have a question about wireframing? Why not ask it on our forums?Frequently Asked Questions about Free Wireframe Applications
What are the key features to look for in a free wireframe application?
When choosing a free wireframe application, there are several key features to consider. Firstly, the application should have a user-friendly interface that is easy to navigate. It should also offer a variety of design tools and templates to help you create professional-looking wireframes. Additionally, the application should allow for collaboration, meaning you can share your designs with others and receive feedback. Lastly, the application should have a good support system in place, such as tutorials or customer service, to assist you if you encounter any issues.
How can I share my designs with others using these applications?
Most free wireframe applications offer a feature that allows you to share your designs with others. This can be done through a link that can be sent via email or through direct integration with other platforms such as Slack or Google Drive. Some applications also allow for real-time collaboration, meaning multiple people can work on the same design at the same time.
Are there any limitations to using free wireframe applications?
While free wireframe applications offer many great features, there can be some limitations. These may include a limited number of projects you can create, restrictions on the number of collaborators, or access to only basic design tools. However, many applications offer premium plans that provide additional features and capabilities.
Can I use these applications if I have no design experience?
Absolutely! Many free wireframe applications are designed to be user-friendly and cater to both beginners and experienced designers. They often come with pre-designed templates and drag-and-drop features that make it easy to create professional-looking designs. Additionally, many applications offer tutorials and guides to help you get started.
How can these applications help me in my web development process?
Wireframe applications are an essential tool in the web development process. They allow you to create a visual guide of your website or app, helping you plan the layout and user interface. This can help you identify any potential issues or improvements before you start coding, saving you time and resources in the long run.
Can I use these applications for mobile app design?
Yes, many free wireframe applications allow you to create designs for both websites and mobile apps. They often come with templates specifically designed for mobile interfaces, making it easy to plan your app’s layout and functionality.
Are my designs secure on these platforms?
Most free wireframe applications take security seriously and have measures in place to protect your designs. This can include data encryption, secure cloud storage, and privacy settings that allow you to control who can access your designs.
Can I export my designs from these applications?
Yes, most free wireframe applications allow you to export your designs in various formats such as PNG, PDF, or HTML. This makes it easy to share your designs with others or use them in presentations or reports.
Do these applications offer customer support?
Many free wireframe applications offer customer support in the form of tutorials, guides, and FAQs. Some also offer direct support through email or live chat. It’s always a good idea to check what kind of support is offered before choosing an application.
Can I upgrade to a premium plan if I need more features?
Yes, many free wireframe applications offer premium plans that provide additional features such as unlimited projects, advanced design tools, and more collaboration options. These plans often come at a monthly or annual cost.
Craig BucklerCraig 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.
