Web vs. Print in terms of Design

Web and print are two completely different platforms of publishing. Technically, the most profound difference between web and print is one reads web publications off a computer monitor/the LCD screen of a mobile device whilst print publications primarily remain on paper.

This difference has a significant implication on design principles used on both platforms. The bottom line is, print design principles are not suitable for web design, and vice versa.

Now why exactly are they not suitable? Kress and van Leeuwen (1998) stress that print design is based on information value, salience and framing. These three signifying system function to arrange a document into a coherent structure. The positioning of each multimodal text of different importance and salience affects the entire design (Kress and van Leeuwen 1998).

In addition, Kress and van Leeuwen (2006, p.178) also state that reading off print is a linear movement. In print, people generally read from left to right in a one-dimensional line.

(Source: Ashleigh Hong 2o08)

An example of print design, where elements within the page are arranged according to importance,
while the framing of the page leads the readers eyes through the content.

On the web, it is a whole different story. A study by Nielsen, (cited in Rowse 2006) found that only 16% of people read word for word off the web, and another found that the average person only comprehends about 60% of what they read.

This means web design needs to be a whole lot more interesting in order to retain readers.

Nielsen (2006) states that readers go through web content extremely quickly, in an F pattern. Readers also tend to scan the page, picking out individual words and sentences (Nielsen 1997).
The following image illustrates a reader's eye movement on web content.

Image from Nielson's eyetracking study illustrates a reader's eye movement to resemble an "F" shape.
(Source: Nielsen 2006)

Hence, we can come up with a few useful guidelines for web design. Firstly, keep the content short as people prefer to read short articles (Nielsen 2007). It will also be a good idea not to flood a web page with paragraphs after paragraphs of text as it will only repel your readers. Secondly, use formatting such as bold and italic to guide your scanning readers (Rowse 2006). Lastly, use pictures to draw attention and emphasize points.

An example of an easy-to-read weblog, kennysia.com. Notice that the main content is kept to the left, paragraphs are short, sufficient formatting is used and pictures are added to keep the interest.

The bottom line is we should not confuse the distinctive natures of web and print design. Instead, we should fully utilize them in order to convey a message effectively.

References

Kress, G., & van Leeuwen, T. 1998, Chapter 7: Front pages: (The Critical) Analysis of Newspaper Layout, Approaches to Media Discourse, Blackwell, Oxford.

Kress, G. & van Leeuwen, T. 2006, Reading Images: Grammar of Visual Design, Routledge, London.

Rowse, D. 2008, Scannable Content. Retrieved on Nov 10 2008 from
http://www.problogger.net/archives/2006/02/20/scannable-content/

Nielsen, J. 2006, F-Shaped Pattern For Reading Web Content. Retrieved on Nov 10 2008 from
http://www.useit.com/alertbox/reading_pattern.html

Nielsen, J. 2007, Long vs. Short Articles as Content Strategy. Retrieved on Nov 10 2008 from
http://www.useit.com/alertbox/content-strategy.html

Nielsen, J. 1997, How Users Read on the Web. Retrieved on
http://www.useit.com/alertbox/9710a.html