Working with Visual Weight in Your Designs

Feb 3 2011 by Kayla Knight | 19 Comments

In design, visual weight is the notion that design elements have varied weights; that is, some objects, even on a two-dimensional medium, can appear to be heavier than others. Visual weight is a powerful concept that allows us to create visual hierarchy, symmetry, balance, and harmony in designs. When applied strategically, the concept of visual weight can help us guide the viewer’s attention to the places we want in a design. This article covers the concept of visual weight and the factors that affect it.

What Is Visual Weight?

Visual weight revolves around the idea that distinct elements in a design have varying heaviness relative to each other. Sometimes visual weight is obvious, such as in the case where larger objects appear heavier than smaller objects because they take up more space. In certain instances, it’s not so cut and dry, such as in the case of color. Some colors may look as if they are heavier and more dominant than others. For example, on a white background, compare pure black to a light baby blue color: instinctively, which one to you appears visually heavier?

The main visual weight factors we will discuss are:

  • Color
  • Contrast
  • Lightness/darkness
  • Size
  • Density
  • Complexity

Visual weight is heavily tied to symmetry. To accomplish symmetry and balance in designs, we’ll want to make objects appear equal in visual weight.

To draw attention to certain objects (or to deemphasize others) we’ll want to purposely throw off the balance and create a visual hierarchy so that the focus shifts in the areas we intend.

Let’s now go over some of the main factors that affect visual weight.

Color

Color is a big part of design, and even in plain black, white, or gray designs, the lack of color makes a statement in itself. Color has many properties that can affect an object’s visual weight relative to others in the design, such as saturation, brightness/darkness, and hue.

Most of what we can intuit about the weight of color is true; it seems instinctive to know that one color is heavier than the other. For example, more saturated colors will garner more attention than unsaturated colors. Darker colors also take more of a stance than their lighter counterparts on light-colored backgrounds.

Hue is a color property that psychologists are only recently beginning to realize to have differing visual weights. Even with full saturation and equal lightness, two colors, such as red and blue (shown in the image above), can appear to have different visual weights. Red and blue, however, according to studies discussed in the article Does Red Weigh More Than Blue, are very close in visual weight, and studies have varied as to which is actually heavier.

Yet, aside from hue, there are several color properties that are far more obvious in terms of their effects on visual weight. For example, red is heavier and will draw more attention than yellow or orange with low saturation. In the example below, we can see how we could balance visual weight of elements by using other factors such as visual complexity and size. The red heart shape on the left carries a lot more weight because it’s bigger and its color is more vibrant. To attempt to balance the piece, we can place several objects to create an area that has more visual complexity.

Here are some colors that are generally regarded to have varying visual weights, arranged from heaviest to lightest:

  1. Red (heaviest)
  2. Blue
  3. Green
  4. Orange
  5. Yellow (lightest)

Contrast

Contrast is a big part of design, and can help certain features stand out more than others. Elements with more contrast between it and its background will be more prominent than those with little contrast to its background color. Using contrast can maintain visual hierarchy and readability.

In the example below, we can see that the left side is more prominent/heavier than the right because it has a higher foreground/background contrast.

To create visual balance and make both sides equal to each other in terms of weight, we could use other factors such as color, size, complexity, and so forth.

Lightness/Darkness

Darker colors carry a lot more weight than lighter ones. Lightness and darkness are powerful tools for balancing designs.

Psychologists aren’t sure why we see darker colors as heavier. In one study, they found that many people found an image to be more natural when the darker shade was at the bottom. The instinct that heavier objects should be at the bottom and lighter ones at the top mimics that of the physical world where gravity pulls heavier objects to the bottom.

Size

Size is an evident visual weight factor because, in the physical world, an object that’s bigger than another (if they are the same type of object) will naturally be heavier and will take up more physical space.

What can you do to balance the visual weight in the instance of size? You could counter-balance a larger design element with several smaller ones or give the smaller element a heavier color and/or contrast, for example. If an object is should be a primary focal point in the design, then making it larger is good. This is why we often see oversized call-to-action buttons that are larger than their surrounding elements; they are attempts to drawing the user’s attention for the purpose of increasing conversion rates.

Proportion and Density

In the physical world, denser (or more compact) objects are heavier than less dense, more dispersed objects. We can achieve this concept in graphical representations by using less whitespace between objects.

Note that while excess whitespace within a set of objects can make the area appear lighter in terms of visual weight, having a lot of whitespace around it still draws attention because of contrast around its location.

Complexity

More complex shapes or patterns seem heavier visually when compared to plainer shapes. A simple object, like the one on the right in the image below, can be taken in and understood almost instantly, while the element to its left takes more time to process. And because an element takes more time to process, we must look at it longer and, thus, it occupies more of our attention.

In design, visual complexity can come from surface texture, photographic images, and repeating patterns.

Summary

Visual weight is a concept that heavily relies on the designer’s instincts. It is affected by what we’re exposed to in the physical world where weight is expressed in size and density and where color evokes certain emotional responses (often due to cultural factors). Attaining visual hierarchy, symmetry, and design harmony relies on how we utilize visual weight factors in concert with each other.

Related Content

About the Author

Kayla Knight is a web designer and web developer who loves coding way too much for her own good. She does freelance design/development work and helps run the XHTML Shop. Connect with her by visiting her website and following her on Twitter @ KaylaMaeKnight.

19 Comments

Tim

February 3rd, 2011

Nice article, thanks.

One mistake in the text though

CONTRAST ยป
In the example below, we can see that the left side is more prominent/heavier than the left because it has a higher foreground/background contrast.

You mean right instead of left in the second part of the sentence.

Omar Vargas

February 3rd, 2011

Awesome early morning brain “ice breaker” thanks for the insight :-D

Jacob Gube

February 3rd, 2011

@Tim: Thanks. I’ve updated the post, nice catch.

Pam

February 3rd, 2011

Love how you covered not only one aspect but many many of the bits and pieces that put it all together. Quite often the technical aspects of design are overlooked, and “boring”. Thanks for putting life into it and making this engaging!

Anthony Wong

February 3rd, 2011

Great article! :)

it helped me a lot to understand the color differences, oh
i’ve book marked this page. :)

Michael Tuck

February 3rd, 2011

Well-written conceptual primer. Color is one of my big stumbling blocks, and this helped me get a better handle on some basic concepts. Nice job.

Melanie

February 4th, 2011

Good post. These points are also known as “Gestalt principles,” for those looking to know more, or to find additional suggestions.

Paul Olyslager

February 4th, 2011

Hi Kayla, have to say that I really enjoyed this post. A lot of useful tips in the article on general design principles. I recently wrote an aricle myself about psychology of colors and linked it with call-to-action buttons. Maybe you’ll like it as well.

Narjas Mehdi

February 4th, 2011

Thanks for your generous thoughts there. Great to find a useful ‘know-how’ article that’s quick to read, yet engaging and interesting enough to be memorable and give us readers the ‘aha’ factor. Lovely stuff. Am following you on Twitter, definitely.

Manav Dhiman

February 4th, 2011

Nice article post there, Kayla! Good read and a lot of information that I needed, thanks! :)

Michael Gunner

February 4th, 2011

There’s not much here that touches on Gestalt principles, e.g. contrast, size, complexity are not Gestalt principles (although, Simplicity is), examples of Gestalt principles would be Reification, Multi-Stability, Closure, Figure etc.

However…a good web designer would do well to read up on Gestalt. It’s quite drawn out though, I studied it at University and may be overkill for your average designer.

Still, some good points!

Barry

February 4th, 2011

I’m getting my art classes online. I love this article. Thank you

dotjinks

February 5th, 2011

“Kayla Knight is a web designer and web developer who loves coding way too much for her own good!” I liked this by-line as much as the article. Thanks for writing!

Burhanuddin

February 5th, 2011

<3
Its simple to understand and follow it, nice tips :)

Michael

February 8th, 2011

Great article! Opened me up a bit and made me easier understand the importance of weight in design.

Marat

February 8th, 2011

Awesome article, well understandable one.

Maicon Sobczak

February 10th, 2011

Great article Kayla. The examples helped to understand easily the concepts. I liked the heart because I’ve seen designs with this balance.

Kristine

February 13th, 2011

Always nice to weigh in on the concept of “color weight” in design. Informative article and a good reference for later!

Nag

October 6th, 2012

Nice post Kayla, very helpfull for understanding the basics of visual design that we neglect most of the time.

Leave a Comment

Subscribe to the comments on this article.