Web Site Mock-ups and StoryBoarding?

brado77 asks: "I have spent years on the programming side of web development, but am presently moving into more of a design interest and focus. I am interested in what design tools out there for web site mock-ups and storyboarding that people find the most effective and fastest. No matter how skilled, programming is generally both too slow a method for this, and aesthetically clumsy (mucking through HTML to quickly change colors, layout, fonts, etc.). Photoshop is another route, but addresses its content from a structural perspective different from web layout. Has anyone found any tools specifically for mock-ups and storyboarding that are geared toward design professionals? (I can already sense the onslaught of "pencil and paper" and "whiteboard and marker" responses... :-)"

Comments

Canvas, PowerPoint, and Denim.

[DaRat]

My preferred design tool is Canvas from ACD Systems (formerly Deneba). Canvas is a technical illustration oriented, jack of all trades vector based graphics program available on the Mac and Windows. Canvas is sort of a combination of a technical/precise version of Illustrator, Photoshop light (works with a number of Photoshop filters) for bitmap manipulation, and Pagemaker light all in one program. Imports and exports a wide variety of formats. Of particular interest in this case is the ability to export PDF and HTML. You can define HTML links on objects so that you can use that do create low fidelity prototypes or walkthroughs.

I usually create design "sketchbooks" in Canvas that contain my wireframe mockups and send them to the developers (and anyone else) as a self contained PDF document.

A few in our company use PowerPoint in a similar fashion, but with much less ease, capability and style.

Another tool that you should look at is Denim which is a tool for informal, early stage web site and UI design. Fairly useful and keeps things at an informal "sketch" level. Really requires a graphics tablet though.

Adobe InDesign and OmniGraffle

[heldlikesound]

I have a friend that uses Adobe InDesign to build multi page wire-frame documents for client proposals and planning stages. He then assigns "hot spots" to each element, that jumps to another page, essentially building a self-contained clickable wire-frame website.

The real kicker though, is that he then outputs as a PDF, now the client can view, and navigate through the wire-frame without any special software, just a PDF viewer.

In addition, I use OmniGraffle for OSX on a daily basis for flowcharting web applications and modeling databases. It's a really incredible tool, and I highly recommend it.

You need DENIM

[ejungle]

You're welcome.

Fireworks

[Watts Martin]

I'd actually nominate Macromedia Fireworks, one of the more underrated (and probably less well-understood) components of Macromedia's Studio MX series. Fireworks lets you do mockups similarly to Photoshop, but unlike Photoshop, everything on your canvas is an "object," essentially existing in its own layer. You can stack objects and apply effects to them individually.

And, Fireworks is built for the web. It's easy to create rollovers, dropdown menus and the like with it. It's easy to create partially working mockups by exporting them as HTML. And, it's easy to turn those mockups into the initial framework for the actual web site by setting and naming the export "slices" correctly.

I'm not a huge fan of Dreamweaver, the better-known tool from Macromedia. But I've created several complex web sites by starting them in Fireworks and exporting them, then working on the HTML directly with BBEdit or HomeSite. If you get into the really woo-woo web design stuff with multiple layers, Dreamweaver can come in handy, though. (And Dreamweaver MX, at least, deals pretty well with XHTML, CSS and accessibility issues, as long as the operator uses it that way. Both programs are pretty good at generating markup and Javascript that works well cross-browser, too.)

Re:Fireworks

[Korgan]

I second this nomination. I have used Fireworks to quickly produce design mockups that could be sent to the customer for approval as a PNG and then its VERY easy to convert to a Dreamweaver template or even to just a general HTML page on its own. You're right, it is often overlooked. Its not something that can compete directly with Photoshop as an extremely powerful and expandable graphics application, but its brilliant for web designs and web images.

XHTML 1.1 Strict and CSS2 are my preference currently. It is easy enough to pick up if you know HTML and people going directly to trublu XML coded sites are probably those that already use XML for other purposes as it is.

DENIM

[wolfywolfy]

Denim is an interesting tool, sounds exactly what you're looking for. I can't get it to work properly, though, with my wacom..? Basically you freehand draw up the site design, make links, etc, then export the whole thing to HTML! amazing.

http://guir.berkeley.edu/projects/denim/