Principles of Visual Design: Designing for Coherence

There is an old wise saying, made by an old wise fellow, to the effect that “The whole of an object is greater than the sum of its parts.” This statement is mathematically inaccurate, as any living thing with the faintest sense of arithmetic would tell you. But in matters of human visual perception, however, it holds perfect truth.

Humans are programmed to look for patterns, to seek the comforts of familiarity, to group objects together to make some sort of coherent whole, even before they begin to recognize the individual elements that make up that whole. When you see a tree, for instance, your first realization is the tree as an entity, before you begin to observe the leaves, branches and perhaps fruit that make up the tree and how they are so perfectly arranged.

Most people would not care to observe the intricacies of how leaves are attached to branches, which are attached to the tree stem, which is attached to the root, which goes into the ground, and neither should they. Life is too short to spend all of that hard-won free time playing with trees.

And herein, fellow designers, herein lies the importance of coherence in visual design. How do we design in such a way that the little elements, as well as the big picture, make pleasant, coherent sense to the user?

The Little Elements — Our Leaves and Branches

The elements of design, which by analogy are the little leaves and branches that make up our great tree are line, shape, form, color, value, texture and space.

Lines, of course, are markings on a surface, and they may be vertical, horizontal, diagonal, dashed, crooked, and many other adjectives with which they can be described.

Shapes refer to the external outline of objects, and they may be circular, triangular, rectangular and many other common patterns.

Form is all about the visible way shapes are displayed and recognized, for example 2-dimensional, 3-dimensional, and then 4- or 5-dimensional if you’re high on drugs or an alien.

Color does not need to be defined. Examples include green, red, blue, yellow, and a host of others.

Value talks about the lightness or darkness of color. A shade is a darker representation of a particular color and a tint is its lighter counterpart, so that 50 shades of Grey is an art movie that educates us on the many darker representations of the color Grey!

Texture refers to the feel, and sometimes the look, of an object. It may be thick, rough, sticky, smooth, etc.

Space Refers to the “empty” areas around, between or within objects, images, or texts.

With the basics out of the way, the more important question becomes how do we arrange these leaves and branches to form a design tree?

The Big Principles— Arranging Our Leaves and Branches

The principles that guide how the elements of design can be used include, but may not be limited to, pattern, contrast, emphasis, balance, movement and the special one — harmony.

Brown Leaf

Pattern is a regular and predictable arrangement of alternated or repeated design elements, which may be individual elements such as lines and colors or complete objects.

Observe the leaf above closely. Does anything stand out? Do you see the repeating V’s that start from both ends and come together at the middle along the spine? That is a good example of patterns in nature.

One good reason to think about using patterns in design is that, as stated earlier, people subconsciously tend to seek them out. Easily recognizable patterns promote familiarity, which in turn lead to a better, albeit not always obvious, appreciation of the design.

Contrast is created by the juxtaposition of different elements of design, that is color, texture, line, shape, etc. There could also be contrast when elements are represented different ways, such as a bold line and a dashed line, a big circle and a small one, texts in different sizes and typefaces…As a matter of fact, as long as there is an observable difference, there is contrast!

You are able to make out the shape of the leaf in the picture above, for example, because of the contrast in shape and color between the background and the leaf. You are also able to make out the V patterns because of the contrast in color and direction of the leaf and its veins. This shows the importance of contrast in visual design.

Contrast is also necessary because it serves as a means of grouping elements according to their level of importance and thus directing the observer, or reader, on where to focus their attention at every given time.

Orange Tree

Emphasis is a way to draw special attention or focus to part(s) of a design. It can be achieved through size, placement, pattern, repetition, etc. In the orange tree picture, you can see how color, size, shape, contrast and placement are used to emphasize the fruit, so that it is the first thing that grabs your attention when you look at the picture.

Balance is achieved when the elements or objects in the design piece are aligned in symmetry or asymmetry, such that there appears to be some sort of visual equilibrium among them. Balance can be a way of grouping elements with equal importance together.

Movement and rhythm relates to the way elements are arranged on a design piece to guide the observer towards the elements of focus. This movement may be actual or illusory, or even only subconsciously observable.

Designing for Coherence — The Complete Tree

A special principle of design is harmony, which relates to the use of all of the elements and principles above to create a complete, coherent whole. The single essential question here is: What message are you trying to communicate with your design, and how best might you communicate that message without ambiguity? Wait, was that two questions? Never mind.

Once the message or goal of the design has been established, you want to make sure that the elements you choose and the principles you apply conform to the central theme and serves a specific purpose in furtherance of that goal.

True coherence, true unity, is achieved when a single element cannot be removed without distorting the overall appearance of the design. In other words, everything should serve a functional purpose and should achieve this purpose easily.

Creating perfectly coherent design may not always be a walk in the park, but with practice and commitment to learning, there is a good chance that we would get to that place where our designs leave our audience and users in a perfect state of kumbaya.

References

http://vanseodesign.com/web-design/visual-grammar-lines/

http://vanseodesign.com/web-design/design-unity/

http://desktoppub.about.com/od/contrast/ss/contrast.htm

http://www.sitepoint.com/principles-of-design-contrast/

http://www.slideshare.net/whitneyhess/design-principles-the-philosophy-of-ux

http://www.johnlovett.com/test.htm

http://www.smashingmagazine.com/2014/03/design-principles-visual-perception-and-the-principles-of-gestalt/

http://nwrain.net/~tersiisky/design/balance.html