clickbrand

Print vs. Web

Most web designers start out creating a photoshop document with the size intended to fit universally with all screen dimensions. However, print designers, literally design on a whole other scale. Photoshop is a program that shares compatibility useful for both the Web and Print documents. The two are unique forms of design that cross paths every now and then, but definitely have their distinguished members of the family.  Below I am going to illustrate the main attributes of both and point out their differences.

Audience

The experience of your audience becomes important when creating a project for both Web and Print design. In print design, the attention of your audience is important, such as getting the audience to sit on a page of a magazine long enough to get the main concept and message across. The main limitation of this particular area is quantity. It is expensive to put an Ad in a magazine, therefore your company only has the budget for a one page ad. In this ad, you have to design it using textures, shapes and imagery to sell your product and/or services.

In web design, you really have no limitations as far as quantity. Your website can consist of as much interactivity and links as you would like (within reason). Your main challenge is to get the user to stay on your website. What keeps them interested? What drives them away? For example, as far as a standard sky scraper ad on a website page, you have the ability to have that ad link to another site and so on and so forth.

Layout

The experience of your audience becomes important when creating a project for both Web and Print design. In Print Design, the attention of your audience is important, such as getting the audience to sit on a page of a magazine long enough to get the main concept and message across. The main limitation of this particular area is quantity. It is expensive to put an Ad in a magazine, therefore your company only has the budget for a one page ad. In this ad, you have to design it using textures, shapes and imagery to sell your product and/or services.

As far as layout in Web Design, you are working in pixels instead of inches. More than likely, your design is multiple pages, designing a website for instance. In this circumstance, you need to keep consistency throughout. Another challenge in web design, is to design your site to look the best on all monitors and monitor resolutions. This is where color partakes in the difference between print and web.

Color

It’s important to know the difference between colors in Web and Print design. You are viewing colors either on paper or on a monitor. You have a choice between RGB (Red Green Blue) and CMYK (Cyan, Magenta, Yellow and Black). In Print Design, You need to use CMYK for print design in order for the colors to match better with your chosen printer. These are colors you choose from a palette and identify with a code that you provide to your printer.

In Web Design, you need to use RGB, which gives you the colors that will show up best on a monitor. Consider the difference from monitor to monitor (brightness vs. contrast). Colors are represented by “hexadecimal values”, which are in a 6-digit format. Followed by Color, you get quality, and that is what I’m going to hit on next.

Quality

There is a difference between printer quality and web quality. For instance, with Print Design, you want the best given quality for print. Pixels are highly important in this case. For a high quality print, you are going to want to set your image at 300 dpi (digital pixels per inch). This will make your illustration, photograph and/or graphic look at it’s tip top best.

For Web Design, putting documents at 300 dpi is completely unnecessary. If you begin to design a website in such a large formatted document, you better have the patience for it to load on the web! No websites are designed (or should be designed) in 300 dpi. In fact, the resolution used to design anything for the web is 72dpi, whether it be as little as a tiny button, to as big as a half page web ad. There you have it–some insight on the difference between web and print.

Now, here is a fun video I found in vimeo — pretty sweet!

Digital Art Triptych: Web Design from Tyler Joynt on Vimeo.