Cross-Platform Design Tips

Making the transition from designing for print to digital is a big step for a designer. The fundamentals of design don’t change, but there are a number of important differences between designing for print and digital platforms.

In print design, you are limited almost exclusively by materials and colours, but designing for online is a lot more limited, as it must take place within the architecture of online content, whether it’s a website, an e-flyer, a video or a game. To make things more complicated, each user uses a different browser, smart phone or computer monitor to view digital content. Cross-platform design is all about understanding the contrasting design considerations and ensuring that designs look good on a range of devices.

Colour Format & Conversion

The biggest difference between print and digital is colours. Colour printers use the CMYK format, with each colour being made up of cyan, magenta, yellow and black. Digital media, however, is based on the RGB colour format – using red, green and blue. Think carefully about the colour format needed your designs. While it’s relatively easy to convert CMYK to RGB and vice versa, it can result in a loss of colour information. If designs are being used both in print and online, design in RGB.

RGB files are around 25% smaller than their CMYK alternatives, and some filters and functions in Photoshop can only be used for RGB designs. The RGB colour gamut is also more extensive than CMYK, meaning there are more colours to choose from. RGB images are web-ready, and can still be converted into CMYK for print purposes with relative ease.

Font & Typeface

In print designs, there is a really wide range of fonts available. This also applies to some online design, specifically those which are image-based. Problems arise when text is expected to be read by search engines, or appear as real text rather than as an image on site. The HTML of a webpage merely contains the text and reference to the font that should be used, so unless that typeface is installed on a user’s machine, it could be replaced with Times New Roman – or, even worse – Comic Sans! For web pages, try to use common fonts, or use an image or a flash file if you want to use a particular typeface. This means you can maintain control of the way a web page appears.

Layouts & Code

Website layouts are limited by the tools and code used to build them. HTML is not like Photoshop; elements need to be coded in a simple way which means particularly extravagant designs can be difficult to pull off. There is also findability to think about. Search Engines expect websites to be constructed in a certain way. Certain layouts can confuse search engines and mean that rankings for the website are detrimentally impacted.

Summary

Design for online doesn’t have to be completely different from print, and the two aren’t necessarily juxtaposed. Recent research has found that digital and print catalogues serve completely different purposes. Designers can have the same amount of control over an individual image, but must consider what platforms the designs will be displayed on. Designers need to understand these platforms if they are to design effectively for them. Online design is influenced by performance and functionality as it is by look and style.