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.

Crayolas

[Glonoinha]

Crayola crayons (wax, not colored markers or colored pencils or anything fancy - regular old 64 in a box crayons.)

I'm serious - web UI / front end design isn't about technical issues, it is about color, texture, artistic expression, symmetry and synergy - it is about expressing yourself and getting across an idea or group of ideas in an organized coherent manner.

Crayola crayons on regular copier paper are best. The resolution of a crayola keeps you from cramming entirely too much crap on one page, the size of a piece of paper pretty closely represents the form factor of your average user's monitor, you can quickly (very quickly) storyboard all kinds of ideas and spread them all out on the table showing your hierarchy, you can use one page to draw your more complicated layouts ... and when you are done you can tape them to the walls as a roadmap of where you are going.

Web front end design is artistic in nature and if you can't do it on copier paper with crayons, you can't do it (not because you lack the technical resouces, but because you lack the artistic vision of what you what - which is not a bad thing, most true hackers are artistically deficient.)

Re:Crayolas

[Rexz]

You know you're a geek when you consider things like the resolution of wax crayons.

Web design mockups

[FlyingOrca]

I have a few suggestions:

1) If you're "mucking through HTML" to change how something looks, you're not taking nearly enough advantage of CSS. Keep your content in XML, XHTML, or transitional HTML; put all your layout stuff in CSS.

2) Learn to use a good illustration program like Illustrator or Freehand.

3) Photoshop is pretty quick if you know what you're doing, and can be pretty useful when making web graphics.

But seriously, CSS dwarfs the other two in importance. Check out the CSS Zen Garden (http://csszengarden.com) for some beautiful examples. Cheers!

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.

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.

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.)