Skip navigation

Online design versus print design

Designing for online publication is rather different from designing for print. In print-based text, the reading process is ‘linear and textual integration [is] achieved by linguistic means’ (Kress & van Leeuwen 2006).

However, in online-based text, the reading path follows F pattern because users would first read in horizontal movement and then move down to the page in a second horizontal movement. Lastly, they would scan the content’s left side in vertical movement (Nielsen 2006).

This implies that when designing for web, there are three things to bear in mind:

  • A good introduction would acknowledge the users about the gist of the article and encourage them to keep on the reading;
  • Avoid verbose and lengthy words because users generally do not read a lot of text online as reading from the computer screens is roughly 25% slower than reading from paper (Nielsen 1997);
  • Use headings and subheadings because users tend to scan and select keywords, sentences and paragraph that interest them (Nielsen 1997).

Figure 1: Printed front cover of Time magazine

Figure 2: Online version of Time magazine

The first thing the audience would notice when looking at front cover is the large photo of President Obama. As Kress & van Leeuwen (2006) suggests, salience is the element that attracts the viewer’s attention. The saliency created from the large photograph is capable of prompting the readers to read the articles.

On the other hand, the website has a much more complex structure as there is a ‘manipulative effect in the way language and modes of image, text and sound are combined in websites and linked to layers of interconnections within and between sites’ (Lemke cited in Walsh 2006).

In other words, printed text depends heavily on attractive photograph to draw the attention while website requires interplay of hyperlinks, navigation bars, menu buttons, and interface to generate a good browsing experience for the users.


Kress, G. & van Leeuwen, T. 2006, ‘Chapter 1: The semiotic landscape: language and visual communication’ in Reading images: the grammar of visual design, 2dn edn, Routledge, London.

Nielsen, J 1997, Be Succinct! (Writing for the Web), viewed 18 November 2009, <>.

Nielsen, J 2006, F-Shaped Pattern for Reading Web Content, viewed 18 November 2009, <>.

Walsh, M 2006, The ‘textual shift’: Examining the reading process with print, visual and multimodal texts’, Australian Journal of Language and Literacy, vol. 29, no. 1, pp. 24 – 37.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: