14 Useful online tools for webdesign planning and prototyping.

February 22, 200933 Comments

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.


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.




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.


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.


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.

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.

Filed in: Web Design
Tagged with:

Comments (33)

Trackback URL | Comments RSS Feed

Sites That Link to this Post

  1. Web design in the cloud. A pancake tueday guide. | February 24, 2009
  2. The newbie guide to running a design business. Part 1. | February 28, 2009
  3. Information Architecture and Usability » Web Prototyping | September 21, 2009
  4. Designing User Interfaces For Business Web Applications | World Wide Web | February 25, 2010
  5. Designing User Interfaces For Business Web Applications | Best Web Magazine | February 25, 2010
  6. Designing User Interfaces For Business Web Applications | Web Design Cool | February 25, 2010
  7. Designing User Interfaces For Business Web Applications « wonnab | February 25, 2010
  8. Designing User Interfaces For Business Web Applications « Usability – My Love | February 26, 2010
  9. » Blog Archive » Designing User Interfaces For Business Web Applications | March 2, 2010
  10. Designing User Interfaces For Business Web Applications | MarketingTypo.com | March 3, 2010
  11. Anatomy of viral content | March 3, 2010
  12. Designing User Interfaces For Business Web Applications | iDezigner.Com | March 4, 2010
  13. Designing User Interfaces For Business Web Applications | Blog | March 18, 2010
  14. 商务Web应用程序的界面设计 | 国强有「画」要说 | March 21, 2010
  15. Living the dream » Blog Archive » 商务web应用程序的界面设计larens | March 22, 2010
  16. Designing User Interfaces For Business Web Applications | Design and Grphic News and Event | March 26, 2010
  17. ST·Zeus | 用户为先·专注体验 » Blog Archive » 商务web应用程序的界面设计 | April 2, 2010
  18. Kingsley's BLOG » Blog Archive » 商业Web应用程序的用户界面设计!学习了。 | July 21, 2010
  19. Designing User Interfaces For Business Web Applications - Smashing Magazine | August 9, 2010
  20. Design onder de loep 3 | MARBIE DESIGN | January 28, 2011
  21. Design Revisited 3 | MARBIE DESIGN | January 28, 2011
  1. mark vernon says:

    How about iPlotz (iplotz.com), which offers web based and desktop based wireframing and mockups, with collaboration and project management

  2. Arturas says:

    I think it would be great to mention some project management and collaborations tools, that helps you stay over your projects all the time: http://www.basecamphq.com. http://www.comindwork.com, http://www.centraldesktop.com, and about hundred other tools ))) at the end it all depends what you need

  3. Brian says:

    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.

  4. Charan says:

    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.

  5. 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!

  6. Andrea Fidel says:

    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.

    andrea [at] protoshare.com

  7. Tino Truppel says:

    Dear Webdistortion Readers,

    we’ve changed our name from RapidRabb.it to pidoco°. Now, that we’re officially pidoco°, please visit our website, in order to test the pidoco° Wireframe Tool !



  8. Dan Moser says:


    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


  9. Erick says:

    Hi. Thanks for the list. I’d also mention one interesting diagram building tool, which can be used both as a free service and a component for the site.

  10. Ewa says:

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

  11. Eileen Coyle says:


    I would like to add FluidUI.com to the list – another worthwhile prototyping and wireframing tool.


Leave a Reply

Back to Top

Share This