Visual Architecture: The Rule of Three

In: Articles

By Carole Guevin

Published on April 9, 2001

Overview:

Visual architecture is applied to the new media design context and defined as the use of a particular method of building visual information and balancing communication between images and words.

Visual architecture is to be distinguished from the way that Occidental languages train our eyes to read from left to right and from other languages as well, like oriental and middle-eastern ones, which train the eye differently.

The object of this article is not to discuss language eye training, but to point to the more universal language between words and visual objects (picture, illustration, graph, area boxing, layout, titling) and can be extrapolated to advertising, print, TV, Flash development and CD-ROM productions.

Synonyms would be: generating visual attention, or interest, to information presented.

What is attention?

Some research results indicate that online, there is a 6 seconds (or less) pitch time to grab the attention of the audience! Because of this there is a downward trend towards reading all of the information available on a site (only your mom reads it all) and an upward trend toward rapid perception of symbols.

Because of these trends information acquisition has changed from a “read it all” activity to a “scan it all” activity.

There are indicators of lifestyle that support this idea. For example, the constant presence of television has left a heavy mark on the way we acquire and digest new information; television viewing is mostly a passive activity in which all information/messages are translated into images, sound and little text.

Recent generations have been trained to learn from digital interfaces (e.g. games, educational CD-ROMS), and display a high dependence on concept rather than core information for the acquisition of new knowledge – this is the “point-and-click generation.”

The TV generation and the point-and-click generation together constitute the better part of the Internet population, demographically speaking.

Efficient visual architecture will take into consideration the two poles of demographic profiles: it has to include passive/push information and active/stimulating information. These merge into the same pre-requisite: universal communication symbolism using a simple rule of three in order to captivate short attention span.

The Rule of Three

The Rule of Three is based on a triangular figure, but not just any triangular figure.

figure 1	figure 2

Figure 1 is static: x, y and z objects are equally distant. The first step of the rule of three is to create a dynamic interaction between objects.

Figure 2: z is moved slightly to the left and interaction between objects is improved.

figure 3

The second step in the application of the Rule of 3 is to use objects. Objects can be pictures, geometrical figures (columns), a one word text (title) or a block of text (content), illustration, etc. For the purposes of this exercise you need to see all these different parts of a layout as independent objects, since they occupy a unique place in the visual plane. Figure 3 shows the relationship between objects based on the dynamic triangle. The color, shape and form of objects amplifies this dynamism and create a more refined perception of message, such as “Psst! Don’t be blind, drink milk today!”

The third step is to apply the same absolute positioning to other objects of the layout. By absolute positioning – when playing with an object – you will see that sometimes, moving it around – one pixel this way or another – will break up the visual flow and structure. It is important to train your eyes to find this exact placement. One way to practice this – is from now on – when looking at advertising, TV or film sets, magazines layout, billboards, paintings, photography, illustration, sculptures and web sites – try to see if the composition is dynamic or static.

We are drawn to dynamically built structures. It’s called “visual appeal…” the same holds true when communicating with an audience.

Figures 4-7 applies the same triangular shape to all objects in layout.

figure 4

figure 5

figure 6

figure 7

Another example of this can be found in a painting: the visual architecture is always one-sided. Have a look, which one do you think is the original painting? Figure 8 or Figure 9?

figure 8	figure 9

The one-sided bias is due to the position of the piece’s light source. A painter needs to assign by default the position of the light source that will express the color and other qualities of the objects in the painting.

Figure 9 is the original painting. Look at Figure 8; the reflection of the woman is the first thing your eye sees but the eye gets lost, not knowing which feature to look at next. If you look at Figure 9, the first object you see is the chandelier – the source of light – your eyes goes naturally to the woman’s shoulder, surveys the dress and then captures the sight of the reflection in the back.

In Figure 8 the paintbrush strokes are diagonal and against the direction of the light source. This is why it conveys a confusing picture.

The final step is to use color to separate and enhance visual areas: the Rule of 3 is an almost universally applied rule to web design, unfortunately some with good results some with poor results. The poor results comes from not using the “eye-direction” technique.

figure 10

Figure 10 shows both a web and print “feel” which makes sense, because the Rule of Three applies to all visual media.

Conclusion

Visual architecture is a technique that demands constant refining – it’s a subtle art. Having added all objects to Figure 10, it is evident that the message is not “Psst! Don’t be blind, drink milk today!” Perhaps it is either a brochure or a website advertising the portfolio of photographers. After years of work in visual design – the constant learning curve is to feed my eyes to train my imagination. The mantra is “improve-improve-improve.”

See you in the lab!

---

Definitions

Visual: Of interest to the eyes, producing mental images, impression

Architecture: The art of, a particular method or style of design

---

Bulgarian translation

Related Topics: Web Design, Graphic Design, Information Architecture