Visual weight

Read time: 2 min

Be careful of how elements in your design  are perceived as a whole.

What is  it?

It's a mailing advertisement for the restaurant chain Costa Vida.


Why  is  it bad?

The advert attempts to get the viewer to download the app. It even promises to give them a bonus of a $4 reward for doing so. But there is a slight problem with the way this flier has been designed graphically.

At first glance users may interpret this offer much differently. What if I said that some users would think that the app actually    costs   the downloader $4?

How is this possible?

Well there are certain principles at play here, which we'll go into later, but first lets try a simple test. Designers call this the blur test. You simply blur the image and evaluate the design (you can even just blur your eyes for the same effect).


Are you starting to see why this design might be problematic?

When a viewer gives this a quick first glance all they may see is:  DOWNLOAD THE APP $4"

Why does this happen?

There are a few principles at work here.

One is the Law of Pragnanz. Which states "People will perceive and interpret ambiguous or complex images as the simplest form possible, because it is the interpretation that requires the least cognitive effort of us."

Because the "get" part of the text is vertical and a different font, it requires our brains to do more cognitive processing than    if the font were horizontal and the same style. Therefore quick glances can easily be mistaken.

Both of these elements (orientation and font style) also strongly enforce the effects of the Law of Similarity in the same ways mentioned above.

And finally, and possibly most importantly, the "get" in the ad does not hold enough visual weight. Visual weight is Graphic Design 101. Basically a design should make vital elements very obvious and "heavy". They shouldn't be able to be missed.  For tips on how to add visual weight check out this article.


If an element   is   vital to the design, it should have sufficient visual weight so as not to be missed.

How could it be improved?

So where does this leave us? Some of you may be asking how do we get fresh and creative designs then if we can't use font or orientation variations? There's nothing wrong with creativity in designs. Use different fonts, orientations, colors, etc to your heart's content. But do so with the rule in hand that anything you do must not interrupt the primary objective of the design.


The problem in this case is the word "get" was vital to the design. It was the sole differentiator  between a viewer thinking the app gave them $4 and it costing them $4; two very different value propositions. Therefore that element needs to have equal-to or greater-than weight than the surrounding elements.

The designer could have done something as simple as a blur test to see that their design could be misinterpreted.