Web and print design are parallel disciplines. Embrace both.

If you’re an experienced print designer, what are the barriers you need to overcome to get into web design? What do you need to know before you can add ‘online design’ to your resumé?

We could come up with a whole checklist of things to go over, specifics that differ from print design basics. For example, forget the whole pixels-per-inch thing, that has no bearing on web graphics whatsoever. Instead, it is the actual pixels that matter. Need something to fill a 400-pixel width? Guess how many pixels wide that’ll have to be then? Yep. This is so much easier to deal with than the issues of actual vs. effective resolution and the curve ball that is halftone line count vs. different paper stocks. But this kind of thing is the detail, not the big picture.

At the other extreme, we could say that design is just design whatever the medium, because without some kind of creative problem-solving input there is no design. But no, web and print are intrinsically different so we can’t dodge the question like that.

What does a graphic designer used to thinking about ink have to do to create good, effective work for the web? Funnily enough, this is a bit of a controversial topic. Ask a heavy-duty web developer and you’ll probably get a fairly dismissive answer: “don’t even try until you have a deep understanding of databases, CSS, semantic structure…”, and other things in that vein. This isn’t wrong, assuming you’re talking about designing for high-level web production, but it is also a teensy tiny bit elitist. (Yes, I know, just like some of the more cliquey comments that get bandied about in the traditional design world.)

Good – by which I mean effective – print design requires a certain knowledge of print production, but designers don’t need to have an intimate understanding of ink chemistry, paper manufacturing, offset litho maintenance, the importance of humidity control in paper storage, and so on. That sort of thing doesn’t hurt, and I regularly tell design students they should learn more about end-to-end production processes. Variable data print needs more tech understanding, but it isn’t seen as a crippling weakness if you don’t know, for example, the print order of the four process inks in a standard press setup.

In web design things are a little different. The actual production details are an intrinsic part of how something should be designed, and they need to be factored in as part of the design thinking, to an extent at least. Make wrong assumptions about code structure or how something is shown to the user and your design can be weakened in so many different ways. Not necessarily in how it looks in regular web browsers, which is equivalent to how a printed page looks when trimmed, bound and delivered to the reader. The complexity is added by issues of accessibility, search engine optimising, dynamic content (client and server-side), browser compatibility and so on.
In web design, the compression of the production process and the extension of responsibility for workflow process has reached an extreme. To be fully effective at all levels it seems that a designer needs to be production technician, marketeer, PR guru, hacker, data analyst, copy writer and more – and that’s on top of the regular ‘media creative’ bit.
Daunted? Don’t be; the real problem isn’t needing to be omni-talented, it happens when people don’t understand their limits and carry on regardless. The bliss part of blissful ignorance is always temporary. But that’s no reason to back off. I think every print designer should try their hand at web design… but they should learn enough of the different issues to know how to stay out of trouble and create work that is actually useful as well as attractive. Part of this involves knowing how far your tools can take you. No bit of software is perfect. What we need to understand is which is good for what; the right tools or each particular job as well as for your existing skills.

Okay, let’s take a look at the pros and cons of the various web production tools. Dreamweaver is the big one, the thing most people turn to. It is hugely powerful, but a design tool it ain’t. It is a heaviweight construction environment, great for building structure and assembling content but not so hot for originating design ideas. BBEdit and TextWrangler? Awesomely powerful for coding development, but they’re not even remotely appropriate for actual design development work. Disagree with this? Then go write some PostScript to design your next print layout.
RapidWeaver is popular with many, but while the template-driven approach helps keep the results clean that’s also what holds it back; it is more about production than full-fledged design.

Softpress Freeway is unarguably the most design-focused web layout tool, but if you’re not careful it can make you rather blasé about underlying structure. Remember, in a dynamic, ‘run-time rendered’ publishing environment rather than the precompiled word of print, structure is surprisingly important.
The Escapers Flux is interesting, but it falls between the design and coding stools and it is also really best for assembly rather than design origination. As for iWeb (RIP) and its ilk, those are great… if you want to stick with templates. If you have your own design ideas you’ll struggle.
What about the tried-and-tested print design and production tools we already use? Oh, puh-lease! InDesign CS5 can export HTML ‘versions’ of page layouts – but there’s a reason that feature is called ‘Export for Dreamweaver’; the output simply doesn’t work at a design level, so be prepared for significant fixing up work. QuarkXPress 8.5 actually does a fair job by comparison, but although it has a fair range of options it is still really a print-layout-to-web process rather than one meant for professional web design. There’s little structure control offered, and it prefers to generate as much as possible as graphics.

Photoshop is a favourite for mocking up web layouts. My problem with this is that it is several big steps removed from a real page design layout program AND from a real web page production program. Okay, it can output sliced-up graphics for code-heads to assemble in different software, and the SiteGrinder plugin can do a lot of that automatically. But all this just encourages designers to duck responsibility for really understanding the medium.

No quick & easy answers I’m afraid. There’s nothing that satisfies everyone: no all-powerful equivalent to Photoshop, or even a ‘choose-your-religion, both-are-good’ faceoff like InDesign vs QuarkXPress. Maybe, however, someone just wants to design a damn web page? Why can’t they use whatever tools they want? Isn’t the idea of creativity supposed to transcend the tools? As the pangram says, “an inspired calligrapher can create pages of beauty using stick ink, quill, brush, pick-axe, buzz saw, or even strawberry jam”. Well, yes. But the trouble is, the results probably wouldn’t rank well on Google.

Like it or not, we need to either understand the full details of web page structure and all the rest or choose design tools that deal with these things for us. There’s absolutely nothing wrong with choosing software that takes care of technical details, but if you do — make sure you know and understand things enough so you don’t try to go past your software’s boundaries. Then, if you need to take things further, go find a web specialist who groks the geek stuff AND isn’t threatened by traditional designers with ambitions. After all, work’s work and clients are clients. That, at least, never changes.

Leave a Reply

Your email address will not be published. Required fields are marked *