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.

oops, a Microsoft product

[NanoGator]

For illustrating workflow, Visio is quite nice. You can draw boxes, add nice pretty lines to illustrate the workflow, type in notes, and make changes easily. We use it a lot where I work for diagramming system components and the architecture of the software (UI state design etc) that will be written for it.

For the design of the web pages, Photoshop is quite nice. If your designs are less aesthetic, then a cheaper app like Paint Shop pro may be right what you're looking for.

I would recommend, though keeping a whiteboard and post-it notes nearby. T'is generally a good practice to start really really small and work your way up.

One other thing to mention is to study what other sites have done. I mean really study it. Look at their structure and design themes they worked with. There is no harm in borrowing ideas here, especially if it helps the user in navigating your site.

Oh, you know, I have one other little piece of advice. Make sure to work in layers. Typically you've got your header, footer, and content as 3 seperate aspects to consider. I use Photoshop 7. It has a feature (not in 6, which is why I mention the version #...) called "layer sets". Basically,it means you can group a bunch of layers together, and on the layers tab you can chance the color of them. I didn't realize how important that feature would be until I worked on a web project with these distinct sets.

I'll be monitoring my post here. If any of you have more specific questions, fire 'em off. I love babbling about Photoshop. ;)

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/

"core apps"

[Visigothe]

As I do this for a living [like many here], I can say I find the following helpful:

Omnigraffle Pro [for creating "linkable" wireframes, storyboards, and site maps. If you are familiar with Visio, it is similar in functionality.

BBEdit. It doesn't suck. I hand code all my HTML, so it is as tight as possible [while still being readable]. It also allows me to code Valid XHTML. If you are building huge sites, I create HTML and CSS templates in BBEdit and shove the templates into whatever CMS delivery system is used.

Photoshop/ImageReady for image manipulation. ImageReady is brilliant.

QuarkXpress or InDesign for creating documentation [that will be turned into PDFs]

For s/FTP, I use Transmit, because it's a Cocoa app, and as such has some pretty interesting features common to all cocoa apps.

When I need to make presentations, I will use Keynote, as it's a bit easier to deal with than Powerpoint. That said, I try to *never* use either. slide shows suck

Hope this helps

My tools:

[notsoclever]

Pencil, paper, a text editor, and Lorem Ipsum filler text. I find it quicker to just knock out an HTML prototype with boilerplate HTML and CSS than it is to try to design something from a top-down approach and then have to redesign it bottom-up to begin with.