call (02) 8006 2265

Graphic Design for Web vs. Print- It’s totally different Posted by Kerrie Brooks

When we come across some picturesque book cover in a library or mesmerising pictures on a website, we often tend to think that both demand same skill set from a graphic designer. Although, the sense of aesthetics and ability to appeal to the audience is relevant to both types of design approaches, there is a lot which is uncommon between these two. This post is about giving some insight into graphic design for web and print media, and how they differ from each other.

Graphic Design for Web

Graphic design for web is said to be not only an art but a blend of art and science. There are certain crucial elements that can’t be ignored while designing for web. Let’s explore some of them:-

Responsiveness: The graphics which you design for your website will be rendered very differently when people browse your site on their phones, their iPads or their Macs. Padding and spacing between graphics and other HTML elements may also look different when browsing via different devices. With increasing penetration of mobility, the need of responsive design is also increasing.

Browser Compatibility: All browsers don’t support every format (i.e. JPEG, GIF, PNG etc.) of images. As per a comparison of web browsers, APNG format is not supported by Chrome, whereas Safari and Firefox do. Similarly, Safari (for Mac) and Firefox renders PDF images without needing any plug-in, whereas Chrome can’t.

Correct Resolution: An image, when displayed on a screen of higher size than its original pixels, may get distorted or blurred. As the resolution of the screens of the devices- laptops, PCs, Mobiles-we use is predetermined, the graphic designer must use an image of matching PPI (pixels per inch). 72 PPI to 120 PPI is the generally accepted standard for Windows and Mac PCs. This chart gives us an insight about resolution of some the widely used devices.

Correct Fonts: Due to limited control over the behaviour of fonts on different devices, web graphic designers should always use fonts that are clean and easy to read such as Georgia, Sans-Serif, Myriad Pro, Arial etc. These days some free resources like Google Fonts and paid ones like Adobe Type kit are offering marvellous typeface options.

Understanding Colours for Web: Red, Green and Blue colours in combo (RGB) make all the colours we see on our digital screens. It is better to choose three different colours and use them consistently throughout the design of your page. Using a plethora of colours will make your site look cluttered.

Graphic Design for Print

Like designing for web, designing for print also has its own tools, terminology, formats, colouring technique, etc. Let’s explore some of them in brief.

Layout & Size: As the area to print is always limited, proper planning of layout of the design for printing becomes important. The graphic designer has to maximise the output in that constrained area along with meeting standards of print margins.

Correct Resolution for Print: Resolution for graphics/images to print is determined on DPI (Dots per inch) basis. Higher the DPI of the printing device, higher will be the image quality. We may choose the size of the image to print on the basis of its PPI.

Correct Format for Print: Although all popular image formats like JPEG, PDF, EPS, PNG etc. are suitable for readying an image for printing, PDF and TIFF are the most acceptable ones.

Understanding Colours for Print: Colours for printing are created by a combination of Cyan, Magenta, Yellow and Black (CMYK). The graphic designer has to specify colour codes (i.e. percentage of individual colour in the mix) in the design software to get the desired print quality of that colour.

Differences in both approaches

Now that we have explored some of the characteristics of both styles of graphic design, let’s contrast both approaches:

User Experience: Print designs give a tactile feel to a user by their texture, shape, embossing etc. This feel can’t be produced in digital imagery. Similarly, digital images may have interactive and self-explaining tools embedded in them which is not possible with the print images.

Design Lifecycle: Unlike the design for print which is not going to change ever after the final print is done, web design has to evolve and change many a times. Buttons, polls, forums, videos and other Interactive elements of a website need continuous design changes. Thus, design lifecycle of a web design practically never ends.

Navigation Possibilities: Unlike the print design, where navigation is nothing but flipping pages, Web design must have navigation functionality. They have to incorporate design elements such as menus which let the viewers easily find what they are looking for.

Size & Layout Constraint: As mentioned above, print designs are constrained to area of the printing surface. The web designs, thanks to technologies like CSS and HTML 5, have the flexibility to exploit the screen space as much as they like. The print designs are not expected to be available in different sizes, however, web design should give consistent viewing experience across multiple devices (having different screen size) and browsers in order to garner good customer response.

Process Control: A viewer has more or less zero control over the final product in case of print designs whereas viewers, in case of web designs, can also change the layout chosen by the designer by changing their browser settings. In print designs, it is the designer who chooses, customises, or tweaks the design until the final print. Once the print is out, the designer’s reign gets over. The web designer, however, has a continuous control as he can change a text, image or the whole website itself anytime.

Relevance of Design Methodology:
For print designs, it doesn’t matter how the designer arrived at that particular design. All that matters is that design must LOOK good. However, a web designer has to take care of usability, interactivity and navigation of the website apart from the look. A web design is of no use if it looks great but does not have much functionality.