Todd Pinkerton

I’m not a designer by training — in fact, I can barely draw stick figures. But often on a project I need to start laying elements out on a page and seeing what works, and what doesn’t belong. I used to do this on paper, which is quick and easy to iterate. Then, start mocking up the layout in HTML. All this is just to get the features and placement right, and leaving the visual design for a professional.

The problem with this approach is, there’s a huge gap between paper-prototype and HTML mockup. Paper is quick and easy, but not very compelling to look at. HTML looks better, but it’s not very malleable — once you place something, it’s often a pain to move it around and get it right again.

So I’ve started using a drawing tool to do these wireframes. I may sketch something out on paper first (because that is still the fastest), but before I share it with anyone, I’ll open up my drawing program and draw boxes and text on the screen. I’m on a Mac, and so far the best tool I’ve found for this is OmniGraffle Pro. Usually used for drawing flow charts and the like, there are some add-ons that make it great for wireframing. Like the OmniGraffle Web Design Template by Michael Angeles. He also has a wireframe palette containing a bunch of useful shapes and text, and a greeking stencil for ‘lorem ipsum’ text.

Using these tools, you can draw some useful mock-ups of web pages for your next project. I do not know my way around Photoshop or Illustrator, but I am fairly comfortable using OmniGraffle with these extensions after only a bit of trial-and-error. Now I can create drawings and mail them around to colleagues without fear of them laughing at my stick figures.

OmniGraffle is a commercial product, but you can get a trial for their Pro version. You need the Pro to take advantage of the plugins I linked above. It’s about $99, so it’s far more affordable than Photoshop and other art-oriented drawing programs.