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
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
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
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.
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.
linky
posted:February 23, 2009 2:58 am
How about iPlotz (iplotz.com), which offers web based and desktop based wireframing and mockups, with collaboration and project management
mark vernon
linky
posted:February 23, 2009 9:52 am
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
Arturas
linky
posted:February 23, 2009 10:36 am
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.
Brian
linky
posted:February 25, 2009 6:10 pm
Great resources!
Amber Weinberg
linky
posted:March 21, 2009 11:03 pm
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.
Charan
linky
posted:May 27, 2009 4:51 pm
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
Cristian Pascu
linky
posted:June 10, 2009 5:41 pm
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
Andrea Fidel
linky
posted:September 1, 2009 1:20 pm
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 !
Best,
Tino
pidoco°
Tino Truppel
linky
posted:August 24, 2010 8:30 am
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
Dan Moser
linky
posted:February 11, 2011 2:03 pm
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.
Erick
linky
posted:March 4, 2011 10:16 am
Theres also good tool called JustProto. Realtime colaboration, live prewiev, components that help you create fully interactive prototypes and wireframes.
Ewa