I’ve worked with some excellent print designers over the years, and all of them, without exception, consistently made fundamental mistakes when attempting to design an information-rich web site.
Brochure sites weren’t such an issue, but the more complex the site architecture became, the more problems crept in with the layouts produced by my print designer colleagues.
This shouldn’t really be a surprise. After all, each discipline has it’s own demands, processes, technical constraints, and conventions. The problem is, print design and web design are both also largely about the same thing—displaying the written word using appropriate typography, colour and layout. As such, the assumption is made that if you can do one, you can do the other.
This is absolutely not the case.
I’m not a print designer. I don’t understand the first thing about spot colour, separations, and all the other hugely essential ins-and-outs of producing a well-designed, successful piece of print work. In other words, all the stuff that a good print designer is familiar and comfortable with.
If I were to be called upon to produce a nice swanky brochure for a client (against my will, I might add), I can guarantee that I would make an unseemly number of fundamental, costly mistakes.
The same holds true of print designers working on the web. It’s not just about understanding typography, grids, and the like; it’s also about understanding the constraints, the processes, and the conventions.
So, just to prove that this isn’t just one big anti-print-designer rant, I’d like to offer a few helpful pointers for every print designer being forced against his will to design a web site (or for those just starting out making the transition to web design).
I’ve assumed that you won’t be building the site yourself, and will be handing off your design to an experienced web developer, so if you’re looking for pointers on producing the HTML and CSS, I’m afraid you’re out of luck.
Similarly, if you’ve been tasked with the information architecture for the site (i.e. working out the site structure), this isn’t going to answer any questions you might have.
In both cases, this is simply because these are huge topics in themselves, and I can’t possibly hope to even scratch the surface of either one of them in this article.
Assuming you’re still here, read on. These hints won’t tell you everything you need to know about web design by any means, but they should at least explain why web developers give you that exasperated look every time you present them with your latest creation.
This is the big, fundamental shift in attitude that you have to accept, and in truth I can’t honestly comprehend what a horrible shock to the system it must be for a designer used to having total control over every element.
I’m sorry to have to do this to you, but here are some of the many reasons that you need to relinquish (at least some) control of your designs:
If your design can’t accommodate and adapt to these constraints (up to a point), it’s not doing it’s job. Oh, and one last point on this subject, just leave the form controls as they are, as much as possible. I know they’re ugly, but they work, and that’s the important thing.
For the many reasons why your beautiful design doesn’t look just like the Photoshop mock-up, see above.
This is an information-rich site we’re talking about here, remember, not a piece of brochureware. As such there’s going to be a lot of (hopefully) useful content knocking about. Content that you want your users, and the search engines, to read. Now, I know that Flash lets you lay things out precisely, and allows you to use the fonts you want, so you may view it as the answer to all your problems. However, it’s almost certainly not the answer to your client’s problems.
This is probably already familiar territory, particularly if you’ve been involved in information-rich print design (newspapers, for example), but it’s worth stating nevertheless: consistency is an essential part of usability. That means all the links looking and acting the same way, the headings being a consistent size, font, colour, and so forth.
This doesn’t mean that all your links have to be blue and underlined—even Mr. Nielsen has made some concessions on this point. It does mean, however, that it’s probably not wise to try reinventing the wheel too much.
Certain layouts—and variations on those layouts—work, and are widely used as a result. This may mean less creative freedom for the designer, but it also means a more immediately understandable interface for the end-user, and that’s the most important thing.
This is where familiarity with well-designed, well-organised web sites is invaluable, so get surfing (and avoid the look-at-me Flash portfolio sites, at least for the purposes of this exercise).
As stifling as it may be to your creativity, just accept the fact that most people have neither the time nor the patience to learn how to use a web site. This means (among other things) that the navigation really does need to look like navigation, and links need to look like links. Otherwise people won’t click them, and links that don’t get clicked aren’t a great deal of use.
Hopefully this has explained a few of the more common pitfalls that print designers encounter when designing for the web. As always, if you’ve got any comments, please let me know.
And if you’re looking to hire a web designer, I’m your man.