Designing for Print vs Web

Before starting as a Graphic Design Intern at TargetClick, I designed for a printing company.  Making the transition from designing for print to designing for web has been a learning process. However, I have learned the differences and value of designing graphics for each medium. Layout When designing for web, the primary purpose is ease of navigation.  If a website doesn’t have an ease of navigation, it’s basically pointless.  You can have an amazing design on your website, but if your customers can’t easily navigate to what they’re looking for, they’re not going to stick around. Font Face Another huge difference is the types of fonts you can use.  When designing for print, almost any type of font can be used as long as it’s legible. Web has a much more limited selection.  You have to take into account how the fonts will cross over onto different platforms.  A website you design on a Mac could look completely different on a PC, so you want to use fonts that are universal. Image Color and Quality When deciphering between design differences for print and web, color and quality should also be considered. The colors used for print publications are CMYK: cyan, magenta, yellow and black.  On the web, all colors are RGB: red, green and blue.  When designing for print, the highest quality of images possible is necessary so that the image doesn’t print pixelated.  Therefore, use 300 dpi when designing for print.  When designing an image for web use only, it should be compressed down as much as possible to reduce the space and time it takes to load a webpage.  This means the file size should be a much-smaller 72 dpi. Sizing When you designing imagery for print, it’s usually clear exactly what size the image will be when it is going to be printed. Web is a whole different story.  Web screens come in all different sizes.  Viewing a web page on a 14” PC screen is different than viewing a web page on a 27” Mac screen.  With so many users browsing on mobile devices and tablets, sizing gets a lot more complicated in this day and age. Responsive web design aims to fix this problem. This is an approach to web design that allows a website to adapt to the size of the screen it is being viewed on. If your business plans on using web, print or a combination of both, it is wise to know the differences.  Nothing is more frustrating as a printer than receiving an image that is low quality.  On the web side, users are impatient and if it takes more than a few seconds to load your web page, you can bet they’ve already hit the back browser button.  By knowing the differences between web and print, you’ll be sure to have more successful designs that translate to all mediums used by your business.