Graphic Design for Print vs The Web: 15 Vital Differences You Need To Know About

Print and web: two sides of the same design coin.

Though print and web designers have a lot in common, there are some important variations that people (both outside and inside the industry) often don’t understand — ranging from workflow and file formats to tools and terminology. While certainly not extensive, the following guide offers a brief overview of some of the biggest (and often, the most confusing) differences between the two disciplines.

01. Viewing Method: How Users Approach Your Design

One of the biggest differences between print and web designs is how people view them. Holding something physical in your hand — a piece of paper, a folding brochure, a book — is a much different experience than viewing something on a screen. There is some crossover, such as digital magazines that are laid out in the exact same way as their printed counterparts, but generally, the physical versus digital experience is a pretty clear dividing line between print and web design. Where and how designs are viewed play a big role in the decisions designers make.

02. Experience: How Your Design Engages Users’ Senses

Closely related to the physical or digital nature of a design is how users experience it. Both print and web design share a visual quality in common — the design needs to make a good impression no matter what the final product. To this visual component, print design adds a tactile experience that might include texture, shape, or printing effects like letterpress, embossing, or screenprinting. The web design experience adds the possibility of audio/video elements and other interactive options (more on that in under #3). Take books, for example. Many readers love the weight of a book in their hands, with the texture, rustle, and even the smell of the pages; those are qualities that can’t be reproduced in any digital form. E-books, however, have their own unique qualities that can’t exist in printed form: a children’s e-book might have animated illustrations, or a digital textbook might have hyperlinks to other resources. Both approaches have their own value and appeal.

03. Static vs. Interactive: The Design Lifecycle and How Users Connect with a Project

Once a design goes to the printer, it’s not going to change (barring a decision to re-design and re-print — which costs time and money; not ideal). Web design, however, can be tweaked, changed, or completely redesigned at any time. Many websites, especially those with frequently changing content — a news website, for example — will look different every day. Different pictures, different text; they’re created to change. That means that (unlike print designers, who generally ship off a job to a printer and call it done), web designers must consider the ongoing functionality of a project. Elements like buttons, links, mouse-over effects, forms or polls, videos, and other interactive features need to work correctly. There’s no quicker way to lose a user than when something doesn’t work as expected. Web design stands apart from print design in that this interactive, dynamic quality often requires some sort of input or effort on the viewer’s part, such as clicking, typing, etc., which brings us to our next point…

04. Usability & Navigation: Making Your Designs User-Friendly

Since print design is contained to the physical size and shape of the surface or object, navigation is usually limited to flipping or unfolding a page. On the web, it’s not so straightforward. Users might encounter any number of different layouts and need an easy way to find the content they’re looking for. That’s where menus come in. They have become the hub of website navigation, and need to be in a location that’s easy for visitors to find. With the recent explosion of different web-enabled devices and gadgets, there’s a growing concern about how websites display on various devices and screen sizes — which has led to a focus on responsive design, or designs that adapt to various viewing methods. Web designers must consider not only how the design looks on different devices, but also what happens (and how the design changes) when viewers scroll, zoom in and out, or take other actions. Mobile design and mobile web browsing have become huge considerations. How will readability and navigation need to change to best cater to those formats and create a good user experience?

05. Compatibility: Testing Out Your Web Designs

For web designers, compatibility forms a major component of creating a great user experience. Any design for the web — including websites, emails, e-newsletters, and other formats — need to display and operate correctly in different web browsers and with different operating systems. This can get complicated, since these various platforms each have their own limitations. For instance, iOS, Apple’s mobile operating system, won’t render any Flash-based designs, and Internet Explorer (versions 8 or below) can’t display SVGs (scalable vector graphics). Web designers have to keep all these issues in mind and more to make their designs as user-friendly as possible for as many people as possible.

06. Layout: How You Arrange Your Content

Both print and web design have many design elements in common: typography, images/graphics, shapes, lines, color, etc. So, many of the same best practices apply to each. Each approach also has its own unique layout requirements. For print, all information must be presented within the constraints of the printing surface, whereas for the web, designers have almost unlimited flexibility to organize, arrange, and filter information. Printed projects must meet certain standards using parameters such as margins and bleeds, while websites aim for a consistent experience between different viewing methods, such as web and mobile. Because various browsers may change a web designer’s original layout, achieving top functionality requires testing with different browsers and operating systems.

07. Size: Making Good Use of Your Design Space

Size and layout go hand in hand. For print design, the size of the printing surface is one of the biggest determiners of how the designer will make use of that space — what design elements will be used, the amount and size of the text, etc. Though there are standard sizes for many projects (letters, business cards, posters, photos), possibilities are virtually unlimited, as paper and other printing surfaces can be cut to any size or shape.   For web, “size” is more abstract. The sizes that designs are viewed at tend to be limited to a certain number of devices that are currently available — from computer monitors and laptops to tablets and smartphones, but that content should ideally scale to fit any device. That adaptability, known as responsive design, is becoming increasingly in demand as people’s web browsing habits shift in a more mobile direction.

08. Resolution, Part 1: Overview & DPI (Making Sure Your Designs Look Their Best)

It’s important to understand the basics of resolution for both print and web, since resolution determines image quality — how good photos and graphics look in your final design. That being said, bear with me; we’re about to get a little technical here. You’ll often hear resolution referred to using two terms: DPI (dots per inch) or PPI (pixels per inch). Many people mistakenly use these interchangeably, but they’re really two different things (Even software developers that should know better — Adobe included — have labeled these incorrectly at times). DPI comes into play in the actual printing process — it’s the density of the dots of ink printed on an inch of printing surface. Equipment that is set to print at a higher DPI will produce a higher quality image reproduction. But, unlike PPI, DPI has nothing to do with the size of a print. It does have to do with the capabilities of the printing equipment being used — something most designers have no control over. Furthermore, DPI is irrelevant for web design, since it specifically involves how ink is printed on a surface. Just be aware than many people mistakenly use “DPI” as a blanket term to refer to resolution in any design context.

09. Resolution, Part 2: PPI (Making Sure Your Designs Look Their Best)

PPI involves the number of pixels (the square building blocks of a digital image) displayed in an inch of screen space. The more pixels per inch, the higher quality an image will be — clearer, sharper. Pixelation (blurriness, distortion, loss of quality) occurs when the PPI is not sufficient for the size the image will be displayed or printed at, or when the image does not meet or exceed the resolution of the screen where it will be viewed. Screens on devices we use today have pre-determined resolutions. For web work, the general standard for acceptable quality images is 72 PPI, though that may be changing, as more devices are being produced with high-resolution displays.Sebastien Gabriel, a designer for Google Chrome, clarifies: “Windows computers have a default PPI of 96. Mac uses 72, although this value hasn’t been accurate since the 80’s. Regular, non-retina desktops (mac included) will have a PPI of 72 minimum up to around 120 maximum. Designing with a PPI between 72 and 120 ensures your work is going to be roughly the same size ratio everywhere.” Preparing a digital image (measured in pixels) for printing (measured in inches, centimeters, or other units) is where the confusion often sets in. If pixels represent screen space, how does that translate to how the design will render on paper? Anofficial U.S. government resource advising museums on how to best conserve photographs and other resources suggests that PPI and print size have an inverse relationship. That is, a higher PPI value (more pixels per inch) condenses or reduces the physical size of a print, but increases its quality. This means that, depending on the characteristics of a specific project, designers need to set a file’s PPI to produce the right combination of size and quality:

“The acceptable amount of PPI needed for a quality print is dependent on the size of the print. Larger prints are generally seen from farther away than small prints, so a lower number of PPI will generally look acceptable visually….

Without magnification, the human eye can’t differentiate detail in a print greater than 300 PPI. Depending on the printer, the general standard today requires 300 PPI for a quality print.” You may often hear printmakers and even designers express the need for a file saved at 300 DPI. They really mean 300 PPI.

10. File Types: How to Choose the Right Format for Your Design

Designers have a multitude of file types to choose from. But which ones are right for which situations? Are some more suitable for web than for print, and vice-versa? Although all those acronyms can get confusing, it helps to understand that every file format falls into two basic categories: raster or vector. Raster images are composed of pixels — digital photos are a common example — and their quality varies depending on their resolution (which we just discussed above). Distortion can happen easily if a raster image is enlarged beyond what its resolution (measured in pixels per inch) allows for. Vector images, on the other hand, are not limited by pixels. Without getting too technical, vectors refer to graphics that are defined by mathematical equations, allowing them to be scaled to any size without loss of quality. Here’s a quick rundown of some common file types, their characteristics, and what types of projects you can use them for: Both Print & Web:

• JPG (or JPEG): Most people will be familiar with this one, the default file format on many digital cameras. JPGs must be saved with an appropriate resolution and in the correct color space (CMYK for print and RGB for web; more on that in the next section).
• PDF: widely used; preserves the original content and appearance of a file regardless of where or how it is viewed
• EPS: most common for saving vector graphics to preserve their scalability; not always readable on PCs
• PNG: high image quality; supports transparency/opacity

Print Only:

• TIFF: high image quality and large file size (compressing image does not reduce quality, unlike with JPGs); compatible with both Macs and PCs; commonly used for final handover to a printer

Web Only:

• GIF: supports graphics featuring animation and/or transparency effects; color capabilities not as good as JPGs (256 colors or less, so not appropriate for photos); ideal for simple graphics on the web, since low file size doesn’t negatively impact page loading speeds
• SVG: vector format that can be scaled up or down to any size without loss of quality

Software-specific:

• PSD: an editable (raster-based) file created in Photoshop
• AI: an editable (vector-based) file created in Adobe Illustrator

  If your design is for the web, always select “as an image”, or if it’s for print select “PDF”.

11. Color, Part 1: Overview & CMYK (What Type of Color to Use for Print)

Color displays very differently printed on a piece of paper versus viewed on screen, because it involves different color spaces: CMYK for print and RGB for web. If using both methods for a single project — say, helping a business develop a logo for its website as well as a coordinating business card — a designer will need make sure colors appear consistent between the different deliverables. How to do that? The most common way is to use the Pantone Matching System. Equivalent colors can be determined for web and print, and also for different types of printing surfaces. Pantone colors have their own reference numbers, which are different than the color codes associated with CMYK and RGB. The Pantone system makes it easy for designers, clients, and printers to collaborate and ensure that the final product looks as intended. Now let’s get right down to business. What is CMYK? It stands for the four ink colors used by all printers: cyan, magenta, yellow, and black. Designers identify individual colors they want to use for a printed project with codes that give the percentage of each type of ink required to form a certain color. For instance, if you wanted to use the same shade of blue that Twitter uses for its logo, the company’s style guide tells us that the CMYK color code for “Twitter Blue” is 70/10/0/0 — that’s 70% cyan ink, 10% magenta ink, and no yellow or black ink. You could then input that code into your design software and use the same exact shade of blue that Twitter does. When working on a design using the CMYK color space, it’s important to keep in mind that the colors on the screen don’t accurately represent how the colors will look when printed. Going through a proofing process is necessary to ensure the color translates correctly from screen to paper.

12. Color, Part 2: RGB (What Type of Color to Use for the Web)

RGB refers to the colors you see when you’re looking a digital screen or monitor — dots of red, green, and blue light combine to create visible colors on your TV or computer screen. Achieving consistent color for the web can get tricky, since display capabilities vary from monitor to monitor and colors will look different depending on settings for brightness, contrast, etc. Ideally, users will calibrate their displays ensure accurate color representation. (Both Mac and Windows operating systems have built-in tools you can use to calibrate your own laptop screen or external monitor.) RGB colors are represented by three sets of numbers (ranging between a minimum and a maximum, usually 0 to 255) that refer to the amount of red, green, and blue light it takes to render a certain color. To continue the Twitter example, the RGB value for “Twitter Blue” is 85/172/238 — with 238, the value for blue light, being predominant. Six-digit codes known as hexadecimal values, commonly called hex codes, are another way to label RGB colors. These are used specifically to identify and render color when building a design with HTML and CSS. Because the RGB color space uses a bigger color spectrum than CMYK, it’s worth noting that some designers like to initially create a print project in RGB for more color options, then convert the finished design to CMYK before printing. So, that’s how the design pros think about color. If you’re feeling a little overwhelmed, you’ll be glad to know that Canva automatically optimizes your designs for print and web. Choose your colors from the color wheel by dragging your mouse around the circle spectrum. When you’re ready to download your design you’ll be given two options: to save as an image, or a PDF. If your design is for the web, always select “as an image”, or if it’s for print select “PDF”.

13. Typography: How to Choose and Use the Right Fonts for the Right Design

If you’ve ever purchased a font or downloaded a free font online for a design project, you’re likely to have noticed that they come in two categories: desktop fonts and web fonts. These terms have to do with licensing — the legal and copyright issues surrounding where, how, and how many times a font can be used. In general, desktop fonts are licensed to a single user to install on their computer and use in various ways, often for print design. Web fonts, on the other hand, have been created and optimized specifically for use on websites, using CSS. Designers’ choices for web fonts used to be pretty limited, but resources like Google Fonts(free) and TypeKit (limited free options; otherwise paid subscription) are changing that. Aside from the actual resources designers use to handle typography, approaches to arranging type differ between print and web projects. For print, aside from commonbest practices, anything goes — the approach depends largely on the specific projects, and designers have complete control over how the typography looks. For the web, however, fonts that display cleanly and are easy to read (often a sans-serif font, or an unembellished serif) are prioritized. Designers have less control over how fonts display across various devices, so enhancing readability(as much as they can) is key — that’s why web content often has short paragraphs of text and generous spacing between lines.   Canva’s (www.canva.com) own carefully curated font kit contains over 140 free fonts for you to use in your designs. If you’re a beginner starting out using fonts, this comprehensive guide of common typography mistakes is definitely worth a bookmark.

14. Control: Design Limitations and How Long the Process Lasts

Typography isn’t the only thing web designers have limited control over. Web design is an interesting platform in that the designer determines a project’s initial appearance, but a user can override those choices — changing browser window size, zooming in or out, or adjusting browser settings like font choice and text size. Print designers have more or less complete control over their projects, customizing, changing, or tweaking up until the moment of printing. Rather than users making choices about how the end product looks, print designers make exact decisions about a design’s appearance, then simply find a printer to accommodate their needs. However, once a design rolls out of the printer, that’s it. Web designers, on the other hand, have more ongoing control. If a designer wants to fix a mistake, change a certain element on a website, or even re-vamp the whole design, that’s an option.

15. Construction: How Designers’ Methods Vary and When It Matters

Every designer has their own process — their preferred methods and workflow for how to put a design together. For web design, that process may have more impact on the final product than for print design. You see, print designers recognize that there’s more than one right way to get something done. In many situations, as long as the design looks good in the end, how it got that way doesn’t really matter. A designer may have hacked his way through a project, but the viewer looking at it likely has no way of knowing that. It’s a little more complicated for web design. How a site is put together — what’s “under the hood,” so to speak — does influence the final product, including usability (how visitors are able to find things on the site, page loading speeds) and visibility in search engines. Whew, you made it! If you’re still reading this far, I commend you. I hope you learned something new and/or have a little better grasp on the differences between print and web design. If you think of any other interesting differences (or similarities), let us know in comments below.]]>