Slashdot Mirror
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... :-)"
Crayola crayons (wax, not colored markers or colored pencils or anything fancy - regular old 64 in a box crayons.)
... and when you are done you can tape them to the walls as a roadmap of where you are going.
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
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.)
Glonoinha the MebiByte Slayer
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!
Corruptissima re publica plurimae leges.
So it depends on who precisely is doing the storyboarding. She always get mockup from others, or she'll develop mockups. Then people will ask for modifications by directly changing the Photoshop. She works with lots of people who are great graphic artists/designers, but don't know a lick of HTML. So it's an on going problem for her to teach them the limitations of HTML as a medium.
Kirby
He changed his slides because he knew as well as I that what he had drawn just wouldn't work in a browser. So rather than make a grandiose proposal, then look like asses to the clients when it couldn't be done, we scaled back to something reasonable.
While he was doing his Photoshop sketches, I was doing my own design proposal in HTML/CSS. Figured "hell, if I can do it here, I know it'll be possible when we build the real app." My design was clean, elegant, simple, and well-recieved by nearly everyone who saw it. But the clients wanted eye candy on top of everything else, which the consultant had given them. I put more emphasis on function, he was geared more towards form.
Doesn't work that way, in my experience (and I worked on sites for Fox, Sony, Disney and a few other media power-houses). The lead designer is going to have their vision of the way they want it to work, and the coders have to make it work any way they can. Yes, this leads to ugly code, but the client is interested in the shiny, pretty page, not what's under the hood.
You say "semi-slow network connection." I can only assume you mean 56k dial-up, because that's the only remaining speed that might choke on just about any amount of HTML and optimized graphics you could throw on one page.
The primary job of me and my fellow coders was to bend just about every rule of HTML, DHTML, JavaScript, Flash, etc. to give the client what the designer had promised. I'm not saying it was easy, but your talk of real world limitations isn't necessarily on the mark.
This sig intentionally left justified.
Adobe ImageStyler which was discontinued and became Adobe LiveMotion which was very recently discontinued-- they make mockups a breeze for me. It would be nice if it still worked, but the last version on Mac works fine under Panther, and I'm sure the Windows version was current when discontinued.
The main working window is a canvas and I end up creating most of my finished images using the program, though I almost never use the HTML output for finished and web-ready sites. But the reason I'm recommending it is how quickly you can lay things out and publish them to sloppy HTML.
As for which one to get--I think ImageStyler was the best since I use almost no features of LiveMotion, which I believe added mostly Flash-based stuff, and I prefer to use Macromedia Flash for that type of work. I only switched because LiveMotion was carbonized.
ImageStyler was only $100 or so when it came out and no upgrade path was offered to LiveMotion. So I can imagine that it should be easy to find a good deal on Ebay.
Alex.
Making an attractive web site is mostly art and very little technology. Artists use paper. Period. Even if you use "natural media" tools like Painter, it's still like drawing/painting with one hand tied behind your back. If you use a computer for the art-part, it's not because it's the best way or the easiest way - it's only the way to do it because it buys you something in later stages of production somehow.
Usually large format sheets get used for the graphic feel of the pages. Post-Its and string (seriously) for navigation and storyboarding.
It's just too easy to get lost in the technical minutiae of computer-based tools and completely 1) forget the actual goal of the website, and 2) lock youself into a design simply because your tools do it only one way.
Once the concepts of the basic page and navigation layout are solid, only then you use a computer. Even then it's with Photoshop or Fireworks, usually using layers to allow re-compositing of the page components in response to the predictable whims, insanity and backtracking of management. Also layers help with building the three (3) designs/color schemes that will be shown to the key stakeholders for sign-off. Why three? 1 or 2 invites questions of completeness of options; 4 or more is confusing and overwhelming. 3 choices just works best to minimize additional rework.
This is where the guideline cutting features of Photoshop or Fireworks come in real handy. You can fragment your prototype and get the necessary graphic element automatically without further manual manipulation. The Adobe and Macromedia companion HTML tools will suck up the design and graphic pieces and build the page almost by themselves.