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.
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.
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.
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.
Cloud City Digital: DVD Production at its cheapest/finest
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
You're welcome.
Remember: umount it before you fsck it.
For illustrating workflow, Visio is quite nice. You can draw boxes, add nice pretty lines to illustrate the workflow, type in notes, and make changes easily. We use it a lot where I work for diagramming system components and the architecture of the software (UI state design etc) that will be written for it.
;)
For the design of the web pages, Photoshop is quite nice. If your designs are less aesthetic, then a cheaper app like Paint Shop pro may be right what you're looking for.
I would recommend, though keeping a whiteboard and post-it notes nearby. T'is generally a good practice to start really really small and work your way up.
One other thing to mention is to study what other sites have done. I mean really study it. Look at their structure and design themes they worked with. There is no harm in borrowing ideas here, especially if it helps the user in navigating your site.
Oh, you know, I have one other little piece of advice. Make sure to work in layers. Typically you've got your header, footer, and content as 3 seperate aspects to consider. I use Photoshop 7. It has a feature (not in 6, which is why I mention the version #...) called "layer sets". Basically,it means you can group a bunch of layers together, and on the layers tab you can chance the color of them. I didn't realize how important that feature would be until I worked on a web project with these distinct sets.
I'll be monitoring my post here. If any of you have more specific questions, fire 'em off. I love babbling about Photoshop.
"Derp de derp."
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.)
I think the PHP portal software is pretty cool for setting up a quick layout. check out phpnuke, e107.org, and phpportal. They all do a decent job. Even slashdot's backend is available for download.
http://guir.berkeley.edu/projects/denim/
*meep*
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.
As I do this for a living [like many here], I can say I find the following helpful:
Omnigraffle Pro [for creating "linkable" wireframes, storyboards, and site maps. If you are familiar with Visio, it is similar in functionality.
BBEdit. It doesn't suck. I hand code all my HTML, so it is as tight as possible [while still being readable]. It also allows me to code Valid XHTML. If you are building huge sites, I create HTML and CSS templates in BBEdit and shove the templates into whatever CMS delivery system is used.
Photoshop/ImageReady for image manipulation. ImageReady is brilliant.
QuarkXpress or InDesign for creating documentation [that will be turned into PDFs]
For s/FTP, I use Transmit, because it's a Cocoa app, and as such has some pretty interesting features common to all cocoa apps.
When I need to make presentations, I will use Keynote, as it's a bit easier to deal with than Powerpoint. That said, I try to *never* use either. slide shows suck
Hope this helps
Blocklevel: Practical Information Architecture
Pencil, paper, a text editor, and Lorem Ipsum filler text. I find it quicker to just knock out an HTML prototype with boilerplate HTML and CSS than it is to try to design something from a top-down approach and then have to redesign it bottom-up to begin with.
There are 10 kinds of people: ones who understand ternary, ones who don't, and ones who think this joke is about binary
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.
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.
I normally use Macromedia Fireworks for site mockups - it lets you export 'slices' (the page split up into however many boxes) as HTML.
This normally serves my needs as far as presentations etc are concerned, if I need some interactivity then I hack something together from the resultant HTML...
If you need your mockups to be slightly more involved (as I do on occasion), you might want to consider Macromedia Flash as well. From the presentation aspect it can be very useful for demonstrating the behaviour of a site, without the awkwardness of a storyboard.
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.
you know, as far as a design tool goes, id say webmatrix shows a lot of promise. while it is microsft (bad) and version 0.6 (hm), it allows quite a large flexbility in creating quick and dirty solutions. you dont have to do any asp; its just as functional as an html page creator. it seems to be good for actual design solutions versus looking really pretty.
on a number of occassions, ive thrown a layout together, sent it out. since it is an interactive page, people can use it and see where issues might occur. the biggest problem with photoshop is that its difficult to see HOW people will use the site. this is, in my opinion, more important than the visual accetability of the site.
you can use panels in webmatrix like layers in photoshop. you can hide or show them as you wish. i think its going to be a nice product when it comes out (assuming it stays free).
http://www.asp.net/webmatrix/
'nuff said, really.
it's not really the *best* design per se, but not too shabby for really rough sketch
I find that our designers use Photoshop for the design and layout portion of the design process. As you are designing your layout just keep in mind the constraints of the web, and it's box centric layout methods.
For the most part, photoshop, or fireworks has everything you need to "design" a web site. Some people have recommended Illustrator and the such. I think photoshop is better becuase it is is less exact. You'll find that your design does not always translate pixel for pixel to the web. Browser differences and whack user font settings can easily destroy a nicely crafted layout. For that reason, it's better to use photoshop, or fireworks (watch out for rampant spacer gifs).
As far as storyboarding, it really depends on what you are presenting.
If it's a microsite, just make a few nice looking html pages as a "presentation template" that contain JPEGS of your photoshop design. In the presentation you can just link one page to the next and explain the ideas as you go along.
A full web site is a bit different, you'll need to present templates, with some images and and copy in them. This is usually better done with a menu so you can say click on "Template A" to see what the layout would look like. This is style presentation is usaully accompanied by a site map that has the Information Architecture of the site with references to your templates. The site map can be done nicely in Illustrator or Quark.
You are absolutly right that "mockups" should not be done in html. The html and a style sheet should be the output of the design process. You might need to test a layout to see how much text it can hold, but for the most part there is no reason to code a single line of HTML until the design flat are approved by your client/team.
I've been doing web design and such for about 8 years, and have always used CorelDraw.
It's alignment tools, grids, and other precision "stuff" is just better than illustrator, and it can do multi-page layouts (imagine that!). It's like having part of cad, but not all of it.
Set your mind to "100dpi" and you can just make a 8in by 10in template to mockup with; you can even make up a quick suite of form primitives to copy from. You can rip them to bitmaps easily to show clients or print out...
works great.
Yes, Corel. The shovel-ware company. Draw is still good stuff.
Mucous membranes are the part of your brain that, like, make you think about mucous. --Beavis
The Zen Garden may be what graphic designers like to see, but as far as I'm concerned it's smoke and mirrors. The problem is that all the significant positioning is absolute, and therefore it doesn't scale with window size, etc. I'd be much more impressed by a DIV that moved to each compass point around a vertical and horizontally centered image and took up half the space to the edge of the page unless doing so would make it too small to be readable (hint: as far as I know, it's not doable without CSS3 or scripting).
On the other hand, I'd rather have my stupid graphic designer friends pumping out absolutely positioned DIVs than cross-shredding content like Macromedia Fireworks.
HTML is for semantic markup, so unless the app can read your mind, it's just going to spit out garbage (might look okay...until you try it in another browser). The best you can hope for is writing the HTML with an editing helper (closes the tags for you, deals with indent) and then using a wizard like Dreamweaver to help you make it look right.
www.zengobi.com
Check it out.
It is the ultimate storyboarding tool, and is perfectly suited to doing what you ask.
'Nuff said.
Ps IMHO it is a true OS X implementation and a clear differentiator between Macs and other platforms. "Really, really, really good!"(TM)