To the untrained consumer, design is design. However, whether you are designing something for print or for web plays an enormous role in planning, execution, and the finished product. Design for print includes magazine ads, product design and packaging, business cards, brochures, and logos. On the web, you’re looking at websites, infographics, email newsletters, social media graphics, banner ads, and more. We know, from our own experiences, that the differences between the two are so huge that there are some big gaps in knowledge with our clients when it comes to design for print and design for web – so we want to help shed some light on the differences between the two.
How Users View/Use Your Designs (Intention)
Think about a catalog you receive in the mail. How do you read it? Oftentimes, back to front, right? Or you might skim it while doing other things (listening to music, having a conversation with a friend, etc.). Print brochures, direct mail, business cards, and other print materials all have different mechanisms of how we touch it, look at it, and consume its information.
On the web, it’s very different. You might be looking at a mobile screen, an iPad, or a huge desktop monitor. There are major variations in color experience and internet speeds. Your intention may be different – whether you accidentally came across it or purposely sought it out. Intentions vary widely between print and digital, so you have to think about how your design is going to be used, what the intention behind it is, and who the audience is before you begin the creative process.
How Users Experience Your Designs (Sensation)
Print and web both deal in the visual experience regardless of final projects. However, in print, you get tactile experiences that include texture, shape, letterpress, embossing, screen printing, laser cutting, and more. On the web, you can add audio or video components that add to an interactive experience. Navigability and legibility become paramount on the web as opposed to pure creative components. When you approach experience, think about all the senses that will be involved – sight, sound, touch, hearing, probably not taste, but you never know!
Updates (Dynamism)
Once you send something to print, it’s done. Costs associated with printing a fresh batch for every tweak mean that it’s prohibitively expensive to make minute changes over time (think: menu costs in economic principles). With websites and web experiences, these are like living organisms that evolve, grow, and change. Pictures can be updated, and text can be added at a much lower cost on web than in print.
In print, you provide exactly what the client wants in terms of size and scale. A catalog is a certain size. A business card is a certain size. For web, “size” is more abstract. The sizes at which designs are viewed 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 our online habits shift in a more mobile direction.
One thing that comes into play with web designs is that changes are often “global” – meaning if you change a color in one place, it often changes it in other places. You can change a heading size in one place, but it changes the headings everywhere. Now, obviously you can customize things like headings and colors, make exceptions, and set up different types of classes, but one thing that the SEO in me will say is that you never want to have an unreasonable text-to-code ratio. Meaning, the more code you add to your site, the more exceptions there are to the rules, the worse it is for your site from an SEO and functionality standpoint. So oftentimes, even if you design a mockup in a certain way (say, in Illustrator), it can’t look the same because of how many exceptions you’ll have to make to things.
The Control Issue (Color Experience)
Color displays very differently printed on a piece of paper versus when it is viewed on screen because it involves different color types: CMYK for print and RGB for the web. If using both methods for a single project — say, designing a logo for a website along with a coordinating business card — a designer will need to make sure colors appear consistent between the different deliverables.
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. When we begin working on your site or digital designs, we request your HEX code. A HEX code is simply a six-digit combination of numbers and letters that is defined by its mix of RGB colors (our main green color is #c6d401, for example). It’s the shorthand value with some conversion in between. However, if we’re provided a CMYK value or Pantone color, we must approximate the color. It is never a perfect 1:1 system. You might see the color as too dark, too bright, too yellow, too blue. Therefore, we need both types of color codes if we’re working on the web and in print.
Typography (Font Experience)
Oh, if only the wonderful world of the web were as simple with typography as print. On the web, we have specific sets of “web-safe fonts”>that can be viewed on nearly everyone’s monitor. The big issue is that a lot of times, these fonts are, quite frankly, pretty boring. Fonts that are clean and easy to read are paramount on the web (since display sizes and qualities vary), so designers have significantly less control over how fonts display across devices, scaling for sizes and readability. Something that’s legible on a 30” monitor might not be clear on an 11.5” laptop or a 5” cell phone screen. Web content usually sticks to short paragraphs in clean, sans serif or unblemished serif fonts just because that’s easier for the eye to digest on a backlit screen. In print, your font options are dramatically larger. They can be anything because you’re dictating size and scale specifically and you don’t have to worry about whether it’s “web safe” or not.
Print designers have close to complete control over how their finished projects look, 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 find a printer to accommodate their needs. Web designers don’t have perfect control over the types of devices, internet speed, or other components that can change how you approach a project. That means, for most web designs, you plan for the worst and hope for the best.
Even though designers for print and web often use the same exact software, the similarities between the two usually end there. Between colors and layout and fonts and updates, designers have to look at each project through its intended medium. Nevertheless, it’s important to always focus on the best creative practices and incorporate high-quality elements into the work. If you need help with your designs – whether it’s print or web – let us know by filling out our contact form.
