14 Useful online tools for webdesign planning and prototyping.

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

jumpchart

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/

rapidrabbit

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

writemaps

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/

mindmeister

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

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.

http://makiapp.com/ – A free web design mockup tool which runs in the browser.

http://chalk.37signals.com – An iPad based sketching app from the 37 signals team.

http://www.mockflow.com/ – Mockflow allows collaborative wireframing in the cloud.

33 Comments

Submit a Comment
  1. You are absolutely right about the need to plan properly, it is essential in order to get the specification right. I think I can probably use some of these tools as well so thanks for sharing.

  2. Hi Paul, Nice list of resources.
    We’re currently seeking beta users for an online diagramming tool for mockups and visual collaboration. Would love you to give it a shot – http://creately.com – and tell us what you think.

  3. Another offline prototyping tool that you might also want to consider is FlairBuilder. It lets you create highly interactive wireframes/prototypes that you can click through and type in.

    It comes with a set of fully functional components that just work: links, buttons, text and checkboxes, tabs etc. Try it online at http://www.flairbuilder.com/demo

    I hope you’ll find it useful!
    Cheers,
    Cristian

  4. Thanks for including ProtoShare on the list!

    Collaborative website wireframing and prototyping has helped save people a lot of time and money. In my experience, from a project management stand point, having a single location to store feedback with the interactive wireframes is very convenient. From a client stand point, being able to see and actually understand how my site will work helps me reach my goals much quicker and with less headaches than looking at static mock ups.

    Did you try ProtoShare? Feel free to email me with your thoughts.

    Thanks!
    Andrea
    andrea [at] protoshare.com

  5. Hello,

    Another great offine tool for software prototyping is Justinmind. It brings some groundbreaking features like simulation with real data or advanced logic calculation. If you need it, you can create prototypes that can be barely differenced from a real application. (Of course, you can do simple wireframes as well :)) Then you can export it to HTML code or publish it on our online service to share it with you clients.

    If you want to know more just let me know: jim.info at justinmind.com

    Regards,
    Dan
    Justinmind

  6. Theres also good tool called JustProto. Realtime colaboration, live prewiev, components that help you create fully interactive prototypes and wireframes.

Leave a Reply

Your email address will not be published. Required fields are marked *