It’s always a good idea to design or wireframe a website or application before jumping straight to the coding or graphic design part. Wireframing, prototyping, mocking it up reduces the time to decide which part goes to which part.

The importance of it has always been taken for granted by many designers and developers to speed up development not knowing that it actually increases the development time because of revisions, missed user cases and sometimes simple user interface design mistakes.

Good thing is that these days you don’t have to spend anything for wireframing, mocking up or prototyping your idea. There are now lots of wireframing/mockup/prototyping softwares out there that you can use today. For free. So, I’ve picked 5 awesome free tools for your next web design and web application wireframing project.

Here they are below:

Cacoo

Cacoo is a user friendly online drawing tool that allows you to create a variety of diagrams such as site maps, wire frames, UML and network charts. Cacoo can be used free of charge.

Mockingbird

Mockingbird is an online tool that makes it easy for you to create, link together, preview, and share mockups of your website or application. You can use this for free.

MockFlow

MockFlow allows you to design, collaborate (in real-time) user interface mockups for your software and websites. You can use this for free with limitations. Premium plan available.

iPlotz

iPlotz allows you to rapidly create clickable, navigable mockups and wireframes for prototyping websites and software applications. You can use iPlotz for free with limitations. Pricing plans available.

Pencil Project

The Pencil Project’s unique mission is to build a free and opensource tool for making diagrams and GUI prototyping that everyone can use. Free to use.

Bonus:

If you use Visio, here’s a free to use Visio template and stencil for rapid prototyping on the web.

And if you don’t have the luxury of the moment to use a computer or simply in a hurry to go to a client meeting to discuss the look and feel of your next project, you can download one of these awesome PDF files, print them and you’re ready to go.

Hope this helps someone.

This entry was posted by AJ Batac on Friday, May 28th, 2010 at 2:51 pm and is filed under Tools, Tips and Tricks, Web Design, Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.