Wireframing is an important part of the designing process. It allows designers as well as clients review the functionality and basic look of the website while leaving the details out to enhance clarity. Combined with wise site map planning we can easily craft a good foundation of user-friendly and good looking interface.
Let's see which are the tools we can use in this process.
Online Tools
There are quite a few tools and apps on the web that allow providers and clients plan out a website. Most of them also offer some kind of communication between them in form of stickies, notes or real-time chat and even integrated Skype calls. That way both parties can be sure they are on the same page with their idea of concept. We're featuring only a few of them, but a quick Google search will discover many more.
Balsamiq is an online and installed software for mocking up designs. The online version is free if you don't mind exporting into .png. It's a very intuitive tool with lots of great features, working on any platform since it's built with Adobe Air.
They offer a paid version that allows users to collaborate, attach word files etc.
An extended tool for almost any type of planning - from mind maps to wireframes. They also offer a free online version, and this too is a team-oriented application, featuring a store with little add-ons such as user-contributed icons, stencils and other wireframing pieces. In short, a very user-friendly tool that will certainly make you look professional in front of clients and co-workers.
This opensource crossplatform Firefox plug-in works very well for designers who don't need real-time updates on client corrections. It works like any other wireframing software, with ability to add your own custom stencils or even functionality (If you know how to, of course.) and to create working, clickable mock ups.
Lumzy is like an entirely free version of Cacoo or Balsamiq except it's sadly using Comic Sans as its 'handwritten' font. It features collaboration, live chat and image editing only as a web app, but that seems to be quite enough for any prototyper.
Paid, but very advanced system for getting feedback and playing out test scenarios while using designing tools your already know. Create a clickable demo out of any .psd in seconds to get them ready for clients' revisions.
Another paid alternative, plans are starting at about $3.50. If you also need to run usability tests, you can do that with Pidoco alone, or share your wireframes of sites and applications concepts with co-workers.
While they offer a free try-out web application, they offer paid packages for collaborations and saving the mock ups. Built with Cappuccino, it features a clean, easy to use drag-and-drop interface.
This installable software for Mac and Windows allows saving to Word for less tech-savy clients, and developing fully working prototypes in a matter of minutes. They offer a free 30 days trial.
Other tools
Online tools are sometimes inconvenient or offer just too many features to be useful. Why even learn how to use another application? It's time we take a look at web designers' existing tool box.
Vector designing software
If you work in design industry, you probably own a copy of Adobe Illustrator or similar program that lets you manipulate vectors and offers tools for creating basic shapes like rectangles, text blocks, etc. These are very useful in wireframing, and designers already know how to use them. The key here is only to not overdo it - that means no drop shadows or too many colors - let your wireframes stay flat and tidy.
If you're looking for a free/opensource software in this field, take a look at Inkscape.
Hand Sketching
Another option many of us digital nerds are forgetting about is sketching. Even though it is technically drawing, doesn't require much portraying skills, and it enables us to work directly with the raw concept of the site. It's not hard to just scan up all the drawings we have produced and send it over to the client for revisions - they may print it out and ascribe additional info, corrections and comments and send it back right away.
This way seems a little messier, but very convenient for face-to-face meetings, when you can't afford to seem unprofessional playing around with software commands.
