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... :-)"
I've used it for software and hardware engineering applications both. I've also used it mock up Windows interfaces for presentations.
It's good to use your head, but not as a battering ram.
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.
This will save a lot of time and is a great strategy but, and correct me if I'm wrong, I think brado77 is more concerned with not having to deal with a lot of code just to get a particular style in the first place. Personally I have had much success in creating a mock-up in any photo/vector app and then using it as a tracing image in something like Dreamweaver. Results aren't always perfect but it at least gives you something to start with and most of the time will require minimal tweaking in the end.
I agree completely. I usually draw my programs on a note pad with lots of little notes to myself.
I never thought of using crayons... but the statement about cramming too much onto a page is a really good reason.
Windows isn't the answer... it's the question. NO is the answer!
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...
Hexy - a strategy game for iPhone/iPod Touch
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
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.).
Is HTML considered a programming language?
Incidentally, with a decent text editor, it isn't hard to whack together quick HTML concept pages. I do this regularly. Just remember, no matter what style you use, it's a big old series of nested boxes.
Programming? Sheesh.
Can't think of one, offhand. I've always used hand-tooled HTML (with CSS when it came along) and equally hand-tooled graphics. I haven't found a WYSIWYG web editor yet that produced even half-decent code.
I don't do much web stuff anymore, though, so there may be better tools out there these days. If you're determined to automate the process at the _possible_ expense of less-than-optimal code, I've heard that Macromedia's Studio MX integrates pretty well. But I haven't used it enough to say either way. Cheers!
Corruptissima re publica plurimae leges.
If you're referring to the sotryboarding aspects, you probably mean wireframes; design concepts that will demonstrate the function of the site. The best way to do this is in a two ways:
1. A workflow charting program like visio to show how each page or every step of the application ties together. It doesn't have to show linking between every single page if there is a home button, but just the general sitemap, and application flow for any apps that will be on the site.
2. Wireframes. These are functional mockups of the pages themselves. They show what navigational elements will appear, not what they will look like , but a general placement of them. These can be simple black and white graphics with imagemap hotspots to link to other pages, or html pages, which ever you prefer.
I also like the good ol' pen and paper. That's my primary method of developing a site, then I will take my work and convert it to a diagram workflow.
I also find a whiteboard to be an indispensible tool.
A graphic program should not come into play once until you have your site structure laid out. Once you know what will be on the site, then you can design for it. This is where Photoshop/Illustrator should come in. Too often you will see designers use this early on, before the site structure has been finalized and this is a mistake.
As for final content, HTML with CSS is great, so long as the CSS you use will work across the majority of browsers you need to support. Properly done, you can manage alot of content with it.
Another suggestion is to use XML and XSLT. For example, on a number of sites I've built, I have kept all the text copy for each page in individual XML files, while the design of the site has been in XSLT. The XML formatting I use is usually a mix of XHTML and custom tags for processing. This allows for easier redesigns and a good way to put real content into wireframes, and quickly redisplay them into production templates when the final comps were ready.
CSS Zen Garden is the most enlightening site I've ever seen when it comes to the power of CSS to seperate content from layout.
I AM NOT AN ARTIST but I am a highly compentent illustrator. I've made a living for over twenty years doing computer graphics ranging from computer aided drafting (AutoCAD) to digital prepress work (Photoshop, Quark, Freehand) to 3d modeling using a number of different tools. I cannot draw but I can do professional layout with the best of them. Since I'm pretty much locked into Windows as an OS (blame AutoDesk) I tend to do most of my web page visualization using the Corel DRAW suite. If in LINUX I use GIMP. If in a resturant I use napkins and a ballpoint.
Whatever method you use to "see" the page in your mind, seperating the content from the layout using HTML and CSS makes life so much easier when your client (or boss) decides your carefully thought out color scheme sucks and insists on purple and orange.
Check out Zen Garden. It'll change the way you do web design for the better.