Web Site Mock-ups and StoryBoarding? 50
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... :-)"
Visio? (Score:2, Insightful)
Canvas, PowerPoint, and Denim. (Score:5, Informative)
My preferred design tool is Canvas [deneba.com] 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 [berkeley.edu] 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 (Score:5, Interesting)
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.)
Re:Crayolas - MOD PARENT UP (Score:2, Insightful)
I never thought of using crayons... but the statement about cramming too much onto a page is a really good reason.
Re:Crayolas (Score:5, Funny)
Web design mockups (Score:5, Interesting)
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!
Re:Web design mockups (Score:2, Insightful)
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
Re:Web design mockups (Score:2)
But I agree completely with what you're saying. Did you see the comment on crayons someone posted later, though? I'm gonna have to try that. Nothing like a fresh 64-pac
Re:Web design mockups (Score:2)
Draw'n'spit? (Score:3, Insightful)
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. Chee
Re:Web design mockups (Score:2)
No really - there is no magic tool that is going to give you good layout automatically. Just as there is an art to the design of the pages there is also an art to the layout.
When building the structure of an HTML page, there are a lot of choices to be made such as when to nest a widget in a table, and when not to.
No program can really understand that context of what you are trying to layout, and how (at least not yet). Until then, use the keyboard.
Semantics Ain't Easy (Score:2)
Mockups and CSS (Score:2, Insightful)
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
Zen Garden Sucks (Score:2)
Re: Zen Garden Sucks (Score:2)
That said, I don't disagree with your underlying theme, that being the importance of scalability. CSS has a way to go yet, but it's an improvement over the bad old days!
Adobe InDesign and OmniGraffle (Score:5, Informative)
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. (Score:5, Insightful)
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.... (Score:5, Insightful)
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.... (Score:5, Insightful)
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]
Re:Second hand advice.... (Score:3, Interesting)
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
Re:Second hand advice.... (Score:3, Interesting)
The trouble is, it's too easy to "design" something in Photoshop that can't (reasonably) be done in HTML. L
Re:Second hand advice.... (Score:2)
That's the fine balance you must find when designing for the web, and it's easy to go either way these days, especially with the numerous approaches to designing a web site. In the end, you just have to find something you're comfortable with and you should know what is possible and what is not. This may be beyond the scope of the discussion but I think that it's also important to note that CSS, though excellent in its presentational capabili
Re:Second hand advice.... (Score:2)
The trouble really was that with the vast amount of data that the clients demanded on-screen, and the way that they demanded it be displayed, all that eyecandy (form) detracts from the function of the application. We've had to make several compromises because of the form that was chosen. When I'm scrounging for every
Re:Second hand advice.... (Score:3, Interesting)
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 ju
Re:Second hand advice.... (Score:2, Insightful)
Couldnt agree with you more.... but there are a few things ignored here. The first is -- a client (usually the marketing director or other similar position) does not care about having "HTML" built. they care about having a good looking website. bells. whistles. 3D FLA
Re:Second hand advice.... (Score:3)
You need DENIM (Score:5, Informative)
Re:You need DENIM (Score:2)
Re:You need DENIM (Score:1)
looks very good though.
oops, a Microsoft product (Score:3, Informative)
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.
Fireworks (Score:5, Informative)
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.)
Re:Fireworks (Score:4, Informative)
XHTML 1.1 Strict and CSS2 are my preference currently. It is easy enough to pick up if you know HTML and people going directly to trublu XML coded sites are probably those that already use XML for other purposes as it is.
Re:Fireworks (Score:2)
Our departments biggest gripe is that it produces stuff that is not even close to Sec. 508 (disabilities compliance stuff) correct, although it renders nicely in many browsers on m
Re:Fireworks (Score:1, Troll)
If you've already got Photoshop, learn how to use it.
Re:Fireworks (Score:2)
Anyway, the newest Macromedia suites, and it kills me to say this, actually generate some pretty decent HTML. Prior to MX / MX 2004, the code was awful. Their mouseover, etc. stuff is still awful, and I still prefer to use my own JS (actually, I do all of my development with vim, but I do have to work with other developers), but the HTML Deramweaver spits out (and Fireworks, sortof) is reasonably decent to work with later on.
Php Portal software? (Score:1)
DENIM (Score:3, Informative)
http://guir.berkeley.edu/projects/denim/ [berkeley.edu]
Re:DENIM (Score:1)
"core apps" (Score:3, Informative)
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
My tools: (Score:3, Informative)
When to use the right tools. (Score:4, Insightful)
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.
ImageStyler and LiveMotion (Score:3, Interesting)
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.
Forget the computer initially (Score:4, Interesting)
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.
Powerpoint, or equivalent (Score:1)
it's not really the *best* design per se, but not too shabby for really rough sketch
Design Process (Score:2)
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 diffe
CorelDraw (Score:1)
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.
Y
Curio (Score:1)
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)