The Visual Language

“Typography is what language looks like.”

1. Visual grammar
In order to analyze and discuss design in a meaningful way, we must first agree on a common framework, a common terminology. More specifically, we must accept a basic approach to design which allows us to classify its components and discuss them in a rational, concrete and objective manner, even if the discussion by nature is usually highly abstract.

For example, it is an absolute necessity to be able to relate to the rudimentary building blocks of design, say a shape or form, in a neutral and analytical way in order to have a constructive discussion about composition and visual arrangement. Exchanging subjective preferences for round vs. square shapes would not be particularly productive – we must be able to assess their properties and suitable uses without bias.

Perhaps the most established metaphor is to consider the principles of design as components of a language, in which the elements (shapes, colors, patterns, lines, etc) constitute the “vocabulary” of the language. These elements can then be organized into a “grammar” which governs their relationships (stability/instability, asymmetry/symmetry, soft/hard, straight/curved, dark/light, etc).

The theory of a visual language is not new: it was part of Johannes Itten´s foundation course at the Bauhaus school in the early 1920’s, and later became part of modern psychology through the so-called “Gestalt Theory”. It could even be argued that the concept borrowed from elements of taoism; early Chinese philosophy.

To exemplify how this theory was expressed, let´s compare two triangles: one with the base down and the tip facing upward, and the other balancing on the tip, with the base facing upwards. According to Gestalt Theory, we perceive the first triangle as stable, and the other as unstable. The two triangles can also be used to indicate direction, where the tips of each triangle indicate the directions up and down respectively.

Similarly, Gestalt Theory stipulates that we perceive a round shape as soft, warm and human (perhaps a visual association to an eye, a face, or even the shape of the sun), while a square shape is stable, static and perceived as mechanical. Sharp, jagged or diagonal shapes and lines are similarly considered to indicate danger and drama.

The statements on behalf of the properties of these shapes are intended to be neutral and normative, so as to allow for a more concrete discussion about and logical analysis of how and where to apply them.

While one can certainly assume a position of skepticism vis-à-vis these abstract principles, one should still be cognizant of how intrinsically embedded Gestalt Theory has become in visual artistic expression of the past 100 years. Our relationship to design is often subconscious, part of our modern cultural heritage, and thus also a part of how we relate to color and shape in a broader sense.

2. Contrast and balance
The theories on visual language, or the parts of Gestalt Theory that can be applied to contemporary graphic design, are perhaps a bit too complex to make full justice in a brief blog post such as this. Therefore, it may be preferable to take a more simplified approach in the form of a simple recommendation.

When working with graphic design, it may be useful to imagine your work as a process aimed at achieving an ideal compromise between two extremes: contrast and balance. The idea is for the designer to be working iteratively at adjusting the design so that it at the same time carries a measure of contrast, so as to be clear and interesting, while also having a sufficient degree of balance, so as to be pleasing and harmonious.

Too much contrast – for example in the size ratio between header and body text, the relationship between different colors or in the relationship between different textures – is generally perceptually disruptive and discordant. Unless this is the express ambition, working to reduce contrasts (i.e., reducing the difference between the sizes, colors or textures) to achieve a greater degree of balance between them would probably be preferable.

Too much balance, however, is not good either. If your elements are too equal, too similar, then the design becomes static, unengaging and unclear. For instance: a text, whose different levels of headers are too close in size and emphasis,  becomes very garbled and unstructured. A composition whose colors are too similar in hue will become flat and uninteresting. A magazine layout where columns are too similar in width and placement becomes repetitive and dull.

3. Cadence 
It may also be useful to think of design as an exercise in systematic repetition. After all, it is not always the case that graphic design is imbued in one single instant, in one inhalation. Quite often, the consumer of graphic design is taking in the contents of let´s say a web site or a brochure over an extended period of time, and is therefore exposed to the design over and over again, in a repetitive fashion, as time passes and he or she navigates through the content.

Therefore, consider the results of graphic design work as a visual sequence in which the elements are arranged in a certain graphic rhythm. Imagine, for example, a reader browsing through a magazine. Each new page he or she takes in represents a new pattern, where headlines, images, text and other graphic elements are repeated in an almost rhythmic fashion, with slight variations on a familiar theme.

A page consisting solely of large chunks of text is not particularly exciting, and not particularly rhythmic. On the other hand, a page with lots of similar, smaller graphic elements creates a stressful, staccato-like visual rhythm that is not particularly pleasant. A page with well diversified elements, in terms of size, placement and emphasis, creates a softly repetitive rhythm that can be both pleasant and interesting on the other hand – much like the rhythm of music, or the cadence of poetry.

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