Why traditional compositional elements matter on the Web?

In art theory, a visual composition is made of elements which are distributed harmoniously into a whole. These compositional elements could be lines, points, forms, shapes and colours. A designer uses them as tools to communicate something, be it emotions, feelings, experiences and anything else. A designer could make these elements carry a number of aesthetical functions such as contrast, rhythm, harmony, proportion and equilibrium. If one or more of the aesthetical functions lack, the composition unity might be lost or unclear.

There are open and closed compositions. An opened composition tells its story from the centre to outside of its visual physical space. It enables a viewer to imagine what’s next. A closed composition is meant to focus the viewer’s eye from its margins to the centre.

Why the compositional elements – lines, points, forms, shapes and colours – determine the aesthetical functions of a composition? It’s hard to describe it, but I will try to do it in my own words.

1. Lines and points

A point is defined as the shortest possible line. Line and point are the basic compositional elements. To create a space a designer places shapes and forms, which result from combining lines.

Figure 1: An example of a decorative composition based on the effect of the point (Authored by Otilia, former student, 1998)

Figure 1: An example of a decorative composition based on the effect of the point (Authored by Otilia, former student, 1998)

2. Forms

A form is a shape with dimension. It generates emphasis when it varies in size, creates rhythm when is repeated and creates balance when it varies in position. Usually a form is built on an existing line, so both line and form are interconnected.

3. Colour

Colour holds a more personal meaning than the other compositional elements. People often have favourite colours, but rarely favourite lines. This might explain the deep emotional involvement of a designer within the composition. The natural relationship between colours is defined in the Colour Wheel (Figure 2), which is a traditional visual representation of how colours talk to each other.

The Colour Wheel displays the colours on three levels:

  • primary colours are placed in the middle and they cannot be made by combining other colours. They are: red, yellow and blue.
  • secondary colours are made by mixing two neighbouring primary colours. They are orange (yellow and red), green (yellow and blue) and purple (red and blue).
  • tertiary colours are combinations of a primary and an neighbouring secondary colour. They surround the primary and secondary colours in the wheel. 
Figure 2: The Colour Wheel

Figure 2: The Colour Wheel

4. Complementary colours

The complementary colours result from combining a primary and a secondary colour according to their position on the Colour Wheel, where they stand opposite to each other. There are three pairs of complementary colours: red and green, yellow and purple, blue and orange. When they are placed together as a pair they make each other more active on one hand. On the other hand, they may “cry” or “scream” together. That happens because they may generate some perception problems as the cones and rods of our eyes cannot handle so much information given by their wavelengths.

Figure 3: An example of a decorative composition, which features a pair of complementary colours: yellow and purple (Authored by Maria, former student, 1998)

Figure 3: An example of a decorative composition, which features a pair of complementary colours: yellow and purple (Authored by Maria, former student, 1998)

5. Warm and cool colours

From the perspective of moods and feelings they convey, colours are warm and cool. The warm colours are red, yellow, orange and they come from the sun. The cool colours are blue, green and purple and they come from water.

In document design the physical aspect of colours serves to catch users’ attention and this may deeply influence users’ perception of a document structure. Referring to colours in document design Burnett (2001, p.282) states that there are “functional colours”, colours that enhance visuals which “can be an extraordinarily powerful tool to help writers create more effective visuals”. In addition, Burnett says that “whenever colour is used in technical documents, it should be an integral part of the information that readers need”. She suggests document designers to:

  • avoid using decorative colour in excess, which is a contradiction in the technical communication context as colour should contribute to the functionality of a document;
  • avoid too many colours, which may irritate, insult or disturb users to perceive the real communication meaning;
  • consider colours meaning in different cultures when designing documents which address an international audience; for example red in Ivory Coast signifies mourning while in Western culture red symbolises optimism and dynamism.

(Adapted from Burnett, 2001, p.282)

6. Colour perception on the Web

On the Web the use of colours get different meanings. For example red is associated to energy and power. It is very visible and symbolises courage. Yellow encourages mental activity and creates a warming effect. Blue and dark blue are associated to wisdom, authority, integrity, and seriousness. White suggests simplicity and reminds users the paper support when reading from a screen.

Microsoft published a study on colours and their common perceptions in Western culture. According to this study, colours may trigger both positive and negative responses, in terms of perceptions:

Table 1: Colour responses (Source: Microsoft)

Table 1: Colour responses (Source: Microsoft)

I came across the colours and their basic meanings in my primary school years. Later on I found out more and, with care, I conveyed everything I knew to my primary and secondary students while teaching art.

I have tried to apply these principles when designing webpages and I think I managed despite certain stumbling blocks.


Burnett R.E. (2003) Technical Communication, Harcourt Publishers

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:

WordPress.com Logo

You are commenting using your WordPress.com 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