The 7 Components Of Design

Before solving complex design problems you need to understand the basic components of design at your disposal. Much as a musician seeks to understand pitch and rhythm, melody and tempo, a designer should seek a greater understanding and control over:

Through learning these 7 components of design, the whole of your designs will become more than the sum of their elements and you’ll be better able to communicate your ideas.

I’ve written in greater detail about a few of these components and in the coming weeks I’ll write more detailed posts about the rest. Consider this post an introduction.

Also note that there are many ways one can break down and organize design principles. The 7 components described here are as organized by Alex White in The Elements of Graphic Design.

Unity

Unity exists when your design elements are in agreement; when they belong together and aren’t arbitrarily placed or added to the design. Agreement can be either visual, conceptual or both.

The 4 basic design principles of contrast, repetition, alignment, and proximity can be used to gain visual unity over your design. Elements that are aligned, repeat some basic characteristic like size, or are located in proximity to each other will appear to belong together. The last principle, contrast, is used to add variety.

Unity imparts order, but too much order can be dull and static. Variety adds interest, but too much can lead to a chaotic design. The key is to find a balance between unity and variety so as to have a well ordered design that is also visually interesting.

Elements can be conceptually unified by being about the same subject. An image of a steering wheel, a fuel pump, and a glove compartment are all unified around the concept of a car.

Gestalt

Gestalt is a German word for form and shape and here refers to the human mind’s ability to visually organize forms and shapes into a unified whole. When first looking at a design we see the whole instead of the parts. When someone says “this design works” it’s because gestalt is at play.

By controlling design elements and how each element affects those around it you affect the cumulative perception of the viewer. A small change in one element affects how the other elements in your design are perceived. This cumulative perception is gestalt.

We can manipulate gestalt through the same 4 basic principles mentioned above as well as through:

figure/ground – the relationship of a subject to its surrounding space
closure – the viewer’s tendency to complete unfished forms
continuation – the arrangement of elements to lead the eye across the page and create flow in your design

Gestalt helps communicate your message through the cumulative perception of all your design elements.

Andy Rutledge has written a great series of posts on Gestalt principles which I encourage you to read

Space

Whitespace or negative space is the space between design elements. It’s just as, if not more, important than the space you fill and is one of the most neglected components of visual design.

Day only exists in comparison to night and in much the same way your positive space (where design elements are located) only exist in comparison to the empty space around them. Without whitespace, designs become crowded and chaotic. There’s no flow of movement from one element to the next.

Space is the context in which your message is perceived. Without ample space communication is difficult. Imagine a piece of music where every note in the piece was played by every instrument at the same time. The result would be noise and not music. Music needs space (time) between notes in order to build rhythm and melody. Visual design needs space between elements in order to effectively communicate.

Dominance

Dominance is contrast taken to the extreme. By creating one element to dominate other elements on the page, you create an area of interest and a focal point to your design. Dominance gives viewers a way into your design. It lets them know right away where to look and from there you can guide them through the rest of your design.

Without dominance your visitors have to think about where to look first. Don’t make me think. Make it clear where I’m to look first. Give me an easy way to enter your design and begin to look about.

You can create dominance through manipulation of:

size
position
color
style
shape

You can have more than one area of interest in your design, though one should be dominant. One should be the primary area of interest and be dominant over everything else.

Hierarchy

While one element should be dominant you can create a hierarchy of dominance in order to guide people through your design. By creating a visual hierarchy in your design, you enable your page to be scanned and communicate the relative importance of different parts of the whole.

Which of the two layouts above is easier to read? The one without a clear hierarchy on the left or the one with a hierarchy on the right?

Once again the basic design principles help us create a hierarchy and help us move the eye from most important to least important elements. Contrast to make clear what’s most important and repetition, alignment, and proximity to lead the viewer across a single level of hierarchy and into the next.

Try not to create too many levels of hierarchy. It’s easy to discern most and least, but what’s in between tends not to be so easy to distinctly separate. Aim for 3 levels of hierarchy if you can, most important, least important, and everything else.

Balance

Balance is a state of equalized tension. It’s important for achieving gestalt. A balanced design is a more unified design.

Designer’s use visual weight to control design balance. Through the use of things like size, color, space, and density your design elements can visually balance each other to create a pleasing whole.

There are 4 types of balance, 2 of which are more important.

Symmetrical – formal or static balance
Asymmetrical – dynamic balance
Radial – elements radiating from a central point
Mosaic – balanced chaos lacking hierarchy and focal point

Symmetrical and asymmetrical balance are the two more important types of balance, with asymmetrical balance being the more interesting of the two. Kandinsky’s Composition #8 below is a good example of asymmetrical balance and dominance.

The dark circle in the upper right is the dominant element that pulls you into the piece. Notice how there is no equally dominant object on the right side to balance it, but rather a combination of elements is used to balance the painting.

In a balanced design the whole is more than the sum of its parts. When a design is unbalanced some of the parts become more visible which leads to competing messages instead of a single unified message.

Color

Color aids organization through contrast and repetition. A good use of color in your design will help visitor comprehension of your overall message. Color provides direction as it relates elements to each other.

Random color choices negatively affect your message. A color scheme affects your message positively by helping achieve unity. You should plan for color early when creating a new design or your colors will end up being cosmetic and somewhat random.

Color theory defines classic color schemes as:

Monochomatic – different shades and tints of a single color
Analagous – colors adjacent on the color wheel
Complementary – colors at opposite ends of the color wheel
Split complementary – a main color and 2 addtional colors next to the complementary of the main color
Triadic – 3 colors equally spaced around the color wheel
Tetradic – 2 complimentary color pairs

Color evokes emotions. Psychology and cultural differences influence the way people react to and interpret color.

Darker colors are seen before lighter colors. Warmer colors move elements forward while cooler colors make elements recede into the background.

Summary

Whether you’re consciously aware of them or not, each of the above components will be present in your design.

You can choose how much or how little of any to include, but they will all be there to some degree no matter. Not being aware of them during design will lead to them being included haphazardly which might have negative consequences on your overall design.

As I mentioned at the start I’ve written more in depth about some of these 7 components in the past and over the next few weeks I’ll add more detailed posts about those I’ve yet to cover. This post is meant to serve as an introduction to each of those detailed posts, both written and yet to be written.