What I do now, as of a week ago, is use Inkscape, instead. I first started by taking screenshots of all the common controls I used on the last 10 projects I’ve done. Next, I imported into Gimp and reverted them to greyscale and increased their contrast. I then imported these controls into Inkscape and converted the bitmaps into vector images. In some cases that worked. In other cases I had to trace over the control (painfully) to make a vectorized version of the control. Last, I merely combined the controls on a greyscale mockup.
So, from here on out, I merely start with my base Inkscape file that’s already designed for a 960px page width, which already has my guides (those margin things you drag onto the page) setting text margins and “foldspace” margin (you know, above the fold, below the fold – a common discussion these days). I start by drawing a basic approximation of the site template, save that off in two versions usually (one for the home page version and one for every other page), and then start customizing per item in my functional spec. Sometimes in my functional spec it’s just easier for me to draw the set of controls per the discussion topic and do a snapshot of just that part of the screen, rather than redraw the whole page. Last, I make certain that the final result is greyscale to get the point across that this is a wireframe mockup.
This gave my wireframe mockups a more professional look. However, I do preface this with my clients and say that my wireframes are not the final result by any means, but concepts to help move along the functional spec outline.
I think you should mention Justinmind Prototyper as another tool to make high interactive prototypes and also as a natural step when someone finish the sketching phase.
I trialed Balsamiq (you couldn’t export to JPEG or PDF) and I liked it. It was easy to use and I thought the sketchy designs made it more fun than, like you said, “typical dry, black-and-white, ‘boxes and lines’ wireframe.”
So yeah, I liked it. And it’s a lot cheaper than some of the alternatives.
It’s called HTML We do all our wireframes in static HTML/CSS. The big plus from our point of view is that once the client has signed off on the wireframe we can use it as a basis for the site, no need to throw it away and start from scratch as you do with graphical tools. Note, all our sites are dynamic ones; on the wireframed pages we include notes explaining required functionality, so they are to hand when we start doing coding – no need to go and look somewhere else (and possibly miss something).
An HTML wireframe is easy to edit and can be put online for the client to view, no need to be in the same room. No expensive software required either, just use whatever you normally use to code HTML.
Thanks for this post. I applied for a free license key for my employer, a not for profit organisation, and they responded within 24 hours.
I then knocked together a few diagrams to show our our in-house designers who are going to be re-imagining our main website to integrate some new features we’re adding. I found it to be a great tool for rapid prototyping and it has sped up our redesign process!
