Most designers will agree that it’s always a good idea to wireframe your website and blog designs. By working out the best layout for a site, you can select the best placements for navigation, static and dynamic content, and so forth- and do all this early on.
A web design wireframe can be as simple as a sketch on the back of a paper napkin, of course- but today I want to talk about tools that help you take your wireframing to the next level:
Omnigraffle
For Mac users, Omnigraffle just might be the best wireframing tool there is. It’s undeniably powerful, as you can see from its feature chart– and many of its features are well thought-out, such as “mini-inspectors”, which allow you to change an object’s size, location, fill, stroke, and more right at the top of the doc window. A standard license costs $99.95, while a professional one- with extras such as “presentation mode” and advanced text position settings- will set you back $199.95.
Photoshop or Illustrator
Many of us use one or more of these truly wonderful Adobe apps for wireframing- and with good reason. If you already use these for work, why not use what you already have- and perhaps more importantly, what you already know? Another Adobe program worth looking at for wireframing is InDesign, which can export PDFs with embedded links to submit to clients.
Balsamiq
I’ve written about Balsamiq Mockups, a nifty little AIR-powered app, before– and I list it again here because it’s truly a little gem of a program. Extremely easy to use, and specifically designed for collaboration, the app costs $79, and is worth every penny.
Lovely Charts
This one’s free, but that’s not the only reason I recommend it here. It’s also easy to use, has an intuitive and- yes- lovely user interface, and is powerful enough to see you through most types of website wireframes.
Moleskine
Definitely a step up from a paper napkin, I’ve posted about Moleskines before, and obviously I’m a fan. The “squared” type, pictured above, is perfect for grid-based designs. Perhaps the biggest pro? You can take it anywhere.
What tools do you use for wireframing?
