Designing for Digital vs. Print

Photo. Designing for Digital vs. Print: desktop computer displays a web design.
Share on facebook
Share on twitter
Share on pinterest
Share on linkedin

Understanding the differences between designing for digital vs. print is key to creating the strongest, most effective designs for each medium. Although most designers nowadays work with both digital and print, some apply the same creative mindset and style to both, despite their big differences. As a result, multimedia designs can look more disjointed, less legible, and overall out of touch with the medium. Therefore, acknowledging and designing for the differences between digital design and print design embraces those differences and elevates the strengths of each.

Key Considerations in Designing for Print

Most designers started their careers in print design. They encounter low barriers of entry in the field of graphic design, so print design is very accessible. Business cards, flyers, and programs are all popular products of beginning designers. Additionally, print design doesn’t require much additional hardware, like web servers, or learning new languages, like HTML and PHP, the way that digital design can. Because of this, print design feels very familiar.

Photo. Designing for Digital vs. Print: folds of red paper.

Designing for Print Means Designing for a Clearly Defined, Limited Space

Perhaps the biggest difference between designing for digital vs. designing for print is that print designs have a clearly defined, limited design canvas. That’s a panel!

Pages vs. Panels

A page is a single sheet of printing paper. A panel is a single print canvas. For example, a one-sided U.S. Letter flyer has one panel and one page. However, a two-sided U.S. Letter flyer has two panels — the front and back sides — but only one page. Similarly, a bi-fold duplex tabloid has four panels on only one page. A tri-fold duplex brochure would have six panels on one page.

Content Visibility

Pages are cut to a final size, so anything the designer places outside this canvas will not print. Consequently, there’s no other option to view that content. Instead, the designer must place everything the client wants included inside the page panels.

Fixed Sizes

Additionally, print designs have fixed sizes. The page size will not change after cutting. The designer can’t change the print design size once it’s “published” via printing. While the designer can of course return to the native InDesign document and update the page size there and design accordingly, the final print design is permanent. Still, changes to print designs result in re-prints.

Yet while page size does limit how to design for print, the size restriction has an advantage: the designer can reliably position and size content. As a result, content displays faithfully on the printed page no matter where someone prints the design. Designing for print is easier to maintain the designs than designing for digital.

Photo. Designing for Digital vs. Print: red ink or pigment mixing in water.

Designing for Print Means Working with CMYK Color Blends

CMYK & RGB Aren’t Interchangeable

Because print designs are reproduced in inks, pigments, and toner, designing for print means working with the CMYK color blends. Since PMS and Spot colors are similar subtractive color mixtures, the Adobe Creative Suite processes PMS and Spot in the CMYK workspace as well. Most importantly, the designer understands he/she isn’t working with colored light and other additive mixtures, like RGB, which behave very differently. To learn more about how CMYK and RGB work and how RGB converts to CMYK, check out “Printing Basics of Color Theory.”

Obviously, the biggest difference here is that the colors displayed on screen aren’t accurate representations. Because computer monitors use tiny lights to form and colorize the display rather than inks, the colors shown are merely close guesses.

Color Calibration Tools for Those Designing for Print & Designing for Digital Too

Nonetheless, several color calibration tools exist to make these close guesses more informed to display at least a more accurate CMYK, PMS, or Spot color on screen. Additionally, Pantone also offers its Color Bridge product lines to help designers align PMS colors with CMYK and RGB colors. A designer may invest in one or more of these options when designing for print.

CMYK Effects

Additionally, most Adobe filters and effects only work in RGB workspaces. (This is because the computer processes a filter or effect using algorithms that faithfully predict outcomes in the RGB mode the computer uses, but computers have no clue about inks, pigments, and toners. That’s where ICC profiles and Raster Image Profiles come into play.) As a result, designing for print requires designing without most filters and effects — on screen anyway. (More on that below!)

Moreover, while some color modes work on both RGB and CMYK workspaces, CMYK color modes are less reliable. For instance, the overlay mode relies on the reaction of lights mixing together to produce its vivid results. A CMYK overlay is likely duller. Similarly, CMYK multiply modes are likely flatter because the computer applies a flat (RGB) black to the objects.

CMYK’s Enviable Rich Black

Yet despite its shortcoming with colors produced from filters and effects, CMYK color blends are the best at creating deep, rich blacks. RGB simply can’t compete. Since black is the absence of light, RGB color modes have less material to use.

On the other hand, CMYK color blends have a variety of inks, pigments, and toner at their disposable to build the perfect black. The biggest caution here when designing for print is to avoid too much color printed on a small space, called overprinting, that results in unsightly bleeding colors.

Designing for Print Means Planning for In-Person Visual & Tactical Experiences

Designing for print allows designers to add vivid colors and effects in other, off-screen ways.

In “Designing Purposeful Imagery,” I explain how print designs excel at in-person, hand-held experiences. Designers may choose to include Spot UV gloss to make designs or portions of designs appear glossy and shiny. Similarly, designers may choose to add inline foil to make designs appear metallic.

Besides visual treatments, printing finishes like embossing, debossing, and raised UV create a memorable tactical experience and add interesting texture that digital designs on a screen can’t reproduce (only mimic).

When designing for print, the designer plans ahead for any print finishing treatments. For example, a designer wouldn’t place text within an area designated for debossing, which would distort the characters. Another example, the designer might choose to color design elements designated for a Spot UV gloss even more saturated or a value lighter than the surrounding background to help that gloss pop even more intensely.

Key Considerations in Designing for Digital

Nowadays, it’s rare for designers to stay within the print design bubble. With the demand for website graphics, advertising banners, emails, and more, the ability to design for digital media is a must. Like designing for print, designing for digital bears many resemblances as well. Obviously printed pages are like web pages, but both are also interactive. Whereas printed pages are hand-held and respond to movements like flipping a page or refracting a print finish in the light, digital designs allow users to scroll through web pages and respond to actions like mouse clicks or finger taps. Still in many more ways, designing for digital is very different than designing for print.

Photo. Designing for Digital vs. Print: desktop computer displays a web design.

Designing for Digital Means Designing for a Loosely Defined, Near Unlimited Space

One of the biggest features of digital design is that there’s no “one size fits all” creative approach. Digital designs don’t reproduce exactly the same in every viewing environment the way that print designs can.

Pages vs. Web Pages

A printed page has clearly defined limits — the design can only go within wherever the inks print and blades trim.

On the other hand, digital designs have very loosely defined limits. A digital design appears on a both a small mobile device, a tablet, a desktop computer monitor, a big-screen smart TV, and more. Not only do widths and heights changes, but aspect ratios do as well. Therefore, a digital design demands flexibility.

Shiftable Content

Basically, digital designs can and will shift the content around the page. Web and digital design strategies like responsive, fluid, and mobile-first tackle the flexibility demand in different ways.

While the designer may attempt to stop content shift by coding “fixed” and “static” web designs, the end result is instead cropped, missing content or else a tiny, unviewable digital design that no longer works for users.

Rather, the digital designer must embrace the flexibility and plan for content shift. Designing for digital means establishing patterns for how the content behaves in different spaces.

For example, a mobile version of a website often turns a desktop’s three-column layout into a singular, stacked column to eliminate the need for horizontal scrolling and keep content readable.

Content (In)Visibility

Another important difference between designing for print vs. designing for digital is that content can be hidden but not gone. Users can scroll to view additional content. Additionally, users can also click digital design elements to reveal more content. For example, user clicks can open a menu, expand an accordion, advance a carousel slideshow, or go to a new web page entirely, revealing new content. This is another great flexibility when designing for digital.

Photo. Designing for Digital vs. Print: red light mixing in bokeh pattern.

Designing for Digital Means Working with RGB Color Blends

Designing for digital requires knowledge of how additive mixtures behave, particularly RGB color blends. Like all additive mixtures, RGB uses light to form colors. (Recap what are additive and subtractive mixtures here in “Printing Basics of Color Theory.”) Therefore, computers are able to manipulate RGB color blends with all kinds of filters, effects, and blend more.

RGB Effects

Firstly, digital designs have access to Adobe Creative Suite’s Filter Gallery of various distortions and textures. Photoshop’s RAW Image Editor is also only available to RGB documents. (This is why most photographers still import their images as RGB for retouching and image manipulation, even if they plan on printing them.) Yet another option for RGB workspaces is the RGB channel editor. The RGB channel editor allows designers to modify each Red, Green, and Blue channel individually to recolor an artwork, including True Grayscale.

Secondly, RGB documents display RGB blend modes like Overlay much more reliably and vividly. They’re native to RGB workspaces after all.

Designing with Gradients in Digital vs. Print

Besides blend modes, RGB opens up gradients and transparency manipulations as well. Feathered gradients and masking for example, display nice and gradually in digital designs.

However, printing a gradient often looks choppy, banded, and less fluid. While one workaround for gradient banding in print designs is adding noise to the gradient to break up the colors into more manageable bits for inks, other times the whole gradient prints as a solid block of color instead. In this case, double-check blend modes of the print document.

Nonetheless, gradients are easier to manage when designing for digital.

Designing for Digital Means Planning for Virtual, Interactive Experiences

Digital media make finding information easy. For instance, with the click of a mouse, users can access more content, related articles, launch apps, and more. The digital designer must design for digital media in with this in mind.

Content isn’t static. Instead it changes quickly and refreshes with every click or even without a click, such as animations or timed sequences. Indeed, digital designs respond to real-time user requests.

Furthermore, digital media also supports videos and motion graphics where print designs can’t. Consequently, users enjoy an immersive, multimedia experience.

As a result, designing for digital means looking for opportunities to promote and encourage user interaction with the digital designs.

Photo. Designing for Digital vs. Print: print and digital designs on different devices and papers.

Why You Shouldn’t Design for Digital by Converting a Print Design into a Web Format

However, even if print design feels familiar, it doesn’t make sense to simply “convert” a print into a web format to make it a digital design.

Design Shiftable Content

Firstly, designing for digital means letting go of controlling exactly how the design will appear. Some designers might struggle adopting a creative approach that accepts no boundaries when designing for digital. However, the key is remembering that digital designers make the rules. Like the earlier content shifts, digital designers can designate how content will behave when presented with a new space. Rules might include:

  • “stay fixed here at the left edge no matter what,”
  • “stack if the viewport is smaller than size XYZ,”
  • “hide until the user clicks you,”
  • “shift main content XYZ pixels down the top of the viewport to keep showing the fixed navbar,”
  • “expand and/or shrink each column to 25%,”
  • “stay this exact size no matter what,”

and much more.

Remembering the option to constrain a design element (or not) is crucial to designing for digital. Additionally, some digital designs require rule to stay in effect only under certain conditions. For example, a three-columned layout divides content into three equal parts until the viewport is around mobile size. Then at that point, the content will occupy 100% of the screen’s width.

Design Scalable Content

Most importantly, design scalable digital elements that retain their usability at both small and large sizes without quality loss.

In the fixed sizes of print designs, creative options like reverse-colored, thin weight, condensed fonts can work. The print design won’t change size.

However, the same typography treatment when designing for digital can be disastrous and un-usable. Reverse-colored text, such as white text on a black background, causes more eye strain than the usual black text on a white background.

Additionally, thin weight fonts also tend to scale smaller badly, becoming blurry with anti-aliasing or else creating such jagged edges the letter forms are no longer recognizable.

Finally, condensed fonts tend to remove letter spacing and kern tightly, are more difficult for users to identify quickly whether in print or on the web. Similarly, condensed fonts encounter many of the same scalability issues since condensed fonts appear to grow thinner at smaller sizes.

Design for Digital Colors

Finally, when designing for digital, don’t assume a print design will look the same on the web. Rather, be mindful of color selection and contrast.

For instance, a pure CMYK cyan blue, nearly universal in the print world, can’t replicate in RGB. Select a pure CMYK Cyan with Adobe Illustrators color picker, and the CMYK value automatically shifts from 100/0/0/0 to 64/13/0/0 in a web document but offers a close match of HEX code #00aaef. Yet even this off-Cyan still reveals not only an Out of Web Color Warning but also that out of the entire RGB gamut. Instead, RGB’s closest cyan match is a blue with a lighter value and more yellow hue.

Therefore, select color palettes carefully in visual identities and branded materials that match CMYK and RGB colors closely for marketing consistency and visual harmony across multiple media.

Design for Digital & Web Standards

Besides color matching, digital designs often must adhere to web accessibility standards. Particularly, these web standards mandate a minimum contrast ratio between the foreground objects and their background colors.

For example, the most strict contrast ratio is 7:1. The Color Contrast Checker at WebAIM cites the traditional hyperlink blue color on a white background achieves a 8.59:1 ratio, success! Another example, the lightest gray on a white background that passes is #595959 at 7:1.

Meanwhile, many modern web designs like to show a softer foreground text color, like a medium gray. Basically, most of these gray text colors won’t pass; that earlier #595959 still basically looks black.

Overall, digital and web accessibility standards are something print designs don’t have to face.

Concluding How Designing for Digital Is Different from Print

In conclusion, in this multimedia world designers today embrace designing for both print and digital media. Yet each medium presents different creative obstacles for the designer:

  • limited vs. unlimited spaces,
  • CYMK vs. RGB color blend modes, and
  • tactical vs. virtual user experiences.

Moreover, designing for digital vs. designing for print each presents a set of best practices. For example, this article discussed content (in)visibility, overprinting, color manipulations, and scalable content.

Most importantly, designing for print isn’t a simple conversion of print designs into web formats. To clarify, designing for digital is a whole other creative mindset. While some designers prefer more rigid, clearly defined creative spaces like print design offers, digital designs are exciting and varied. They’re accessible, constantly changing, and encourage user interaction.

Therefore, designing for digital will feel just as comfortable and familiar as designing for print with these key considerations in mind.