WEB vs. PRINT Design
What Makes Web and Print Design Different?
As technology takes hold in today's environment, Print design becomes less and less thought of. That doesn't make it ANY less important, however. If anything, It makes it even MORE vital to understand the differences between web and print design, and how to utilize BOTH elements to your advantage.
-
In both web and print design, they require a clear and effective layout using the elements of design. One major difference you will notice with their layouts is their difference in dimensions. In print, sizes are measured in inches. Web, on the other hand, measures its space in pixels.
Another major difference you will notice in layout is that in print, the size is guaranteed. If you are making a 4x6 postcard, that post card will remain that size. Unfortunately for web design, this is not the case. When making a website or any other graphic for the web, you have to take into account that it will be seen on all different sizes of screens- from large desktops to small phone screens, your image has to be able to do it all.
One last major difference to note about the layout is that print design require bleeds and trim marks to guarantee results-web does not.
-
In any format, resolution can have a major impact on your design. Resolution is measured in dpi or ppi, depending on if you are working with print vs web design. One common misconception is that dpi and ppi are interchangeable, which is actually quite the opposite. You see, dpi literally stands for Dots Per Inch, referring to the number of ink dots contained in an inch of printing-making it only relevant in terms of print design. Most print design is around 300 dpi resolution- high resolution prints are printed up to 600dpi,
PPI, or Pixels Per Inch, is a measurement that is relevant for both print and web designers, but for different reasons. Every computer screen has a predetermined resolution of how any pixels are displayed in an inch, and if you design an image that has a higher resolution than intended, it actually distorts. Because of this, it is important to keep your web designs between 72 and 120 ppi to help avoid pixelation. Also keep in mind that having a higher ppi will impact your overall file size, impacting user load times.
-
Color is one thing that web and print design really don't have anything in common at all. They actually deal with completely different color spaces. That is why it is important to understand all color models and spaces, such as RGB, CMYK, and HSV. Below are just a few of the major differences you can find when dealing with color in print vs web design.
Print Design deals with CMYK (Cyan, Magenta, Yellow, & Black)You must consider the difference between colors on the screen, and colors on paper. You often have to choose "process" or "spot" colors for your printer to use. These colors are chosen from a palette that identifies with a unique code that you provide to your printer.
Web Design deals with RBG (Red, Green, &Blue), and in some cases HSV (Hue, Saturation, &Value). It is important to consider how color will be affected by brightness and contrast changes. Each color is represented by its own unique value, also known as hexadecimal values. This is a 6 digit code made up of letters and numbers. For an example, White's hexadecimal value is #FFFFFF.
-
Some print file types are interchangeable and can also be used on the web, but it is still important to know which file type is best for your design. Listed below are the most common file types and what projects they are best used for.
JPG (or JPEG)- this file type is used for both web and print design. It's best for still photography or images with a lot of color and/or shading.
PNG- this file type has two different options. The first one, PNG-8, is best used for small icons and simple digital art. The second, PNG-24, is best for images with transparency, as well as illustrations. PNG-24 has a lossless compression, which means this file can easily become larger than an JPG, so this is something that you should be conscious of when designing.
PDF- Preserves a file's original content. No matter how you view the file, the PDF will keep the look of your design intact- making it the perfect option for documents that need to be printed or viewed.
SVG- Preserves a vector graphic's scalability, making it great for graphics like logos or icons.
GIF- This file type is the most ideal for not only animations, but transparent images and simple small graphics with a limited color palette. GIF's color capabilities are limited, especially when compared to PNGs or JPGs, but the file size is usually really small- making it a perfect choice for web design.