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

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

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!