How do you mockup websites?

I've been hunting for a new tool to help me mockup sites lately. I use Photoshop, but it's not quite right. It helps me lay things out quite nicely, and it doesn't bother me at all that it doesn't produce code — it's more about creating an image as close as possible to what I could replicate using HTML and CSS.

And that's actually where it falls over. Photoshop does many things, bless its bloated heart, but it doesn't support CSS styles. And why should it? It's not a website-mocking-up tool really. But it does become a pain if I want to set individual border styles, or test a repeating background image, or any of these things that are better described in code.

So in my search for something better I recently asked my faithful tweeps what they used. I got a couple of common answers: Photoshop, Illustrator/Fireworks, and "I code it all by hand." Personally I think coding it first when you haven't decided on what it'll look like is a bit silly, but that's just me. I think visually, or something.

But nobody enlightened me about the existence of the product I have in mind: an app that exists only to mockup websites.

The app I have in mind would probably be built on a web browser base: WebKit, I guess, as the consensus seems to be that the Mozilla codebase is too heavy these days. It would let you draw elements straight onto the canvas, and probably make these to absolutely positioned initially. It'd have a Photoshop-ish interface allowing you to create layers and to easily modify any of the CSS properties a la Blending Options. Want to see what a 3px border on the bottom of that header would look like? No problem, you can specify that independently without hacks. I imagine too that some sort of visual highlighting system would make it easy to draw elements within other elements (rather than just sitting absolutely on top), making more advanced CSS rules possible.

And here's the kicker: when you were happy with how the site looked visually you could tweak positioning and then export it all to HTML and CSS, because that's what it would already be. Wouldn't that be nifty? Obviously nothing beats hand-tweaked code, but it'd be better than my current workflow of slicing and recreating my Photoshop image from scratch in code.

The only departure from a visual-code-mockup focus would probably be the addition of basic image tools — an easy way to import images from Photoshop, or a basic gradient generator.

So, how does that sound? Personally I'd love to have something like what I've described, and I'd probably even pay a reasonable amount for it. But I don't really have time to create it myself — would anybody else like to? I wouldn't mind some royalties if you do...

Does that sound like something you'd use? Or do you already use something similar? Let me know in the comments.

To top