Good visual composition on the Web

Designers normally consider the most appropriate balance between text and visuals when combining them to improve and enhance Web communications. They make sure that the right visuals are used for the job. Whether it is about the Web or paper, designers bear in mind what role the visuals play next to the text.

Experts agree that visuals can play four major roles:

  • an attentional role: the visuals attract and direct attention more powerfully than text;
  • a didactic role: visuals can explain something that is difficult to convey in words;
  • a supportive role: visual representations can help less able readers learn more easily;
  • a retentional role: visuals can facilitate long-term recall.

(Adapted from Hartley, cited in Dujardin and Williams, 2002, p.5)

To ensure that a document, either on the Web or on paper, matches users’ needs and expectations, designers make a rhetorical analysis of identifying and outlining three key aspects of the document: “audience, purpose and context” (Kostelnick and Roberts, cited in Dujardin and Green, 2004, p.8).

In art theory, in addition to the theme and the compositional elements, designers should consider a set of principles as basic laws that strengthen the meaning of a composition. Kress and van Leeuwen (1996, p. 213) discuss the traditional composition concept in the contexts of both art theory and media:

In the theory of art, composition is often talked about in aesthetic and formal terms (‘balance’, ‘harmony’, etc.). In the practice of newspaper and magazine layout it is more often discussed in pragmatic terms (does it ‘grab the readers’ attention’?). In our view these two aspects are inextricably intertwined with the semiotic function of composition.

According to the authors, there are three principles that define a composition:

  1. Information value, which is given by the place of the elements within the visual space;
  2. Salience, which refers to specific attributes of the compositional elements such as background, size, contrast in tonal value, colours, and sharpness;
  3. Framing, which means that the presence or absence of a frame, either on paper or on the Web, unifies or separates elements of the composition.

(Adapted from Kress and van Leeuwen, 1996, p.183)

Kress and van Leeuwen state (1996, p.183) that these principles could be considered not only in relation to pictures, but also to any “composite or multimodal texts”, which are combinations of text and images, either on paper or on the Web. Supporting the same idea, Harrison (2003, p. 50) says that “when a line appears beneath a word or phrase on the Web, it is a symbolic image”. In other words, any texts associated to visuals are seen as images on the Web.

The principles of Kress and van Leeuwen were later adapted and extended by Farkas and Farkas (2002. pp. 240-275) in relation to Web design. They are: emphasis, grouping, subordination, simplicity, proportion and scale, balance and unity.

How these principles apply to documents?

a) Emphasis with its seven attributes – location, size, contrast, distinctiveness, depth, movement and interesting content – allow a designer to channel users’ attention to the visual meaning of the composition.

Figure 1: An example of high and low contrast (Authored by a former student, 1998)

Figure 1: An example of high and low contrast (Authored by a former student, 1998)

b) Grouping the composition elements could be made through proximity and similarity because “grouping is essential for establishing logical relationship among elements on the page” (ibid).

c) Subordination or hierarchy enables a viewer to immediately discover the composition theme. It is directly connected to grouping and emphasis. Subordination should not be treated similarly to emphasis as Farkas and Farkas (2002, p.260) point out:

Note that subordination is not identical to emphasis. In a drawing of a bouquet of roses, one rose might be shown catching the direct rays of the sun. This rose has been given visual emphasis over the rest of the roses, but the other roses are not logically subordinated to this rose.

d) Simplicity adds more visual charm to any composition, and in terms of Web design, it pleases users, because it requires less effort from their side to absorb the information. For example, simplicity could be accomplished by using a small number of graphical elements with similar size, shape and colours, all unified into a coherent compositional space.

e) Proportion is the harmonious and proper relationship between the dimension and size of the compositional elements.

f) Balance is a state of equilibrium expressed in the weight and the value of the composition elements. Value enables designers to create the illusion of three-dimensionality and is achieved by using colour tones. Like the other colour properties such as lightness, saturation, shades, and tints, tones are based on colour combinations.

Value does what line cannot do. It adds meaning to forms. Usually value works in combination with contrast (Figure 2 a & b).

Figure 2 a: An examples of using colours’ value to create the illusion of three-dimensionality (Authored by former student, 1998)

Figure 2 a: An examples of using colours’ value to create the illusion of three-dimensionality (Authored by former student, 1998)

A composition may balance its elements symmetrically or asymmetrically, depending on the designer’ choice. The first technique is more a traditional approach, while the second one is sustained by various solutions like achieving asymmetrical balance through the value and the place of the composition elements.

Figure 2 b: An examples of using colours’ value to create the illusion of three-dimensionality (Authored by former student, 1998)

Figure 2 b: An examples of using colours’ value to create the illusion of three-dimensionality (Authored by former student, 1998)

g) Unity is expressed by the relationship between elements. Any designer enables them to get to the viewer, from one area of the image to another. Unity is needed to show logical order within the composition.


A good Web composition has to prove a clear unity of text and images in order to convey the meaning that the designer aimed to, by applying the composition principles.

A Web composition meet its audience needs and expectation if:

  • the composition design and information structure serve the intended purpose, context and the audience of the document;
  • its organisational information unit is the screen and the connection between units is obvious through visible links;
  • its theme conveys a clear meaning;
  • its graphical elements enhance the text and vice versa;
  • it considers white spaces to relax users when reading;
  • it is simple and elegant: graphical elegance is often found in simplicity of design;
  • it is built on the Web-safe browser palette colour available on both Windows and Mac machines to avoid colour conflicts in the user browser;
  • its visual elements are optimised in size to be easily downloadable.

Generally speaking, a Web composition may substitute thousands of inefficient words when communicating a message. A visual composition on canvas or paper is born by using brush, knife and colours, while a Web composition results by combining images, texts, computer programming, music, video, animation to name a few.


Burnett R.E. (2003) Technical Communication, Harcourt Publishers
Dujardin F. and Green G. (2004) Perspectives on visual communication, Sheffield Hallam University
Dujardin F. and Williams N. (2002) Designing visual information, Sheffield Hallam University
Farkas D.K. and Farkas J.B. (2002) Principles of Web Design, Allyn and Bacon
Hackos J.T. and Stevens D.M. (1997) Standards for Online Communication: Publishing Information for the Internet, World Wide Web, Help System and Corporate Intranets, Wiley
Harrison C. (2003) Visual Social Semiotics: Understanding How Still Images Make Meaning, TC
Kostelnick C. and Roberts D.D. (1998) Designing Visual Language: Strategies for Professional Communicators, Allyn and Bacon
Kress G. and van Leeuwen T. (1996) Reading Images: The Grammar of Visual Design, Routledge

This entry was posted in Web and tagged , , , , , , , , , . Bookmark the permalink.

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s