I should start off by saying that I love print design. My roots in design will always trace back to my background in print.

Yet, print is endangered. Why kill a forest reading the newspaper when you can view it (and more) online? Why fumble through thousands of pages in the encyclopedia looking for something when all you have to do is type it in Encyclopedia.com and boom – like magic – it’s right there. With the internet becoming more of a daily tool, employment in print is fading. Plus, I should probably mention that a majority of the best paying jobs in graphic design are in web work.

See, my formal educational background is in print, and when you went to Myers School of Art, print is what’s hammered in your head. You studied print in lecture, you did hands-on print in the studio, you dreamt every night about print. If you need to know all the useless print lingo, I’m your guy. The word “web” was like folklore in college, brought into the art school by friends of computer science or programming majors. There wasn’t time to learn about rollover web buttons or CSS when you were mentored by instructors who went to Yale and CIA decades ago. In a game of follow-the-leader, I essentially learned what my instructors did during their days in school — I’m talking minimalist design, color-limited posters and hand-rendered typography.

With all of that said, designing for the net should have been out of my comfort zone upon graduation, like it still is for most of my peers. Had I not done web work away from school I would have been just as lost. Still, I’m the furthest thing from a web veteran, don’t get me wrong, but the professional move from print to web has been an eye-opening experience. I’ve had to wrap my mind around new techniques, adapt to web standards and, in many ways, begin to think inside the box. There’s this aura, this fear about learning the web that turns print designers off to everything that isn’t Flash. I’m here to burst that fear of the unknown that is web design, fellow print artists, because it’s a lot easier to adapt than one might think. Let’s start off discussing the 101 — the basics — and major difference that is…

Print Piece vs. Web Layout

I don’t ever recall designing a brochure where I’ve had to include a navigation bar, or a website that had absolutely no sense of direction. Most print designers have trouble designing for the internet because they try too hard to make the piece unique. There’s a certain standard to designing for the web: elements have to play nice, there has to be accessible roads to travel (navigation) and you can’t expect the audience to see the exact same things on their monitors. It’s fundamental to know that the web isn’t something physical — like a print piece — that you hand to your client or audience. These website things have to be used also, people! Count on all fancy live text you set to wrap differently on Internet Explorer (boo!) than on Firefox(use it!). There are just too many user factors that could uproot a web layout — things such as browser platform, user preferences (text size, image display, etc.), window resolution, and connection speed (more on that later). When you’re doing print work, the world is at your fingertips — all you do is design, put things where you want, and press the print button. In the web, there are no pages to flip in order to navigate, thus information architecture is very important.

When I first dove into web several years ago I realized that HTML isn’t paper; there are limitations! It’s the hardest pill for us print designers to swallow, but the truth hurts.

Resolution

One of the hardest transitions from print to web has been adapting to resolution (no, not your monitor screen). I’d typically use 300 dpi (dots-per-inch) if I were designing a detailed flyer or CD wallet, perhaps 200 if I was worried about file size and had little texture with lots of solid color. When designing for the web, however, resolution isn’t quite as detrimental. At a universal 72 dpi, a brush is a brush, hardly ever too small, and there’s no concern over how a certain gradient or overlay will print. The days of pre-press proofing are long gone since coming over to web design. Outside the brightness and contrast variation between monitors, what you see is what you get. The great thing about the web is that I could still set my resolution higher than 72 dpi, say if a client wanted a print-ready file, and make it work (though download times will rise too). On the other hand, if I went to the printer with a 72 dpi file and placed an order, the end result would be a pixelated blob and have me on the unemployment line.

Enter next question: “Why couldn’t you just upsize the resolution in Photoshop to make it press-ready?” Well, in short, you could. However, by doing this you’re digitally expanding the pixels of an already fixed image, thus your file loses its natural luster. Think of Photoshop’s resolution expansion as being a t-shirt for a moment – when you take a small shirt (72 dpi) and put it on a large person (300 dpi), the material stretches to conform to the change of size. It’s still the same color, but wouldn’t the thread become thin and the design break and/or crack? That’s what happens when you “scale” resolution in Photoshop, because it adds similar — but not exact — pixels to the image, breaking down its appearance.

Fonts & Typography

Completely and totally out of your control is the appearance of text on a website. Typography is very watered down online; font choices, text breaks, kerning + spacing, and legibility are predominately determined by the web browser. It’s also imperative to remember that your monitor is at 72 dpi, meaning that the text on screen is much more harsh on the eyes than on a print piece. A website with lots of text gives people headaches (no, seriously… it does!) and the experience just turns people away. The best way to dull the pain of your text is to use lots of white space and contrast — it calls for the user to engage what they’re reading more so than if it were bunched together. Slightly offset whites and darker grays can ease the strain too, as opposed to pure black and white.

A World of (Limited) Color

Ah, color. Now we’re talking. In the print world, your biggest peeve is when your color looks different on the screen than it does when you print it. Well, guess what? You’ll also be fighting the monitor in web design, except you’ll be up against countless others — that ofeverybody’s who will visit your site! Color will always differ since there’s no default setting for every monitor, and so goes brightness and contrast. I’ll guarantee a dark crimson red on your screen will show up black on somebody else’s, so choosing the right color scheme for your design is important.

Demographics & Design

I think it’s pretty self-explanatory that the internet is much bigger than any print piece. It’s not physically bigger, and no you can’t touch it, but it’s broader. The internet reaches everybody, whereas mass mailings still have their limit. We’re talking about people in South Africa, Thailand and Dubai — the whole world over — who will be open to view your work. From a graphics standpoint, designing for a demographic on the web doesn’t change too much from print work. After all, the objective is to capture the user in your work. The target audience will vary depending on the client, like it would for a print piece, but just because you have access to brushes and effects that can enhance (or not) your design at the click of the mouse doesn’t mean you should use them. It’s much easier to get carried away and overcook work on the web simply because the design doesn’t feel like its “complete” or all it could be, and why would it when you only used one cool brush out of the dozen cool brushes you have? There’s obviously still a need to worry about text size and legibility issues too, even if the user can manually alter that state. Keep your approach to designing for the web similar to if you were doing a print piece; if it looks like too much than it’s probably too much. Step away from the brushes and filters for a moment and be the target audience!

Surrendering to the Greater Good

Internet connection speed can kill a good design quicker than you think. You could design the most beautiful layout the web has ever seen, but how good is it if the majority of users will die of old age before it loads? Sometimes you have to surrender to a lower image size in order for faster load times, even if that means reducing its quality. I love PNG’s as much as the next guy, but more often than not they will be triple the size of a JPEG. Essentially what’s at stake when using a PNG over a JPEG are the user’s precious moments – do they really care to wait three-times as long? Unless the client wants print-ready PDF links or monkeys swinging from trees (i.e. Flash), there’s just no need for bulky static pages. Unlike print work that’s right there and ready to view, the web needs time to upload images, and how much time depends on the users machine and connection speed – which brings me to my next point. Not everybody has the luxury of DSL or the fast internet experience (yet); I still know people who use dial-up because it’s dirt cheap and that’s fine. The question is: how will people on slower services cope with even slower loading times? The general population is impatient and won’t wait 45 seconds before they can begin navigating your page, let alone a few minutes. The underlined message is that the web is touchy, so don’t bog it down with unnecessary file types unless it calls for it. The whole “image is everything” expression doesn’t rule here in web land because of accessibility issues… you can actually use smaller and/or reduced image quality in web design and get away with your head!

In Closing…

I don’t see a reason why most print designers can’t be successful in the web world. It’s not like pulling teeth and it shouldn’t rack your brain. For me, the beauty of web work is in its challenges: a person has to be able to make things look good and make them functional and usable. The technical basics of each realm are quite similar; coming to terms with the layout and accessibility differences between the two, however, is vital in becoming a bilingual designer.

Let’s not kid ourselves — print design will never completely die. Nevertheless, these days traditional design jobs are becoming increasingly hard to find as some kind of web experience, even if minimal, is usually required for most positions. This instantly deters well-qualified print designers from applying because they maybe never touched HTML or tried doing a website. I encourage everybody, especially those of you ready for a change of pace or those who are having a difficult time finding the right job, to bury the fear or ego and learn to design for the web. Being able to successfully operate in both print and web design gives you a nasty 1-2 punch. You’ll thank yourself next time you get on Monster or CareerBuilder and see the dreaded “web experience required” note next to that high-paying job you want.

The internet is doing nothing but swelling, and so too is the demand for qualified web beauticians. If you already know the print basics, the transition to web design is easy so long as you remember what we’ve touched on here. It’s time to make the move, my friends. Your life will thank you in more ways than one.