The Difference Between Print and Web Design

The Difference Between Print and Web Design

Both Print and Web Design are powerful mediums that have the power to pack a lot of impact and persuade the viewer to take action. If you’re looking to cross over into web design, or vice versa, it can be beneficial for you to understand the inherent differences that exist in each medium. And while these fundamental differences exist, each has made huge strides in working around their respective nuances to enhance the viewer experience.

This article seeks to uncover the differences (and similarities), and how both print and web design has advanced in acknowledging these disparities.

The Difference Between Print and Web Design

A Different Experience

It can be said that the experience of viewing and interacting with a website is entirely different than reading a full page spread in a newspaper. The experience of viewing a print publication is one of cohesion – where your eyes are guided from page to page with subtle variation throughout to keep interest.

The design is created for a fixed canvas size – which can be substantial when we’re talking about newspapers or posters. While on the web, the user interacts through a scrolling experience as opposed to a canvas experience. Throughout the reading experience, users will scroll even before all elements have rendered and to varying degrees.

In Summary:

  • Print Design allows your eyes to walk around the information, letting you select information objects and using spatial juxtaposition to enhance and explain page elements.
  • Web Design is a transient experience based on the users movements (clicking and scrolling) and is expressed through an interaction with user movement.

Newspaper Design
Image credit: william couch

Canvas vs. Screen

Two things both mediums have in common is they both take into account the audience and demographic of the end user. A print designer can rely on fonts, colors, paper stock, and other elements to effectively reach his or her designated audience, and a web designer can do the same to a greater extent. However, nothing is more different between the two than the constraints of designing for the web itself.

Computer monitors come in different sizes and users can re-size their browser windows according to their own needs. Also, monitor color and contrast settings can affect how colors are rendered on their screen. Finally, the differences between browsers and operating systems mean web designers are tasked with troubleshooting for a myriad of situations. Not as glamorous as the print designer who is making the switch over to web may have expected.

Although these issues exist, many web designers have embraced this as the norm and have learned to work around it. A lot of these issues can be addressed by analyzing your target audience: Are they likely to have nice new computers with the newest browsers and a complete set of plug-ins?

Are web designers restricted to their creativity by the capabilities of web technology, like HTML5, CSS3, JavaScript etc?

Krishna Solanki, Web & Graphic Designer: Personally I believe it is down to the web designer really. I mean, if they are able and happy to code their designs to degrade gracefully across the different browsers then I would presume they would take on board the ever-evolving technologies, and thus they may become less of a restriction as they may have an idea of development whilst designing and can use their creative skills wisely. All depends on if the web designer is also the developer, in my opinion.

Shannon Noack, Web Designer: I don’t think a web designer’s creativity is restricted online, it’s just a matter of learning to work with the limitations that are out there. A print designer is also restricted, by paper type, size, printer quality, etc. So any designer faces some sort of restriction, but it’s important to use your creativity to rise above these things, and work with them to come out with an awesome design.

David Airey, Designer: I don’t think it’s as much a restriction as it is just a different canvas you’re working with. Every medium has its constraints. If you’re working in print you have to decide what you’re printing on and how many colors you use. You’re going to pay more for bleeds or die cuts. You’re also restricted by physical space, you can’t scroll in print and every additional page you add costs money.

Brad Colbow, Web Designer: Great design is born from within the restrictions that you are given. Shepard Fairey’s poster of Barack Obama is a good example of design that embraces the restrictions of its medium. It was a screen printed poster so the artists used solid colors that would print well. When I see a website like Zaarly I not only see a beautiful design but a design that can only have been created on the web. Visually you could use the elements in print but you could never recreate the way the content interfaces with the design.

David Airey, Designer: I think both fields have restrictions. For instance, print design is restricted to a smaller colour gamut.

Calvin Lee, Designer: I would start with the design first, be as creative as you want like any other print project. Then worry about how to build it later. I also have to say, you should know a little about how all the web technologies work; HTML, CSS, JavaScript, etc. when designing a website. You don’t necessarily have to know how to build everything. As long as you know what the limitations are.

What are the challenges faced by the Print/Graphic Designer when asked to transition towards the Web?

Shannon Noack, Web Designer: There are a bunch of differences between print and the web, and many designers struggle with these differences and how to accommodate for them. Type restrictions are a big one and it takes some time to learn how to work with the options out there. Things are getting more flexible with typography options online but it’s important to learn the limitations and what you can do with them. Things like shadows, gradients, rounded corners, and all those extra touches are also important to learn about.

Chris Spooner, Designer: The main challenge has to be learning the basics of how to design for the web. Websites are viewed in a range of different applications and on many different devices. A print designer can expect their design to look exactly how they planned, but a web designer has to make sure their work is suitable for a various computing setups.

Krishna Solanki, Web & Graphic Designer: As I started off as primarily a web designer and then moved into Print, it is slightly different. I would say to be mindful of the “terms” and dimensions used in the web design world and the print world, I.E, moving from inches to pixels. Also to be considerate of the fact there is no bleed or crop for the web.

Cameron Chapman, Designer: I got my start mostly in print design, and one of the biggest challenges when I started doing more web design was changing the way I thought about designs. Print designs (at least the kinds I was doing) exist in a very finite form, while web design is much more flexible. The web can evolve constantly, whereas once a print design has been printed, it’s “finished”. That takes some getting used to.

Brad Colbow, Web Designer: In print design you have a fixed canvas size. On the web you don’t. For years we debated what width we should design sites at. Should they be 800 pixels wide? 960 pixels? As mobile has become more and more important designers have become even more conscious of the web’s flexibility. Designing for the web is now about embracing that flexibility and the unknown of screen size. This isn’t a new idea, John Alsop was writing about it over 10 years ago but the growth of mobile phones and tables have made us much more aware of it recently. That’s a big part of why we see so much about responsive web design (flexible layouts that use media queries to adjust to different screen sizes) nowadays.

David Airey, Designer: Learning code. It’s basically putting the time in. A lot of the same principles apply online and off, with layout and typography being two of the most important.

Calvin Lee, Designer: The biggest challenge for any printer designer, is taking a printed piece and making it look the same/similar for the web. It took me awhile and very frustrating, to wrap my head around using HTML and CSS to layout/move items around on the page. It’s very easy with a layout program like Quark or Indesign. Layout for the web was a huge problem, if you don’t know anything about coding. Sure you can use a wysiwyg app like Dreamweaver but it tends to add unnecessary junk code. Also the differences in the color modes for print and web can be frustrating too. You can come close. For web, colors will tend to be brighter.

Navigation

You’re probably so familiar with flipping through your favorite magazine that you haven’t even considered a navigation element, but this is how we get around a print design – by turning pages. Conversely, the web is all about moving around. The navigation of a website is a major component to its readability. Decisions like the appearance of links, visualization of where they currently are, and information architecture play an important role in navigating a website successfully.

Navigation
Image credit: laurajo

Typography

One of the joys about designing for print is the wide array of fonts available at your disposable to communicate your message. The proliferation of free font sites has meant you can achieve custom graphic communications without relying on the fonts issued on your computer and without purchasing ones from type foundries.

Typography

Changes in typography on the web also are abundant. Ten years ago web designers thought they were restricted to the fonts available on the users computers and that’s it. This issue was tackled in 2009 with the introduction of Typekit, one of the first web font services. Many other services are available to remedy the typography constraints inherent on the web.

However, it’s still important to use fonts that are optimized for on-screen readability. The two popular ones, Georgia and Verdana, are always great options to fall back on as they were designed for on-screen use. Font size is also critical: while most print publications can get away with using 10- or 11-point type, the web demands font sizes of 12- or even 14-point to make articles reader-friendly.

Web Safe fonts are also something to fall back on, as they have been shown to ensure maximum compatibility between browsers/operating systems. These are fonts that you can expect everyone viewing your webpage to have. If the browser does not support the first font, it tries the next font. Examples of web safe fonts include Arial, Georgia, Gill Sans, Times New Roman, and Palatino Linotype, to name a few.

The use of CSS3 also means you can achieve unique and compelling effects not only in typography but in the design of the site in it’s entirety through the use of drop shadows, gradients, borders, etc.

Images

There’s a drastic difference between the way an image appears on screen and the way it appears in print. With online publishing, there’s more room for error versus print. The differences exist in the following:

Graystone
Graystone

CMYK vs. RGB

CMYK stands for Cyan, Magenta, Yellow and Key (Key being whatever ink color makes black on the paper color you’re using — usually just black itself) and is the standard color space for printed material. Using these four ink colors in different screens, you can produce virtually any color in print. RBG, on the other hand, stands for Red, Green and Blue and is what every computer monitor, television and other digital equipment uses to produce color.

Image Compression

Your image will need to be 72dpi for the web. It’s also recommended to use JPEG (set to “high” quality, usually level 8 or 9) or PNG format for your image files. PNG offers a number of advantages to GIF, particularly when it comes to options for transparency and true-color palettes.

Interactivity

An abundance of tools exist for the web that aren’t readily available for print. With a web site, you can have animation, mouse-over effects, pull down menus, cross-referencing links, instant reader feedback, and on and on. The key is to know when and how to use them. Keep not only your target audience in mind when incorporating interactive elements onto websites, but the browsers and operating systems they use.

Atticuspet
Atticuspet

Similarities

Despite the end result the user encounters when interacting with both mediums, there are similarities between the two. For one, both employ similar uses of data presentation, such as the heavy use of white space in easing the visual impact on the reader. The second similarity is that of grid-based designs. Since both rely on a heavy amount of information, structuring this information is paramount as it guides the user’s eye while providing order.

Grid Resources:

Is it possible to master both?

Cameron Chapman, Designer: I think it’s a good idea to at least be proficient in both. Print isn’t going to die completely any time soon, though parts of it have definitely been replaced to an extent by the web. Being able to create both awesome print designs and awesome web designs is definitely going to put you ahead of a lot of your competition.

Chris Spooner, Designer: It’s important as a designer to stay on top of the industry changes and keep your skillset up to date with the latest coding languages and technologies. It’s too easy to fall behind as a web designer, which is why I keep myself informed by socialising with like minded people over Twitter and subscribing to informative websites and blogs.

Shannon Noack, Web Designer: I think you can definitely master both print and web design, you just need to understand that they are different and design for the medium that you’re working with. Both have their own limitations and best practices so it’s best to focus on the task at hand and use the program and tools that are best for that project. As a print and web designer myself, I know that you can do both, you just can’t do both the same way. Design skills and creativity cross over, as well as any design principles, but even the best fonts to use are different so it’s important to keep them separate and distinct.

Brad Colbow, Web Designer: It would be hard to really master both but it would be possible. Honestly it’s really hard to master both the visual design part of web design and also front end development, that’s why so many places break those up into two different jobs. I feel far more competent in Photoshop that I do writing HTML/CSS. I learned the latter to improve the former.

For anyone who is working in print design and wants to jump in and learn more about HTML and CSS you should check out JD Graffam’s book. He does an excellent job of pointing out the similarities and differences between print and the web.

David Airey, Designer: Why not?

Calvin Lee, Designer: I think it’s very possible to master both print and web. It gives you an advantage over other designers and you get paid more. With that said, many designers can’t or don’t want to code. They would contract it out to developers and coders. That is very legit.

Showcases

Book Of Numbers
It looks like a book. It navigates like a book. Is it a book?

Book of numbers

The New York Times
Designed to resemble the famed newspaper layout of the NY Times newspaper.

New York Times

CSS Tinderbox
With grungy/paper-like textures, this site looks like a propaganda leaflet.

CSS Tinderbox

Netlash-bSeen
Website that resembles a poster.

Netlash

The Dollar Dreadful
Website that resembles a newspaper.

The Dollar Dreadful

Atlantis
Website that resembles a poster.

Atlantis

The Moon
Website that resembles a poster.

The Moon

Wired
Website that resembles a magazine.

Wired

Sun Magazine
Website that resembles a magazine.

Sun Magazine

Conclusion

Designing for web and print are two entirely different experiences. If your background is in print, it doesn’t mean you have to neglect basic print principles and styles. The great thing about the modern web is it’s starting to imitate print in some respects. E-commerce, blogs, news and political websites are especially popular amongst the print crowd. Understanding the limitations of each will be a step towards creating a more unified experience for both mediums.

What do you feel is the biggest difference between print and web design?

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.