Teaching Graphic Designers About The Web

I was listening to episode #53 of SitePoint’s podcast when they mentioned that old “should designers code?” debate. While I don’t want to beat a dead horse, SitePoint made a great comment – that perhaps someone should figure out how to write a book on how to teach graphic designers how to do web design. After all, merely telling them to look at the code isn’t going to help them.

This got me thinking. I would love to write this book considering that I was trained to be a graphic designer in college, have been coding since middle school and worked as a web designer for a few years. Who better to write this book that someone who’s been on every side?

Unfortunately I’m pretty busy so I don’t think I’ll be writing one any time soon. So I thought I’d spend some time today thinking about some advice I’d give a graphic designer who wanted to move into the web. Here goes.

The Grid is More Important on the Web

Graphic designers love using the grid, so a web-based grid shouldn’t come as a surprise to them. However, grids for web design are much more different than a regular design grid.

Unlike print design, you never have set dimensions. For example, a print designer might be doing something on an 8.5×11 sized paper. On the web however, some people might have 3″ screens, or they might have 30″ monitors and you have to cater to both. Also, there’s technically no limit to how long a web page can be, unlike a real page of paper.

You also run into coding and browser issues when designing off a grid. When designing a website, remember that coded elements can only be rectangle shaped. A developer can’t code a rounded element.

There’s More Than One “Printer” On the Web

When designing for print, you need to know the printer you’re going to use’s type of paper, ink and requirements for files. That’s it. One the web however, you have to remember different screen sizes, different browsers, even the same browser on different operating systems. Plus now we have mobile devices like the iPhone and the *gay* Droid and larger mobile devices like the iPad. Your site should ideally be able to work on all of them with or without mobile versions.

Don’t Squeeze

Unlike print, you don’t have to squeeze every bit of info on one page or in one area. You can set multiple pages in a site, dropdown menus, sliders and tabs to hold extra content.

This means that the website also isn’t static. Unlike paper you can have things moving around, you can change the appearance on the site based on page load or type of browser agent.

Too Little Decoration Please

In print, everything costs extra. Even colors. A two color print costs much less than a 3 or 4 color print. Embossing, gloss, even the type of paper you choose in your design can add up quickly in cost. This isn’t necessarily true in web design though. You can add all sorts of cool effects and decoration to the site design-wise and it won’t cost any more.

Because of this, I’ve seen a ton of print designers who pile on every rounded corner, gradient, swoosh or anything else they can. Please stop!

You Thoughts

What’s some of the advice you’d give to a graphic designer who wanted to move into the web?

image by Ross Catrow