News

Web Design is Not the Same as Print Design

April 07, 2008 - by Tortus Technologies' designer Victoria Chapman

A web designer may be a graphic designer, but not all graphic designers are web designers. It is not uncommon for people to compare web designs to designs seen in printing. It’s natural to do so because websites are intangible and people like the comfort of being able to hold something (like a print advertisement) in their hands. But the truth of the matter is websites are not the same as print – the way people interact with websites and the variables from user to user make web design a completely different animal. There are some sacrifices that must be made to make your web design work, but when you accept them, your site will be easier for everyone to use. This article was written to point out the differences between print design and web design and show why it is important to consider these differences.

Interactive Functionality

Web designs and print designs are both interactive in some form or another, but web designs are created for a different type of interaction than its printed counterpart. Websites are interactive in a user-controlled way. On a website you can navigate by clicking, contacting people, shopping, writing and more. The possibilities for websites are broad and varied. Interacting with a website involves more than the passive act of viewing a printed poster or turning a page in a magazine or book. As said by Colin Leiberman from cactusflower.org, “Designing for web means designing for web behaviors”. A web site is an interactive experience that requires the design accommodate all types of users, user platforms (various browsers, computers, hand-held devices, etc), and user behaviors.

Variability and Accessibility

Variables are a key difference in web design compared to print design. With print, there is the satisfaction that it will always look the same, no matter where or how you look at it. Once it’s printed, that’s the way it is. With web design however, there are too many factors that override the ability to make designs look exactly the same on every computer or device. However, if you learn to work with the fact that there are variables, you can have a design that looks great and can be viewed by everyone on every platform.

Here are some items that vary on web sites:

Color Variation

Color on computers can be deceiving. You never know exactly how a color is going to look on each person’s computer monitor. Often people will say that a color looks off to them, but it’s usually because they are looking on a different monitor than they were the last time. Because of the slightly different display of light and color on each monitor, colors cannot be made to look exactly the same for everyone. Keeping this in mind when viewing your site can save a lot of frustration over trying to get exact colors.

Like color, the way text displays will also vary on every person’s computer depending on what type of system they are running and what browser they are using. When designing for web, it is also important to let your viewers control the text size in their browser. Some people have a hard time reading smaller text and need to be able to increase the size. Because of this factor, sites should be designed using approximate percentages rather than exact pixels, to allow users in every browser to increase or decrease sizes. When using pixels, people viewing in Internet Explorer can’t change the text size. It is important that the viewers using Internet Explorer (as apposed to Firefox, Opera or Safari, for example) can also control their text size. Because of the variable text sizes, no text layout will look exactly the same to everyone. But, allowing all of your viewers to control the size of the text makes for a more pleasant and more accessible viewing experience for everyone.

Fonts

Not only is text size an issue for consideration, but the font that is used is also. In print a designer can use any font under the sun and everyone can still see it. On the web, fonts vary on every person’s computer. Web sites draw fonts from what is available on the viewer’s computer system. If your design contains an obscure font, such as Bickham Script Pro, chances are, nobody is going to be able to see it and instead, it will default to a standard system font. Due to this, web sites should be designed using fonts that are universal across all computer systems. Some of these universal fonts include Arial, Helvetica, Times, and Georgia, to name a few. If your site is designed using universal system fonts, your site will look more consistent across everyone’s computers and devices. Plus, using these fonts will most likely make it easier for everyone to read. There is nothing worse than trying to read a whole article that is displayed entirely in a fancy, curly script!

Monitor Resolution

Just as everything mentioned above varies on each person’s computer or device, monitor resolution does as well. On a print ad, the page remains exactly the same size for everyone. Nothing moves, it always has the same margins and it is permanently placed where it is on a page that remains the same dimensions all the time. But, on the web, once again, there are variations.

Monitors and other viewing screens come in many shapes and sizes and also have user controlled resolution settings. The resolution determines the size the monitor displays based on pixels. The more pixels in the resolution, the more site you can see at once. The larger the monitor, chances are, more pixels are displayed as well. These variations in size and resolution make each person’s viewing experience a little different. If someone has a small, 12 inch monitor, their browser window can’t be opened up as wide as someone with a 22 inch monitor. Because of these possible variables in size, web sites need to be designed to accommodate both large and small viewing screens to ensure that all of your viewers can see your site.

The Issue of Images

In print, images are used freely at any size that its canvas or page will allow. The placement and use of images is unrestricted. No matter how many images are used, anybody looking at the page can see them immediately without waiting. Once it is printed, the images are placed exactly where they are, ready for viewing permanently. On the web, images come with a whole other set of issues that aren’t seen with print.

Load Time

Images are definitely useful and necessary for a lot of things on the web. We love images. But, there are certain things that should be considered when using images on a website. Because of their larger file size, images must be used thoughtfully to optimize the load time of the page. If you go crazy with too many images on your site, it will become a load-time headache for those with slower Internet connections or older computer systems. Use images where necessary, but not in excess. Designers can find creative ways to make websites attractive, without overloading the viewer with the download time of excessive images. When you use images, they should communicate, not decorate. Make sure when you choose images, that they are pertinent to the message you are trying to convey. Consider carefully what images you’d like to use and be considerate of those viewers who may have a hard time loading them.

Accessibility

Images may also be invisible entirely to some other people. More and more blind users are using the Internet by use of screen readers. The more images you have, the less their screen readers may be able to pick up. It’s important to use text in place of images where you can (in your navigation for example), so that those seeking information can still find it without problems. The same thing goes for people viewing the internet with other devices, such as cell phones, where they may have images turned off for ease of viewing on such a small screen. You want to accommodate as many viewers as you can, so making sure all of your important information is accessible is of key importance. Too many images, especially in lieu of text, will make your site less accessible and more likely that people will leave your site.

Search Engines

How could we not talk about search engine optimization? You want your site to be found and search engines are one of the most powerful ways for people to find your business. Using images in lieu of text will not only make it difficult for users who can’t view images, but it also may make it more difficult for search engines to index your site. If you use text where possible instead of images (navigation and titles for example), search engines will be able to find your information more easily and will therefore, make it easier for you to be found online.

Respect the Differences

There are many differences between the worlds of print and web, a few of which have been touched on in this article. Designing for web means that one needs to truly understand how the web functions and differs from print. The web is interactive, a user-created experience, which varies from person to person. Print conveys a message through a fixed layout. One is fluid and one is more concrete. While both require design and critical thinking, their differences should be respected for what they are. One should not be forced to be like the other. If you consider the difference between print and web when creating your website, you will find yourself respecting the web’s unique nature and the design challenges and benefits it presents.