by anthony on 07/20/10 at 10:47 pm
Wireframing is an important part of the design process. It usually occurs in the beginning before any graphic design takes place. Its sole purpose is to communicate the content structure, navigation and layout. Things like color, font, images, gradients and other visual effects are saved for later after wireframing has been completed. Because of this, a graphic design tool such as Adobe Photoshop aren’t ideal for wireframing. Photoshop can be used to create beautiful graphics, but it’s NOT easy to wireframe with because it’s not a vector program. This means manipulating the size, shape, color and orientation of objects can’t be done on the fly. Doing simple things like lining things up and creating basic UI elements takes far too long. It also doesn’t come with stencils, which are pre-installed shapes of UI elements that you drag and drop to save you time. Wireframing should be easy and efficient. How things are organized and where things are placed is the emphasis of wireframing, not how pretty things look. When it comes to wireframing these highly touted graphic design tools just don’t cut it. For these reasons, I have decided to present to you the two best wireframing tools for efficiently creating wireframes.
Best FREE Wireframing Tool
There are tons of wireframing tools out there. Some are bad, some are decent and only a few stand out. I have used a variety of them, but the best free wireframing tool is Mockingbird hands-down. Not only is it free but it comes with a really nice set of stencils and the user interface for the web application is clean, slick and easy to customize. To add to that, it even has smart guides to help you line things up properly. It also has a feature that allows you to instantly share your wireframes with others. This app is truly a gem and it’s only in its beta version. But don’t take my word for it, try it out yourselves!
Best PAID Wireframing Tool
This next tool I have used for a long time. It is so versatile and efficient to use that I use it for both wireframing and basic graphic design. For advanced graphic effects, however, Photoshop is a good choice, or if you prefer vector programs Adobe Illustrator and Fireworks are also ideal choices. But if you are trying to design a basic wireframe or mock-up you don’t need a program that’s bloated in features. Omnigraffle is an outstanding tool that I highly recommend. It’s not free, but it’s worth every penny.
It has all the essential features you need to create beautiful wireframes and mockups. It’s very efficient and easy to create UI elements because they have an awesome stencil library that makes your job so much easier. You can also download other stencils made by others at graffletopia.com. Putting effects in such as gradients and shadows on objects is fast and easy. Aligning objects is easy because it provides smart guides to help you. Exporting graphics to a web format is simple as well. You can even make your designs interactive.
All in all, Omnigraffle is an extremely useful and intuitive application for wireframing and basic graphic design. It is the best paid wireframing tool out there. See for yourself and start wireframing in no time!
[Update: Mockingbird is no longer free. However, it is still one of the better wireframing tools I've seen.]