Designing for the web is a different skill than designing for print. Print designers who learn these three simple differences will see a dramatic increase in the effectiveness of their designs. Otherwise their designs will fall flat.  Feel free to share this article with the print designers in your life.

Here are three key differences between designing for print and designing for the web.

Difference #1 The web has different limitations.

When designing for print the biggest limitation is paper. Everything about paper is expensive. So, designers have learned to squeeze as much onto the page as possible.

The web is different.

Online you have unlimited space so there is no reason to squish everything together. But you do have a limitation you must pay attention to: Attention. You have very limited attention from your visitors. Even right now you are trying to decide whether to keep reading or to click away to some other site online.

Think of someone’s attention span as an hour glass. The sand is someone’s attention and as soon as they get to your site that attention starts draining away.

The only reason someone will stay on your blog/website is if it is the most interesting thing online…for that person at that time. The rest of the web is only a click away. A good design allows you to add sand to the top of the glass to keep someone reading.

To explain how to hold someone’s attention lets look at two design examples.

Notice above how the text wraps around the photo. This is a common print technique that saves trees and money but is a mistake online.

This sort of design would not work online for three reasons:

• The text is too dense. When writing for the web you generally don’t want to go over 4 lines of text. If you have five lines of text you must follow that paragraph with a single line sentence or a heading or some other sort of attention span reset.
• There are not enough attention span boosters. People will give up reading this page before they finish.
• It is to hard to scan. People in a hurry (which is most people online) will go somewhere else to find a quick answer.

Below is an example of a well designed web page.

Notice how the photo rests on its own line. This adds sand to visitors attention span clock. Don’t believe me? Just look how far you have scrolled down this post already. White space is your friend.

Other differences include:

• Headings break up the text. Headings not only put sand in the attention hourglass it also can boost your rankings on google.
• Bulleted lists make the post easy to scan. People online are always in a hurry. Make your post easy to scan and they will be more likely to share it.
• Breathing room. The web design example page has a lot more white space. This puts sand in the clock and lets people feel less claustrophobic. Good web design makes extensive use of negative space.

Difference #2 Designing for the web blends science and art.

It is hard to measure the effectiveness of a paper  design. Once the design goes to press it goes into a black hole where you don’t know how many people see it or how long they spend looking at it.

The web is different.

Online you can measure your design and know exactly how many people read it and how long they spend on the page. Good web designers get to know Google Analytics and use it to perfect their design. For important pages like landing pages they test different versions and see which one is more effective. They use an approach called AB testing which is a tool print designers know little about.

Google uses AB testing on every aspect of their web presence. They famously tested 41 shades of blue to find out which shade got the most clicks. This may be more than you can do but it gives you an idea of how far this new approach can go.

A good analytics solution will tell you how long people are spending on the page, what keywords they come from and what links they are clicking on. You will find that the more you use images, bullets and headings the longer people will stay on the page.

Difference #3 Designing for the web is a process not an event.

When you design for a printed piece the designer does all her work and then sends it to the printer. At this point her job is over and she goes off to work on another project.

The web is different.

It is easy to make changes as you go. Not only that but as you measure your site, you start to get ideas for improvements as you go along. The key to a successful web presence is continuous improvement. Always be tweaking and improving. If your site gets a little bit better every week by the end of a year you will have reached a whole new level of excellence.

What do you think? What are some other differences between print and online design? What makes for a good web designer in your opinion? Do print designers do well online in your experience?