The Basic Differences Between Print Design and Web Design

This article, written by me, was originally published and posted for the Expert Articles for the Embarc website. I am reposting on my blog because I think it is a very beneficial article.

06/19/2007

Designing for web and print are two entirely different design challenges. Just because a designer is proficient at one doesn’t mean they’ll be good at the other. It’s necessary to understand that web and print share many similarities, but they also have many differences.

Web Fonts vs. Print Fonts

Typography is a design topic that has been studied by some of the greatest Designers in the world. It is a topic that is extremely complex and involves years of study. Most Designers have a fundamental knowledge of typography and how it should be utilized in design.

Print Designers have the luxury of using an extensive array of fonts in design while Web Designers are restricted by the usage of only web fonts1. Computers and Internet browsers restrict the amount of fonts that Web Designers can use because computers are programmed with minimal amount of default fonts. When the font is specialized or stylized, the designer has to install the specific font into their personal computer, but cannot anticipate that other users will have this font installed on their computer. Web Designers can include these exclusive fonts, but have to create an image of the font instead of having HTML markup text, which hinders the Search Engine Optimization (SEO) of the site. SEO is a vital component in websites today as search engines such as Google and Yahoo! have become more sophisticated and are a critical marketing strategy for many businesses today.

Print Designers do not need to worry about SEO, computers or Internet browsers including the fonts. A print file is created and prepared with the fonts either embedded within the document or the font is included in the file so the printer can install the font if it is not on their computer. Print Designers can also be remarkably innovative and creative with the treatment of typography. Because the layout is static, creating a printed design as an end result, the fonts can be manipulated and created in endless ways.

Executing a Website vs. a Print Piece

Websites are designed to be viewed on a computer monitor and are rarely ever printed out. Computer monitors are similar to television screens and utilize additive color mixing that mixes colored light together. Additive colors start with Red, Green, and Blue (RGB). When these colors are mixed, they create Cyan, Magenta, Yellow, and Key (Black) (CMYK). RGB colors are mixed in varying levels from 0 to 256, to form colors. Because websites do not need to be printed out, the colors on the monitors are the final viewing colors and the colors do not need to collaborate with a 4-color process printer. However, colors on monitors can be altered whether it is color corrected, old, CRT2 monitor, or LCD3 screen.

Collaborating with Web Developers is key to a successfully executed website. Web Designers should have a basic knowledge about web technology4 so that the design can be coded, and viewed properly on multiple web browsers. Web Designers have to be conscious that users are viewing websites with various web browsers5 and the variety of monitor resolutions6. Images on the web are generally 72 dots per inch (DPI) so that websites can load into a web browser promptly and without difficulty.

An important aspect of web design that Print Designers don’t need to be as concerned about is Information Architecture. Information Architecture is the method of organizing information that produces better usability and experience when browsing through a website. Both Web and Print Designers need to be concerned about how the information is portrayed through hierarchy of information by creating a clear concise message through typography and the layout of the design. Print Designers are more concerned with design characteristics and not the usability features since print design does not include interactive features.

Print Designers have to consider another realm of design rules when completing a great print piece. Instead of thinking about what the design will appear on a monitor or in a web browser, they have to reflect upon what it will look like when printed out. Print Designers use Cyan, Magenta, Yellow, and Key (Black) (CMYK) and Pantone Matching System (PMS) colors. CMYK are the 4-color process colored inks used in printing while PMS colors are based on a specific mix to create new colors referred as spot colors. This allows for many specialized colors to be produced.

Unlike web design, Print Designers are not confined by the resolution of the monitor or just to the computer. Print Designers can design large-scale banners, small business cards, brochures, books, newspapers, magazines, on clothing, on assortments of paper, etc. A Print Designers surfaces and size of design is far more diverse compared to a web designer’s small canvas. Images for printing have to be 300 DPI or larger because the printer produces designs at a high resolution of 300 DPI or higher. If an image file is printed at less than 300 DPI the image prints out pixilated.

Experiencing a Website vs. a Printed Piece

Websites create a very unique user experience because users are able to interact and consciously make a decision by clicking a mouse, skip around a website at their own leisure by using navigation, and pages can scroll indefinitely. The user controls the website experience and where they want to go since it is a non-static environment.

Web Designers are often told that on the homepage of a website the most crucial information about a company or business needs to be designed above the fold. The saying, “Design Above the Fold” comes from how newspaper Designers layout news articles. The most important headline and news stories need to be placed above the crease of the newspaper because that is what will be viewed immediately when picking up a newspaper. This also applies to websites so users can quickly learn about the company or business.

Print pieces are two-dimensional contrasting websites. Print pieces can be held and felt by the user which can create much more of an impact when understanding and examining the design. Print layouts tend to have a high graphical and visual effect because the pieces are not restricted like websites are.

Summary

Both print and web design have their advantages and limitations. When designing either a print layout or a website it is necessary to take different design approach to develop the strengths of each medium and minimize its weaknesses so that the finest outcome is produced.
1 Arial, Comic Sans, Courier New, Georgia, Impact, Tahoma, Times New Roman, Helvetica, Trebuchet, Veranda, Geneva
2 cathode-ray tubes
3 liquid crystal display
4 HTML, CSS, JavaScript, Flash
5 i.e. Internet Explorer v. 6,7, Firefox, Safari, Opera
6 i.e. 800px x 600px, 1024px x768px, 1280 × 800px



© 2016. JBird Creations.