Psychology-driven brand design. Creating and refining remarkable brand identities.

Design - from all angles

A blog about branding, marketing, and design, mostly through the lens of practical psychology, intended to be a resource to small businesses and entrepreneurs. Unless otherwise noted, all articles are written by Nyla Smith, owner of n-Vision Designs. {Subscribe to the RSS feed here: RSS}

Designing for print vs. designing for web

Nyla Smith | Wednesday, August 17, 2011

Being a Graphic Designer means I design for both print and web. While there are many obvious similarities—design principles don't change, I use many of the same software programs— there are differences between the two that people may not be aware of.

Aesthetics and communication are parts of the equation, but the experience also has to be designed, and that experience will differ between the two. In addition, there are technical considerations and marketing considerations for each one.

Print design - a consistent, tactile experience

When I say print design, I mean anything that is actually printed. This means brochures, fliers, magazines, CD covers, etc. These things are all tactile—you can physically touch them in their finished state. In print design, you have to consider more than just the aesthetic design, you also have to consider the paper is it printed on—the color, texture, weight, and finish. That becomes part of the experience of the piece as you see it, pick it up, and feel it.

With print design, what you see is what you get. It's printed on a finite piece of paper—it doesn't grow or expand over time. If you put it down today and pick it up tomorrow, it will still be the same. If somebody else takes it to their house, it will still look the same. Typically, there is not much interactivity—other than possibly flipping pages, or turning it over—but there are no links to click on, rollovers to hover over, etc. It doesn't respond to you as you interact with it. It is what it is, and nothing more.

Web design - a fluctuating, interactive experience

Website are viewed on some sort of digital display like a computer, tablet, or mobile phone. Unlike print design, the finished product can appear variable, depending on where or how it is viewed. A website isn't viewed on a tangible piece of paper; it is viewed across a variety of media with various browsers, operating systems, settings, monitor resolutions, and color profiles. That means the same website may look a bit (or a lot) different on another device. Maybe the color will look a little less bright, the text will look a little bigger, the font will look different altogether, or there will be more of the page background visible. These things are all dependent upon the capabilities and settings of the individual device they are viewed on.

Web design gives the flexibility of providing interaction with the viewer—things happen in response to your mouse movements and clicks. Sections can expand, navigation is highlighted when you roll over it, etc. There is generally no set size, unless you specifically want your website set up that way.  But, put enough information on a page, and you'll be scrolling forever..there's no limit.

Websites are also frequently evolving. Effective websites have constantly updated information. The same website may have additions, revisions, and updates from one day to the next, or even one minute to the next. Some companies redesign them completely every few years.

Technical considerations: web and print are not created equal.

You may not be a Web or Graphic Designer, but if you ever decide to work with one, it's good to have a basic understanding of some of the constraints and possibilities of each.

#1: Print design requires high resolution photos. Web design does not.

This is probably the most common issue I have... getting high quality images from the client. Here's a typical example: I start out by designing a website for somebody, using some photos they've provided me with. A month later, they want me to design a brochure and "just use the same pictures you did for the website." I can't always do that. The images they provided me were fine for the web, but not high enough quality for print. Another typical request: "Can you just grab our logo from our website to use?" Aaaand, the answer is no. Not for print work. The magic numbers here are 72 and 300, which should indicate the resolution, or sharpness, of your photos. Computer monitors can only display images at a resolution of 72 ppi (pixels per inch), so that's the quality your web images should be. Printers require at least 300 ppi.

What exactly does that mean? Well, pixels are the smallest unit that can make up an image. Think of it as a teeny tiny square of color. The more pixels that are contained in an image, the clearer the image can be. This is called the image resolution. So, say it with me now: 72 ppi for web, 300 ppi for print. Always.


The image on the left shows a 72 ppi web graphic as it would look when you try to use it for print. The image on the right shows what it should look like, when saved at 300 ppi. You can always make an image smaller and be fine, but you cannot make an image larger without losing quality.

#2: Color: RGB vs CMYK vs Hex vs PMS

I could write an entire post on this topic alone, so I'll just give the bare bones here. Your computer monitor displays all colors as various blends of red, green, and blue. This is the RGB color space. Printers print colors as blends of cyan, magenta, yellow, and black (or registration). This is the CMYK color space. Web colors are displayed as Hex (hexadecimal) formulas, which consist of six digits (letters and numbers) that correspond to the numerical values of the red, green, and blue in RGB. In print, there are also "spot colors" which are standardized blends of color pigments that are then each labeled as a specific name or number. The Pantone Matching System (PMS) is the most widely used color library of this type that allows for specific color matching regardless of how it is output. Ask any organization that has gone through the process of corporate branding, and they'll be able to tell you their specific PMS colors.


In my logo, I use PMS 180 as my orange, PMS 382 as the green, and PMS 308 as the blue. These colors will remain consistent across all that I do. When necessary, I convert the PMS colors to their corresponding CMYK, RGB, or Hex values.

Color is a big consideration in design. That "just right" shade of teal is what you're going for, and nothing too blue or too green will work. PMS color swatches can help you find your exact colors, but the thing many people don't realize is that since color is "constructed" differently in print and web, a color may not look exactly the same on both. Also, monitors are only capable of displaying a limited spectrum of colors. So even if your teal is perfect in print, that same artwork may not look exactly the same on your website, especially when viewed on different monitors, each with its own color profile specified in its settings.

#3: Measurement units: pixels vs inches (and ems vs points)

For print, space is measured in inches. For web, space is measured in pixels ("ems" are also used, but I'll save that discussion for another day). By the way, inches aren't the only unit of measure for print; there are also picas and points (which most people use regularly and just don't realize it). Quick lesson: there are 12 points in a pica, and 6 picas in an inch. This means there are 72 points in an inch. These measurements are mostly used in typography. (And this is why you see font sizes in Microsoft Word listed as 12 pt, 14 pt, 16 pt, etc. It is based on this system of measurement. If you wanted your type to be one inch high, you would use a 72 point font size. Which just so happens to be the largest default size in the list, don't-cha-know.)

Marketing considerations: what is the purpose of each?

#1: The goals are often different. Don't try to make them duplicates of each other.

Cater you message to the medium. Many print pieces are simply trying to get someone's attention, first and foremost. Once your have their attention, the goal is often to convince them to follow up with calling to place an order, emailing for more information, visiting your website to try a free trial, stopping by your brick and mortar location for a blow-out sale, etc. Most are designed to generate awareness, capture attention, and pique interest. THEN, in many cases your website can be an effective tool for "closing the deal"... and you want them to stay on it for as long as it takes until that happens. This means all the details of your products and services can be found on the website. Don't try to cram all these details onto a 4x6 postcard. Which leads me right into the second point...

#2: Adjust your content accordingly. The web is flexible. A printed piece is not.

I've had people try to put five paragraphs of text onto the back of a postcard. Not. Gonna. Work. This information can go on the website; it is not meant for the back of a postcard. Even if you are making a product catalog, you may have to limit the number of pages to keep costs down; so you might want to display only your best-sellers. Keep your copy relevant to the matter at hand (which is getting them to the next step in your selling process); you only have a limited amount of space on a printed piece—make every inch count. On a website, you can have a lot of information, but the design can dictate how much is seen at one time to keep from overwhelming the visitor. For example, having a single sentence description on the homepage with a "click here to read more" link allows you to organize a lot of information without it feeling like a lot of information.

And this is only the beginning...

I could go on...but we might be here for a while. So I'll tackle more in individual posts over time—specifically on color, type, and the planning processes designers and clients might go through for each medium.

However, now that you've had your crash course, you should nonchalantly let the term "pica" slip out next time you're talking with a designer. They'll be impressed. And, if you need more ammo, head over to my Designer's Lingo Glossary to brush up on a few other things.

Nyla Smith is a Graphic Designer, Web Designer, Front-End Web Developer and Consultant with over 12 years of experience. She is the owner of n-Vision Designs, LLC in Hampton, Virginia, which exists to provide marketing support and brand consulting to small- and medium-sized businesses needing creative solutions. Contact Nyla if you'd like to discuss your next creative project. She can usually be bribed to a meeting with a cup of green tea and an oatmeal cookie.
Comments
Post has no comments.

Keep reading: