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


Design Conventions on the Web

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.

10/02/2007

Design conventions are elements that multiple people agree upon and implement so that web users will have similar experiences across disparate websites. By using web design conventions when creating a site, you are making life easier for the typical web visitor, which in turns leads to thorough visits and higher conversion rates.

These similar experiences eventually transform into expectations. If conventions make a visitor’s user experience less complicated, then it is safe to assume that websites that do not follow web design conventions will be looked upon negatively by web visitors. Just as there are standards of practice in the business world, there are corollaries in the web design world that ensure that nobody has to reinvent the wheel over and over again. As a result, designers are allowed to concentrate on customizing specific client requests. Fortunately, web design conventions are very straightforward and effective. Most ordinary users could recognize these design elements since they are so common.

Here are just a few examples:

1. Logo is placed conspicuously in the top left or right-hand corner of the homepage

Because a user’s eye is often drawn to the top left hand corner of a web browser, most designers consciously put logos in this location. It has become a norm on most sites to place logos in this position. When a logo is situated anywhere else, it takes a little more work on behalf of the designer and user to establish its authority.

2. The links on your primary navigation bar should all be internal links

Primary navigation should be a consistent fixture. If a user clicks a main navigation link and is directed to an external site, that consistent fixture will disappear. The user will lose contextual understanding of where they are.

3. Main navigation is often designed in a vertical or horizontal format

Primary navigation must be clear, structured, and intuitive. Positioning the navigation vertically or horizontally creates this feel, does not confuse the user, and helps them quickly identify the navigation.

4. Underlining words often indicate an active link

Underlining words separate active links from paragraphs of text, and create a hierarchy showing that it is important and clickable.

5. Changing the color of visited links

Changing the color of the link after a user has visited this page helps the user identify where they are, and have been on a site.

These consistent features on a website help users effortlessly operate a site to achieve their goals, to know what to expect rather than wondering how to use a new attribute, to immediately locate essential elements on a website, and to guide them toward important components such as the navigation. These basic aspects of websites improve a user’s ability to get things done quickly, and ultimately will help reinforce a satisfactory user experience. When elements of a website always behave consistently, users don’t have to anticipate what will happen. Instead, they know what will happen based on earlier experiences.

If a user visits a site and it behaves abnormally, they will feel less in control of their experience and will be quickly turned away from wanting to search deeper into the site. Because most sites use these design conventions, users start to expect that all sites should act in this way. They do not want to relearn a new system each time they go to a new website. Designers must always keep in mind that a web design, layout, and key messaging have about five to eight seconds to convince a new user to stay at a site and dive deeper into an inner page. Don’t waste this valuable time by forcing your web visitors to understand a brand new, untested design paradigm.

Sometimes design conventions can be modified, but only if it allows a user to complete a task in an improved way. Perform user testing. If your test user visits a modified site element and appears to be confused, obviously this is not a good direction to proceed with.

It is important for designers to remember that graphics are pleasant additions to a website, but should never get in the way of users understanding of a site. The web allows a consistent interface; use these design conventions as much as possible so users will be pleased and revisit a site numerous times.

Designers are committed to working with website business owners to design websites that adhere to these design conventions. Through mutual collaboration, the implications of deviation from the conventions can and should be explored. Conventions should be followed as often as possible as they are useful guidelines that were created to help.



© 2016. JBird Creations.