Print vs Web Design

Sam DeMastrie

May 21, 2013

Imagine this:

What if, instead of Facebook—the bright, active, and engaging social website, it was Facebook—the tactile and glamorous by-weekly publication? Picture the cover: the masthead is Facebook blue with that ever-familiar white wordmark spanning the width. The rest of the cover is a framework of profile pictures accompanied by the occasional notification or update (so-and-so is now friends with what’s-her-name), while the inner contents boast a myriad of personal micro-conversations, photo galleries, and lots and lots of ad space. Doesn’t quite work, right?

The worlds of print and web are clearly very different and occasionally (though not always) serve quite different functions. From a design perspective, there are a whole slew of must-know distinctions, but let’s look at the main ones:

Color

Printers use four pigment-based additive colors—cyan, magenta, yellow, and key, aka black (CMYK)—to print their pieces. The web, however, essentially being a piece of electricity, uses light-based subtractive color—red, green, and blue (RGB). Because of this, the color gamut on the web is much wider.

Tip: On a Mac, right-click on a file, then choose “Get Info.” The “More Info:” section will tell you whether the file is CMYK or RGB.

Clarity

Another major difference between the two mediums is image quality. The standard for high quality printed imagery is 300 dpi (printed dots per inch). Conversely, the web requires lower file size (for pages to load as quickly as possible), and therefore high quality web images need only be 72 ppi (pixels per inch). This is why designers get frustrated when a provided image from the web needs to be included in their next publication—it’s tough to make images look great when moving to different mediums.

Tip: If you don’t own Adobe Photoshop, Indesign, or Illustrator, you’ll probably have a tough time determining your image resolution. Find a friend who has Photoshop and ask them nicely to help you out.

Communication

Beyond the technical differences, the design process of a functional website versus a functional poster is largely the same. The designer must still go through the same steps. That is to say, they must ask questions (who, what, where, when, why, how) and provide a successful solution that adequately communicates to and works for the right audience to deliver the right message.

Tip: Every once in a while, step back and look at your design with fresh eyes. Try to put yourself in the shoes of your target audience to make sure the elements on the page or screen read well and tell a logical story.

At the end of the day, that’s essentially it. The differences between the worlds of print design and web design are far less important (and less interesting) than their over-arching similarities. Whether we’re designing a website and social media assets, or mailers and newspaper advertisements, it all starts with sketches and ends with a beautiful way to communicate.

Though I wouldn’t mind flipping through a FaceBOOK.