Graphic design: print vs web
The differences you need to know.
From workflow to file formats, from tools to terminology: print designers and web designers have a lot in common. However there are some important differences that often go unnoticed. In addition every designer has their own process — their preferred methods and workflow for how to put a design together.
Design for print is a project where the final form is intended for printing. In today’s world of digital design tools, the actual design is done on the computer (and sometimes on the web, even if the final product is printed) using mainly Adobe software. These include items such as catalogues, brochures, company profile, shopping bags, stickers, labels, books, posters, business cards and even vehicles!
The web designer deals with the design and creation of websites. Web design is not only about the graphics of the site, but also about the general appearance of the web page, user experience, usability and accessibility. It is a design intended to be viewed on a computer, mobile phone or other device with a web connection. Not on printed paper.
The user interface One of the biggest differences between design for print and design for the web is the way users receive, perceive and use your work. Holding something physical in your hand – a piece of paper, a folding brochure, a book – is a very different experience than viewing something on a screen. There are some crossovers – it is true – such as digital magazines, e-books, digital catalogues, that are formatted exactly like their printed counterparts, but in general the physical versus digital experience is a fairly clear dividing line between design for print and design for the web. Where and how designs are displayed plays an important role in designers’ decisions.
The user experience Closely linked to the physical or digital nature of a design is the way users experience it. Both design for print and design for the web share a visual quality: the design must make a good impression and communicate information, regardless of the final product. To this visual component, design for print adds a tactile experience that may include textures, shapes or print effects such as typography, embossing or screen printing. On the other hand, the web design experience adds the possibility of audio/video elements and other interactive options.
Let us take catalogues as an example. Many readers love the weight of a catalogue in their hands, the texture, the high quality of the photos and drawings, the rustle and even the smell of the pages. These are qualities that cannot be reproduced in any digital form. E-books, however, have unique qualities that cannot exist in the printed form: an interactive e-book may have animated illustrations, or a digital catalogue may have hyperlinks to other resources.
Both approaches have their value.
Static or interactive Once delivered to the printer, a design will never change (which is why print designers suffer from anxiety before the final file is sent for printing). Web design, on the other hand, can be retouched, modified or completely redesigned at any time without negative consequences. Many websites, especially those with frequently changing content (e.g. a news site), look different every day. Different images, different texts. They are created specifically to change.
This means that (unlike print designers, who generally send a job to a printer and declare it finished), web designers have to consider the ongoing functionality of a design. Elements such as buttons, links, mouse-over effects, forms or polls, videos and other interactive functions must function properly. There is no quicker way to lose a user than when something does not work as expected. Web design differs from print in that this interactive and dynamic quality often requires some sort of input or effort from the viewer, such as clicking, typing, etc.
However, I have designed and printed business cards and catalogues with interactive elements within them, such as QR codes for example. The QR code printed on the business card or in a catalogue’s page is captured with the phone’s camera and then opened in the device to link and display new information such as assembly instructions, videos or payments.
Usability and navigation 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.
Compatibility For web designers, compatibility forms a major component of creating a functional 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 OS. This can get complicated, since these various platforms each have their own limitations. 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. That is called cross-devices design.
Layout Both print and web design have many design elements in common to arrange the content: typography, images/graphics, shapes, lines, color, etc. So, many of the same best practices apply to each.
But each approach has its own unique layout requirements.
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.
Size 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.
Resolution and DPI 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.
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 .
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.
Resolution and PPI PPI involves the number of pixels 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 printing or when when a digital image is displayed online at a size larger than its original pixel dimensions.
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. Preparing a digital image (measured in pixels) for printing (measured in inches, centimeters, or other units) is where the confusion often sets in.
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.
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.
File formats Designers have a multitude of file types to choose from. But some are better suited for the Web, others for printing, and vice versa. In summary, each 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 the resolution. Vector images, on the other hand, are not limited by pixels. Without getting too technical, vectors refer to graphics defined by mathematical equations, which allow scaling to any size without loss of quality.
Both for Print and Web:
JPG (or JPEG): This is the default file format of many digital cameras. JPGs must be saved at an appropriate resolution and in the correct colour space (CMYK for print and RGB for web).
PDF: widely used; preserves the original content and appearance of a file regardless of where or how it is displayed.
EPS: most common for saving vector graphics to preserve scalability.
For printing only:
TIFF: high image quality and large file size (image compression does not reduce quality, unlike JPG); compatible with both Mac and PC; commonly used for final delivery to a printer.
For the Web only:
GIF: supports graphics with animation and/or transparency effects; colour capabilities not up to the level of JPGs (256 colours or less, therefore not suitable for photos); ideal for simple web graphics, as the low file size does not adversely affect page loading speed
SVG: vector format that can be enlarged or reduced to any size without loss of quality
PNG: high image quality; supports transparency/opacity.
Software-specific:
PSD: an editable (raster-based) file created in Adobe Photoshop.
AI: an editable (vector-based) file created in Adobe Illustrator.
Color CMYK Color displays very differently printed on a piece of paper versus viewed on screen, because it involves different color spaces.
CMYK is for print instead RGB is 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.
CMYK stands for the four ink colors used by all printers: cyan (C), magenta (M), yellow (Y), and black (K). 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.
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.
Color RGB RGB refers to the colors you see when you’re looking a digital screen or monitor — dots of red (R), green (G), and blue (B) light combine to create visible colors on your device 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.
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. 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.
Typography There are 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.
Aside from the actual resources designers use to handle typography, approaches to arranging type differ between print and web projects. For print, aside from common best 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.
Design limitations At last, 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-make the whole design, that’s an option.
Reference
• J. Nielsen, Differences Between Print Design and Web Design, January 23, 1999 [link]
• R. Bean, Designing for Web vs Print, June 03, 2021 [link]
• S. Hamilton, The Difference Between Print and Web Design, March 1, 2012 [link]
Difference
• AR.CO. INGEGNERIA SRL, Brand Identity & Company Profile, August 2018 [link]
• AR.CO. INGEGNERIA SRL, Website & Social Profiles, August 2018 [link]
