10 ways to transfer your print skills to digital

1 Stop being a control freak

Rule number one: your digital design work is about presenting information, but the way this information looks and the way it functions are two separate fields. CSS exists to take care of the look and formatting of information. Stop viewing it as a designer’s enemy and embrace it as a tool just like Photoshop or InDesign. It’ll pay off.

Picas to pixels

2 Picas to pixels

Picas are a physical measurement, and point size is a standard subdivision of this. But you learnt this in college two decades ago, right? Well, forget it. In digital, all dimensions are relative, so take the time to learn why you refer to your canvas space in pixels, and why type is measured in pixels and percentages.

3 RGB and hex

So you’re used to working with four colours, specials and fifths. Forget about them, too. Colour is the biggest hurdle facing designers shifting from print to digital, so get your head around RGB and hex values. Simply put, hex values are six-figure codes that represent an RGB colour in mark-up, where black is #000000, with R, G and B values all at zero per cent, and white is #ffffff with R, G and B at 100 per cent each. Easy, eh?

Legibility is still a priority

4 Legibility is still a priority

Unless you’re really trying to alienate your audience, make sure that legibility is priority number one. This means making text big enough to read, using embedded and system fonts suitable for reading on a backlit monitor or tablet, and giving images room to breathe. A safe rule of thumb to convert picas to point size is to double it and add two. This works well for body copy being redistributed from print to a tablet device, for instance.

5 Start in landscape

Sometimes you’ll be required to design a digital page layout twice: once for vertical use and once for horizontal, with the page dimensions switching between each. Always start with the latter, as this will often have a tighter fit than the vertical, and will therefore dictate the design and fitting of the content you’re working with. Once you’ve nailed the horizontal, carry over the main elements and page furniture to the vertical.

Go large with images

6 Go large with images

Images always look fantastic on a backlit screen, especially on pixel-packed tablets like the iPad and Kindle Fire. Make the most of this by using your imagery as large as possible. If you’re working on digital publications, use full-screen images to create dramatic pauses within an article. The real trick of digital magazines is in recreating that ‘stop and stare’ moment that’s so effective in print.

7 Typeface experiments

You might have a typeface library bursting at the seams with slab serifs and bespoke display fonts, but bear in mind their usage on mobile and desktop. You might be able to get away with using them as headline or impact fonts, but for body copy it’s best to stick with a rugged system font, especially if your digital edition will enable users to resize the point size.

Relearn the grid

8 Relearn the grid

Editorial and graphic design grids are based on columns, boxes and negative space, which combine together to aid the presentation of the content you’re working with. In the digital sphere the grid rests on a horizontal hierarchy as much as a descending one, especially on tablet devices where the left-to-right-swipe is a common continuity method. Think about how you can flow content up and down as well as from left to right.

9 Tablets are for touching

Don’t underestimate your user and cram precious screen space with instructions and calls to action that plead with them to ‘touch here for more content’. Users naturally poke and prod at touchscreens, so guide them to new content instead of ordering them to it. You’re a designer, so come up with a set of suitable icons – such as a plus and minus symbols – that convey functionality without having to explain it.

Don t overreach

10 Don’t overreach

Just because you can do something in digital that you never could do in print doesn’t mean it’s absolutely necessary. For example, animated splash pages for websites that keep viewers hanging around are the digital equivalent of front-loading a publication with adverts; while clever page transitions on a tablet edition might look cool to you, they interrupt the reading process for the user. If in doubt, leave it out. That’s what we say.

All illustrations by Evgenia Barinova