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

Use what works.

[BigZaphod]

Pencil and paper and whiteboard and markers tend to work pretty darned well, really. And the best part is, they're general-purpose!

If you're getting bored with the design you can always start drawing little tanks and army dudes that come in from the side of the wall and take over the board. As they unleash massive eraser bombs and red splatter attacks it gives you time to think up something better.

I know of no automated software package that has this kind of useful and constructive feedback system...

Second hand advice....

[ComputerSlicer23]

Uhhh, to all the people suggesting using Photoshop as a design tool. My sister is a graphic artist, and is a pretty good Web designer. One of her biggest gripes about people using Photoshop, or other graphic design tools, allows them a ton more flexibility, and options then you can possible extract from an HTML based site assuming you actually use HTML, instead of really big images as your site.

That you can develop beautiful, and wonderful concepts in graphics tools, that can't be realized as actual honest to goodness useable sites via a semi-slow network connection. She always claims that being obsessed with how small your site is, and doing as much as possible directly in HTML/CSS is the way to go from start to finish. She regularly gets photoshop files showing her what to design, and she has to reject, or significantly modify a lot of things, because they aren't possible given other technical constraints.

It reminds me of my brother's old adage, that all architects should have to actually frame the houses they draw. Because drawing in on paper is a lot easier then realizing the finished product given the limitations of the real world.

If you are aware of the limitations, and strictly stay inside of them, I suppose it would work. However, you're talking about HTML. It is a markup language. It's not that hard to prototype a site directly in it if it's static content.

Kirby

Re:Second hand advice....

[ptolemu]

One of her biggest gripes about people using Photoshop, or other graphic design tools, allows them a ton more flexibility, and options then you can possible extract from an HTML based site assuming you actually use HTML, instead of really big images as your site.

IMHO using apps like Photoshop are best for mocking-up for a couple reasons: 1) it's the equivalent of a digital pencil and paper approach (allowing for creativity to flow with ease), and 2) it can be more practical because the mock-up is done in a single environment it is easy to use layers (Photoshop, not HTML) to eventually isolate parts that you will need as separate graphics in the final design.

I think you raise an important issue when you mention that graphic apps '[allow] ... more flexibility' and can thus result in very difficult if not impossible designs to re-create in HTML however, if you have a working knowledge of HTML and know its limitations, I find designing sites can be much more productive and enjoyable when I don't have to deal with code and apps like Dreamweaver that can't handle tables and various other HTML elements with much precision.