If you fail to plan, you plan to fail. An old adage and one that still rings true. With any website project, it can be easy to just jump straight in and start developing, once you have client approval before taking time to plan. By the time you show your first iteration of the design to the client, they could have considerably changed their minds about the details of the project, and you end up having to re-engineer your partly baked solution at the last minute. This can lead to serious usability issues further down the line, as bits get “tacked on”. I also a big believer that many “spec work” issues can be resolved via wireframing to communicate your ability to a potential client.

Many developers and designers use good old pen and paper to plan their designs, however this doesn’t really fit well with larger projects, where collaboration / signoff is required from many different people. Others jump straight to HTML to create mockups – which I feel can limit creativity a little, as it puts you in the mindset of what can be done with HTML / CSS. Some of these prototyping tools for web design might be useful for prototyping purposes – some of them with social features.

JumpChart

URL: http://www.jumpchart.com

Jump chart  was created by the guys over at Paste Interactive, a great little company that create useful software such as this. They offer a couple of payment options. A free option with 1MB of storage, right up to the Deluxe version at $50 a month.  . Each  Jumpchart is fully shareable, and generates its own sitemap. The interface is also clean and snappy and allows you to drag pages to new places within the interface easily.

RapidRabb.it

URL:http://rapidrabb.it/

Created with some crazy canvas Javascript and Ajax, RapidRabbit is a quirky little prototyping tool that allows you to create  interactive wireframes or mockups with reusable parts through a layering concept.

WriteMaps

URL: http://www.writemaps.com

Whilst not strictly marketed as a wireframing app, Writemaps allows you to quickly and easily layout site structure and share it across the web. I’ve used it a couple of times for client work, and the beauty of it is that they can move pages to new locations, save the results and share it back with you. Larger sites will struggle a bit to export an image of the complete sitemap, but if you are just concerned with showing it in the browser this isn’t a huge problem.

Mind Meister

URL: http://www.mindmeister.com/

Mind mapping is basically a fancy term for brainstorming, I’ve mentioned that I’m a fan of the technique for coming up with new blog post ideas before.  However with Mind Meister, you can create the mind map process for a new site online, and share with others.

ProtoShare

URL: http://www.protoshare.com/

Protoshare allows you to click through a prototype and offer feedback along the way. Their review tools are easy for novices to use, and the system is intuitive. They have a variety of pricing plans available, and a 30 day trial for those who want to try before you buy.

Offline Tools / Notable others

http://www.balsamiq.com- Create useful software mockups in minutes

http://www.gliffy.com – Good for software monkey creating flow charts etc.

http://www.axure.com/ – Well respected offline prototyping tool

http://www.evolus.vn/Pencil/ – Turn Firefox into a sketching tool

http://code.new-bamboo.co.uk/polypage/ – Polypage was designed to ease the process of showing multiple page states in html mock-ups.

http://www.protonotes.com/ A javascript wiki on top of your prototype. Great for inter team collaboration.

Related Posts

• 10 websites to keep your finger on the online pulse
• Bookmark these SEO tools.
• 12 amazing form creation sites for web developers.