Home » Blog » Web Design 101 for Print Designers – Part 1: Introduction

Web Design 101 for Print Designers – Part 1: Introduction

I’m a front-end web developer, which means I take other people’s web designs and turn them into functioning websites. Throughout my career, I’ve worked with several print designers without any web design experience. Inevitably, the designer’s vision and my job come at odds with one another. I have to explain what they want isn’t possible, isn’t practical, or just isn’t how things are done on the web. Meanwhile, the designer becomes frustrated that things aren’t exactly to her vision.

These clashes don’t happen because either one of us is bad at what we do. It’s because print designers are simply not armed with the right knowledge to make a successful web design.

While you might be a wonderful graphic designer, there is no one-to-one translation from print to web. If you don’t have a basic understanding of how websites are created and work across devices, your designs will come up short.

This primer is meant to bridge the gap between developers and print designers (or anyone who reviews designs) who have little or no experience with web design. I am not a designer by any stretch of the imagination, so this will not be a how-to on designing digital graphics, software tutorials, or design best practices. Rather, this will help designers understand the expectations and realities of digital media, and how to work within that framework.

If you are a print designer who is transitioning into web or taking on a web project, this series might be helpful. It will introduce how websites are made, and how people use them. Armed with this knowledge, you can create a more successful web design.

The Web is Interactive

The key point I want you to take from this is that the web is interactive. The most people will generally do with a brochure or magazine is turn pages. On the web, users can tab/bookmark, navigate, resize the screen, resize the font, adjust the brightness and contrast, scroll, park, print, share, and so on.

InStyle magazine layout - Web Design for Print Designers 101
InStyle magazine’s interior print pages are lively and creative. Print designers have total control over what goes where and how. There is no interactivity.
InStyle website screenshot - Web Design for Print Designers 101
InStyle’s website (shown here slightly modified) follows a familiar pattern: navigation on the top and a stack of content below. Visitors can share this page or navigate elsewhere.

In a print, the designer has total control over the output. The only limiting factor is the reader’s own eyesight.

On the web, you must account for different user expectations. Users expect to be able to, among other things:

  • Get important information on a mobile device
  • Get more in-depth information on a desktop
  • Select, copy, and search for text
  • Read text and see images clearly on different screen sizes
  • Adjust window and font size to their preferences
  • Quickly assess where they are on any given page/site
  • Navigate into or out of a page/site
  • Navigate using a mouse, fingers, or keypad
  • Control audio and video
  • Have a fast experience

I am not, by any means, suggesting that you eliminate art direction entirely from web design and pop out something that looks like every f–king bootstrap website ever. Just about anything is possible when it comes to the web and you can be as creative as you like. But the last thing you want to do is frustrate visitors (and developers) just because you present on a design that makes sense for print, but not the web.

Up Next

Next week’s post will be an introduction on how websites are made, so you can understand how developers translate designs into interactive websites. This knowledge will be the cornerstone of understanding how web design differs from print. Stay tuned!

Are you a designer or developer who has been frustrated while working with the other? Let me know in the comments the challenges you have faced.

Tags: , ,

Leave a Reply

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

Back to Top