Wireframing is important. It allows you to lay out the elements of your design so you can get instant feedback before you get down to specifics. Wireframes also allow you to share your ideas with all your team members in a quick, comprehensive way.
Most wireframing tools come with a price tag and a steep learning curve, or with demo versions that hardly allow you access to what you really need. Here are eight great wireframing tools that are workable… and free!
The first 3 are great for beginners and are useful tools for getting started on your ideas, while the last few on the list include more complex functions and are perfect for later stage project planning.
Of all the different programs I tested out, I liked Wireframe.cc the best. It’s incredibly simple and clean, with intuitive, appealing controls and templates for mobile, iPad, and web browsers. It’s a web-based app, and the free version allows you to save your designs with a URL or as .PNG files.
Framebox is another great, simple app. You drag and drop the elements you want and can adjust them on the canvas. You can save your designs as URLs and share them with collaborators in view, edit, and comment modes.
Sometimes you just want to draw up an iPhone interface as quickly, simply, and painlessly as possible. For that, there’s iPhone mockup. You can collaborate and save your designs as URLs.
Pencil Project is a sophisticated wireframing tool that’s also completely free. You can download it or use it as a Firefox extension. You can export your wireframes in a number of different formats, and it also supports inter-page linking for website mockups. It also connects to an online clipart library, if you want to spice up your wireframes.
Join the nation's largest group representing the new workforce (it's free!)
Gliffy is a nice app that allows you to create complex wireframes in your web browser. It has a shape library that allows you to put together flowcharts and other diagrams as well. You can share and export your designs with a free membership.
Cacoo has a bunch of pre-loaded stencils on it that allow you to create wireframes in a number of different styles. It features the option of hand-drawn stencils as well, ostensibly bringing focus toward core elements of your design.
*7. Mockflow *
As its name suggests, Mockflow allows you to test the user flow of your wireframes. Its wireframing tools are clean and easy to use. Aside from wireframes, Mockflow actually has a whole suite of apps for designing, building, and collaborating on projects.
*8. Jumpchart *
Jumpchart is more like a virtual project manager than a simple wireframe tool, but it has lots of nifty bells and whistles that make it worth a gander. Unfortunately, the full version is not free. Still, it has some neat cross-platform functionality (wordpress, etc) that makes it versatile and worth checking out.
And here’s a bonus, the best wireframing tool of all:
9. Pen and paper!
You might have noticed that a bunch of these wireframe tools look a lot like… pen and graph paper. Starting from scratch and drawing things with your hands makes your brain work differently than tapping and poking at a screen. It’s okay if nothing actually looks how you want it. After all, just the act of drawing is enough to generate good ideas. And using the simplest building blocks -- yes, even simpler than a drag-and-drop rectangle -- often generates the best designs.
It’s been shown time and time again that constraints actually make you more creative. Yes, there’s science to it. So the next time you’re drawing up a wireframe, why not grab a piece of paper and your favorite pen?
Larissa Pham is an artist and writer based in Brooklyn, New York. Her desk is covered in tons of drawings and notes, which is just the way she likes it.