Adobe Creative Cloud

Design

May 12, 2016 /

Print Design to Web Design: How to Transition and What Skills Translate Directly

As Wikipedia teaches us, the history of print goes back as far as the early Mesopotamian civilization before 3000 BCE. Movable type? That’s somewhere around 1040. Finally, web design? That’s only 1990-1992.

I probably sound like Captain Obvious here, but that gap is truly massive. Compared to print, web design is like a newborn!

Undoubtedly, as web designers, we can still learn a lot from print design and adopt many of its principles to our projects. After all, when first websites came along, our print experience was the only thing we had. From there, it kept evolving and evolving, into the standards that we have today.

But let’s take a step back. Here’s how to translate your print design skills to web design:

1. Hierarchy

Print is all about hierarchy. When you put your hands on a nicely put together newspaper, you don’t need to wonder where to start reading, or what parts are the most important, where the headlines are, and so on. Everything is just clear, and it has an easy to grasp hierarchy.

Good web design should be very much alike. And it all starts with correct typography use.

In a nutshell, the most important parts should typically be bigger, bolder and more visible than the rest of the text, obviously. This is what sets the tone for the other elements on the page. Effectively, it’s where the visitor should look first, and based on what they see, decide if they want to consume/read more.

Then, similarly to how different stories are shown on a single newspaper page, you can use individual sub-headers to present different pieces of info in your web design as well. Just keep in mind that on the web, the user follows the F-pattern, as documented by Nielsen.

f-pattern

2. Whitespace

Granted, print design isn’t very whitespace-focused in nature.

And don’t get me wrong, it’s not that there’s no whitespace in print, far from it. But we – the readers – just tend to be more forgiving when it comes to any hand-held things. For instance, if we’re not sure if we’re seeing something right on a piece paper, we can always just bring it closer to our faces. On a computer screen though, changing the resolution, or using “Ctrl” and “+” isn’t always something that people are willing to do.

So whitespace is a lot more important with web design than with print, and you should work on it a lot more consciously.

We’ve talked about whitespace in more detail in the previous post, so please check it out if you haven’t already.

3. Find a balance between text and images

Much like in print, good web design is very much about finding the right balance between the text and the visuals.

Good-Form-Runing

Example by Gary Reverol, via Behance

Unlike in print, however, things are a bit more fluid in web design (more on that in a minute). Therefore, when designing for the web, you need to make sure that the balance is still there, no matter what device or screen size the design is being viewed on.

Also, to make things easier on yourself, you can utilize more whitespace for better visual separation.

Lastly, what works best in web design are simple layouts. For the most part, more complex layouts, which you could get away with in newspaper or flyer design, won’t work for the web (precisely because of the variety of the devices that are commonly used).

4. Use pull quotes

Pull quotes are a very trendy thing in web design these days. Unsurprisingly, they are basically a direct copy of their print counterparts, and they can serve pretty much the same purpose.

Adobe-Annual-Report

Example by Luis E. Quevedo, via Behance

They are great at breaking down long paragraphs of text and singling out the most important parts of them.

Additionally, they can serve as this final icing on the cake in your typography design. With pull quotes, you can usually go a bit more wild when it comes to decorative typefaces and non-standard layouts.

5. Experiment with large typography in the middle of the page

Sticking with typography for one more minute; traditionally, headlines tend to utilize the biggest fonts compared to the rest of the design … be it print or web.

But some print designs also take a chance and use similarly big fonts to showcase either quotes or random pieces of thought right in the middle of the page. Like so:

Graphic-Notations

Example by Sean O’Connor, via Behance

This is a very nice trick, and it does a lot to break the tension and give the reader a visual anchor to rest their eyes on.

And this sort of thing can be also used on the web quite effectively. One of the prime examples of this is Medium.com. Some of their stories take advantage of this very idea. An example:

medium

Nowadays, you can recreate an effect like that with Typekit fonts, for instance.

6. Use multi-column design

Columns seemed like a thing of the past, but they’ve sprung back up and are having their second youth these days.

In print, columns are basically the – and I mean THE – standard. No matter what newspaper you pick up, you’ll find text put into columns on, more or less, every page.

On the web, though, columns were not that popular, and especially in the age when the most common screen resolution was 1000px to 1400px (wide) or so.

But with full HD or even 4K, and with full-width web designs, instead of using a narrow content box in the middle of the page, we have a lot more real-estate to work with.

Not only that, but the reader also expects you to utilize their whole screen. After all, why would they spend serious money on a 4K display only to see your extra-small design right in the middle with thousands upon thousands of empty pixels around.

So … columns.

Experiment. See what works in your specific project.

Here’s a nice example, the HTML5 Periodical Table:

html5-periodical-table

Although not immediately apparent, there are multiple columns on that page – especially when you try resizing the browser window – each representing a different HTML selector tag. When you think about it, this page looks like it was taken directly from print, and it could look equally as good in some Web Developers’ Magazine.

7. Use large imagery

Print design loves pictures and images. And even more so in magazine design, marketing design, flyer design and all other cases of commercial design.

It just so happens that web design can benefit from good imagery equally as much. With full-screen designs being more and more popular, we finally have some room to showcase truly awesome photography, or other highly visual elements.

Take advantage of this by experimenting with hero sections, large images interspersed throughout the page, but also don’t forget about GIFs, and other forms of animation. Even though there’s no animation in print design (unless you live in the Harry Potter world), give those forms of imagery their chance.

At the same time, remember to keep everything within the same color scheme. Your images, static design elements, fonts … everything needs to fit perfectly, just like it does in print.

X-Magazine

Example by Lucy Victoria Layton Frost, via Behance

Speaking of images…

8. Control the backgrounds

When working with print, you don’t always have influence over the backgrounds. Most of the time, a piece of page is just going to be white, and no one will be ready to “waste” ink on printing a full-width graphic background.

With web, you have a lot more freedom. If you think that the design can benefit from it, you can go even as far as taking one awesome image and making it the background of the whole design. Granted, in a case like that, the rest of the design needs to be more tranquil, but it’s still very doable.

I should mention that image backgrounds are only one of the possibilities. You can also experiment with single-color backgrounds, multi-color gradients, or anything in between.

(While I’m at it, keep in mind that colors on the web are in RGB, so remember to switch them from CMYK.)

9. Try wrapping text around images

Wrapping text around images is a fairly common trick in print design. Not only that it just looks darn good, but it also allows you to use the space available on the page more effectively.

When it comes to web design, however, this wasn’t historically the easiest look to achieve, and especially if you wanted to keep things accessible and reader-friendly. There simply wasn’t any tools to help us out.

But today things are different. Wrapping text around images is very much achievable with CSS shapes. The idea is to create a path in CSS and then make neighboring text wrap along that path. The effect is truly interesting, and it seems to work for web design just as much as it does in print. Here’s a nice writeup on the topic.

Layouts

Example by Danielle Whitis, via Behance

10. Web design is ever-changing

Okay, so with print, your job is basically done as soon as you send the thing to … printing. Then, it’s someone else’s responsibility.

Not at all the case with web design. The way every website looks fluctuates based on the device, browser and screen of the person viewing it.

On the one hand, this is awesome because everyone can see a version of the design that’s optimized for their specific device. On the other, though, as a designer, you have to worry about a lot more things than just making your work look right in a single environment – the main production environment – like it is with print.

The simplest and also the best solution is to keep your design minimal. Minimalism has a lot of benefits for web design. It makes the page clearer and easier to grasp, and it puts the focus exactly where it matters. Also, in this specific case, it’s a lot easier to make minimal design responsive than just about any other style of design.

Your take

It turns out that print design and web design are somewhat two sides of the same coin.

But what do you think, what else is there? Do you know of any great examples of “print design turned web design”? Feel free to share.

Join the discussion

  • By Lore - 7:28 PM on May 13, 2016  

    Great article! Simple effective tips.

  • By Karl Marais - 2:16 PM on May 23, 2016  

    I agree that a person that specializes in print design has the skills necessary to design both an attractive and functional website, at least as pertains to the user experience. Give some attention to the metadata and it will be attractive to the search engines too.
    IM Applied