The Journey from Print to the Web

The HOW Interactive Design Conference is for the designer working through complex processes, across platforms, and trying to please both the boss and the client. HIDC is for you. Join us.

Editor’s Note: Here, Paul Boag offers a taste of his upcoming live workshop, The Journey from Print to Web. Learn more and register at HOW Design University.

I have been a web designer for 20 years and I want to tell you something: We are snobs. We love to tell print designers how the web is so different. How a print designer should never consider designing a website. How you cannot be a print designer and a web designer. As we like to say here in England, that is bollocks.

In fact, there are a staggering number of similarities between the web and print, and many of the skills you have as a print designer are transferable to digital. Your knowledge of typography, colour theory and composition all apply as much online as they do in print design.

The differences lie not in the design skills needed to produce great design online, but in the nature of the medium. Think of it this way: All the skills of a painter remain the same whether painting in oils or watercolors, but he or she needs to understand the differences between the mediums.

So what makes the web a different medium from print? What do you need to consider when designing for the web? The distinction falls into three areas:

  • Websites are interactive.
  • The web is unpredictable.
  • There is only one copy of your website.

Websites are interactive

The interactive nature of the web has a profound impact on how you design. You will need to become proficient in the subtle use of animation—but that is just the tip of the iceberg. When designing for the web, you can design over time. You can reveal elements by placing them under tabs, accordions or as the user scrolls down the page. This allows you a far greater degree of control over what the viewer sees and when they see it than you get in print design.


But the interactive nature of the web brings challenges too. When designing a book, you know that the reader has followed a linear path to get to any particular page. Even in a magazine, there is an intrinsic relationship between a page and its preceding page. On the web, this does not exist. A user may land on a page from Google with no context.

Then there are forms. Forms are the primary way that a user can interact with a website, and with forms comes a whole load of design challenges. Challenges around ease of use and error handling.

But the challenges do not stop there. The web is also unpredictable.

The web is unpredictable

When you design a piece of printed material in a software package like Photoshop, what is the first thing you do? You set the canvas size. But on the web you do not know the canvas size. People access your website on a range of devices using a variety of browsers. They also may not be running their browser full screen. In short, you have no idea of the available space.

new-document-photoshop1Setting the canvas size in an application like Photoshop does not make sense in web design.

This means you need to let go of pixel perfect control over your design. Instead of thinking in absolute values you need to think about proportions. As the available space reduces so elements resize. Type, imagery and columns all reduce. When the design starts to break because a column has become too narrow, you can add a breakpoint, a point where you can adjust the layout by reducing the number of columns or repositioning elements.

You will realize that the traditional software you have used for design is not suited to this kind of unpredictability. As a result there is a new generation of tools such as Adobe Edge Reflow or Macaw that helps you design for this uncertainty.

reflowThere is a new generation of design tools that help with the unpredicatability of the web.

Although tools can help you adapt to the unpredictability of the web, they cannot help with the last difference.

There is only one copy of your website.

The last difference is a more conceptual one, but it has a profound impact on how you design. When you design for print, a point comes when you send that design to the printer. At this point your design is reproduced many thousands of times and distributed to the reader. You have no idea how well that design performs. Did people read it? Did they act on it? It is hard to know.

On the web, there is only ever one copy of your work. It sits on a server and users visit that location to view it. What’s more, you can track that one copy. You can tell how users interact with it. In short, you can see what about your design works and what doesn’t.

This leads to a big difference between the web and print design: When you send a design to a printer you have finished your job. When you publish a design to the website, your work has only just begun. Because you can track users interacting with your website you can learn how to improve it. Also because there is only a single copy that all users access you can then adapt that design to improve it.

Instead of having to get a design right the first time, you can post a design online and iterate it based on what you learn from monitoring. This is an incredible bonus of designing for the web but it does take some changes in your thinking.

Designing for the web is a state of mind

Hopefully you can now see that designing for the web doesn’t need new skills. What it needs is a change of attitude. It is about embracing the interactivity, letting go of pixel perfect control and designing in a more iterative way. If you can do that then designing for the web will be much easier.

Learn more about this topic from Paul Boag in his upcoming live workshop on July 20 at HOW Design University.

W2297_new_1In The Strategic Web Designer, Christopher Butler will teach you how to think about the web, and in doing so, prepare you to lead web projects from the critical inception phase through to the ongoing nurturing process every website needs. That’s what web strategy is all about: having a comprehensively informed point of view on the web that enables you to guide a web project intentionally, rather than reactively.

You’ll find all the web design resources you need in MyDesignShop. And guess what? It’’ll soon be Black Friday in July at MyDesignShop. July 17th only, take 40% off almost all resources for designers and creatives with code BFJULY40.FW_BlackFridayJuly-640