Want to know more about the difference between designing for print and designing for the web? We break it down for aspiring designers.
Today’s graphic designers do amazing work to bring ad campaigns and other materials to life, but web professionals do things differently than those who design for print. Whether you’re an industry insider who needs a refresher course or an outside admirer who wants to learn more about the process, here are ten key differences between designing printed materials and creating content for online consumption.
1. Utilizing the Senses
Image by Brent Hofacker.
Keep the experience of the reader in mind when you create your marketing materials. Whether you design for print or online consumption, you have the potential to affect your audience through a variety of different sensations. Both types of media provide visual stimulation with images and typography, but the two differ radically when it comes to utilizing the other senses.
Hold a newspaper, greeting card, or magazine and you’ll understand some of the additional sensory experiences beyond sight. You can enhance the tactile sensation of interacting with the piece through embossment and other textured elements, or stimulate your olfactory sense with the scent of ink and paper.
If you design for web audiences, you can use technology to provide a multimedia experience. Online creations can incorporate streaming video or flash animation to bring things to life. You can even include a dramatic soundtrack to increase engagement.
2. Layout Practices
It’s crucial to maintain good layout practices for all of your pieces. Follow a design guide to prevent mistakes such as mixing fonts that clash, ignoring alignment, or forgetting about the hierarchy of your various elements. If you design for web that’s where your concerns about layouts can end. You generally have more freedom and flexibility to position pieces.
Print provides additional challenges as you have to follow the constraints placed by the publication. If a printer doesn’t have the capability to include embossment and other flourishes you’ll have to figure out another way to engage your audience. You also need to pay attention to margins and other layout factors when dealing with printed publications. The last thing you want is for an editor to crop an important piece of your advertisement to make it fit.
3. Dynamic and Static Designs
Print designers endeavor to perfect a piece before sending it off for production. The only way to fix a mistake after the fact is to recall all your prints and send a corrected version out for reprinting. This can be prohibitively expensive and time consuming.
Online designers have it much easier. Corrections are as simple as uploading an updated version. Take a look at one of your favorite news websites and you’ll see how quickly the various elements change as stories get new information. You can do the same for advertisements and other web-based pieces if you spot a mistake or the client needs a modification. But, it’s important not to abuse this freedom. You might upset the customer or take time away from other projects.
Image by Mila Supinskaya Glashchenko.
When you design for print you’re beholden to the actual dimensions of the publication or the amount of advertising space your agency bought. Beyond the standard sizes of books, magazines, and newsletters, you actually have the freedom to create printed pieces in any size imaginable, from business cards to gigantic billboards.
It’s a little different for content that’s designed for display on screens. Here size is more of an intangible concept that describes how an element will look on a specific device. In the early days of the internet most browsing was done on desktop computers, but the increasing shift to mobile devices means that digital pieces have to scale up and down without sacrificing quality.
5. File Type
Image by dennizn.
How do you choose the right choice for saving your work? Before deciding on a file type you should first consider the destination of your piece. This can immediately eliminate a few options. For example, if you’re designing for print the TIFF file extension is a good choice because it can be compressed without sacrificing quality.
There are two file formats that will only work for web designers. GIF offers the ability to use transparency and animation. But, it’s worth noting that this format isn’t great for high-resolution photographs due to its limited color capabilities. The SVG format preserves quality regardless of how it’s scaled so it’s a good choice for better images.
There are several file formats that actually work in either venue which can come in handy if you’re launching a multimedia campaign. The most common image format is JPG (or JPEG), which is what most digital cameras use. PDF is a good choice if you’re interested in creating a document that looks the same in any environment. EPS and PNG are both great choices for high-resolution images such as the ones available at Shutterstock, but EPS isn’t always readable on PCs.
Image by Axro.
If you want your work to look its best in any format, pay close attention to resolution. You’ll find this value in your print design guide in terms of dots per inch and pixels per inch, but each measurement has a different meaning for designers.
Dots per inch literally refers to the number of ink dots contained in an inch of printing, which means it’s mostly only relevant for those who print work. The higher this number the better the quality of an image, assuming the printer is capable of reaching that level of resolution.
Pixels per inch is a measurement that’s relevant for both printers and web designers but for different reasons. Screens have predetermined resolutions of how many pixels are displayed in an inch, and when an image is displayed larger than intended it will distort. If you’re creating online pieces, a resolution between 72 and 120 PPI will help avoid pixelation.
Things get tricky when it comes to printed work. There’s an inverse relationship between the number of pixels per inch and the size of the document. You don’t need a high PPI value for billboards and posters because larger pictures are normally viewed from greater distances. The higher your number, the smaller the image is intended to be.
Image by Kolonko.
Typography is an important consideration of any campaign that involves text. When it comes to print work your only restrictions are the boundaries of good typographical practices. Avoid clashing styles and give plenty of space between letters and lines. Also cut down on dangling fragments of text and focus on creating a clean alignment.
Since fonts display differently on each operating system, browser, and screen, it can be difficult to design for online projects. Use a typeface that’s designed for the web, and keep your text limited to short paragraphs that are easy to read on mobile devices.
Image by megaflopp.
Brilliant colors can breathe life into any project, but it’s important to know how professional designers achieve consistent coloration across every element. A computer monitor displays color by using combinations of red, green, and blue, and designers create their desired colors by mixing these hues.
It’s easy for monitor calibration issues to make things look completely different on the screen than in the real world. The best way to ensure accurate coloration in your prints is to use the CMYK system. CMYK is the standard used throughout the professional printing industry and is named for the combination of cyan, magenta, yellow, and black used to create colors.
Image by Syda Productions.
How many different ways do you view online images throughout the day? While you’re sitting at your desk you have a big display at your disposal, but you might have to zoom in to see details when viewing on your mobile devices. Some operating systems can’t run flash video, and others aren’t capable of displaying certain picture file formats. It’s important to design something that will look great across the entire technology spectrum. If you’re a print designer you don’t normally need to worry about compatibility, but keep it in the back of your mind in case you’re ever asked to create a multimedia campaign.
10. The Impact of Your Decisions
One of the great things about print design is the isolation it provides during the creative process. Only you determine the best course to reach your desired result. Once the project comes back from the printer there are no clues as to your methods and mistakes.
Websites are complex assemblies of code and scripts, and one mistake could cause the whole page to lose functionality. With that in mind, don’t work in a bubble when designing an online ad. You need to ensure your items play well with the other elements. The last thing a client wants to see is a big black box indicating a malfunctioning piece of content.
One Industry With Two Different Approaches
The world of graphics can generally be broken down into two different categories: design for print and creation for web. The professionals who work in the industry do things differently for each segment. They all use the same software and endeavor to use best practices on the job, but that’s where the similarities end. From color choice and layout to typeface and resolution, the designer must look carefully at each project through the window of the intended medium. Failure to recognize these differences could result in a finished product that both client and designer find disappointing.
No matter if a piece is created for print or the internet, the finished product should be a multi-sensory experience that stimulates the senses. When printing your content, you only have one chance to get it right. Online designers have the ability to tweak a project as many times as is necessary if the client isn’t happy. A company might use the same colors for printed and internet elements, but the process used to create them differs.
These are just some of the major differences between designing for print and for the online world. But, there’s still plenty they have in common. No matter the medium, it’s important to follow best creative practices and always incorporate quality elements into your work. If you’re looking for help, Shutterstock is standing by with royalty-free images, music tracks, and even layout software.
Top Image by Mooshny.