Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Improve Your Designs With The Principles Of Closure And Figure-Ground (Part 2)

Have you ever wondered how elements come together to create successful designs? It’s no accident that compelling design just seems to work. What most of these designs have in common is the use of gestalt grouping principles to organize information that helps us understand the relationships and differences between elements. As designers, we can use these principles to create our own engaging and successful work.

In the first part of this series1, we focused on the principles of similarity and proximity to understand how the gestalt principles work in creating relationships between elements. Next, we’ll focus on the principles of closure and figure-ground, which play with positive and negative space to build relationships and create wholes with the sum of their parts. As in the first article, we’ll look at how the principles work and then move on to real-world examples to illustrate them in use.

Further Reading on SmashingMag: Link2

Closure Link

According to Universal Principles of Design367, the Gestalt principle of closure states that we have a tendency to perceive a set of individual elements as a single, recognizable pattern, rather than multiple, individual parts. Using closure effectively decreases complexity by reducing elements to the fewest possible parts needed to complete an object. Provided with enough information, we will fill in the missing parts to create a whole. This is achieved through the use of positive and negative space.

In the example below, our minds complete the lines to form a circle, even though the shape doesn’t exist. Positive and negative space combine to form our perception of the circle.

Simple example of closure forming a circle

Closure can be used to make us perceive objects or patterns using the smallest amount of information. Our minds are so eager to fill in the missing information that it can be done with very few elements. However, if we don’t provide enough information to complete the pattern, then we cannot perceive the object and closure fails, making the circle much more difficult to form in our minds. Take a look and see if you can complete it in your mind. It’s a lot more difficult, isn’t it? We can’t quite put it together now with the sparse amount of information given.

Simple example of closure failing

Creating Effective Closure Link

The examples above are very basic illustrations of how we perceive patterns to form closure. In reality, there are many visual elements that we can use to help us form effective closure:

  • Positive and negative space
    As mentioned earlier, positive and negative space combine in closure to form a whole. This can be achieved by looking for the hidden forms in the negative space of a design or within type. Additionally, removing elements from the foreground can create interesting negative shapes, and in doing so, simplify a design.
  • Contrast
    Key to forming closure is creating a strong contrast between the foreground elements and background. As always, black and white creates the best contrast, but you can also experiment with complementary colors for strong contrast as well.
  • Color
    Color not only adds life to a design, it also can be used to reinforce relationships, especially if using abstract shapes to represent forms.

All closure uses many if not all of the above visual elements. Using these and experimenting with reduction in your designs will help you discover new forms. Let’s now take a look at closure in the real world and see how it all comes together.

Closure In Practice Link

Using closure, we can reduce the elements needed to convey visual information, reducing complexity and making designs more engaging. One of the more common uses of closure is in the design of company logos, precisely because closure can simplify a design to quickly convey a brand’s identity.

Seen below is the famous logo we recognize as the NBC peacock. In comparing the current logo (on the right) with the old logo, you can see that they’re not wildly different. But by reducing the elements and working with negative space, the current logo becomes much more simplified and elegant. Closure is successfully achieved using tightly grouped, positive shapes as feathers, with our perception of the peacock’s body formed through the use of the negative white space in the middle.

NBC logo8

Reducing elements and using negative space simplifies NBC’s current logo, at right. (View large version9)

Another well-recognized logo that employs closure successfully is from FedEx. In this logo, closure is achieved with negative white space, using the parts of the uppercase E and the lowercase x to form the familiar forward-moving arrow. The designer experimented with many designs, eventually pulling the letters closer and closer together until he saw the arrow forming between the e and x. This shows that experimenting with reduction in your designs, and looking for the spaces in between, can yield fantastic results. For the story behind the creation of the logo, check out Matthew May’s great article at Fast Company10. Can you see the arrow in the logo? You’ll never miss it from now on!

Fedex logo11

Negative space forms the forward-moving arrow in Fedex’s logo. (View large version12)

The examples above are well-known logos that use closure in somewhat obvious ways. However, there are less famous logos that use closure more subtly. For example, Houzz13 employs closure more conceptually. At first glance, the green, black and white shapes may resemble a shelf, part of a building, or wall pattern, suggesting what the website is about. But a closer look reveals something else as well. Our mind’s desire to fill in the spaces and complete patterns allows us to combine the separate shapes into a whole, forming an uppercase H in three-dimensional space.

Houzz logo14

Closure combines the shapes in the Houzz logo to form an H in three-dimensional space. (View large version15)

While closure is great for the creation of interesting logos, it can work in other ways as well. Websites can also use positive and negative space in the design of their interfaces to produce effective closure. Below, the Uncrate16 logo uses positive space against a black, negative background to form the letters of its logo and create the branding of the site. This is also a good example of figure-ground which we’ll get into shortly.

Uncrate website17

Uncrate uses closure to form the letters of its name. (View large version18)

Using Closure When Creating Icons Link

Icons are useful for when we need to convey a message or reinforce a concept within a small space. They need to be simple and stripped down to their basic elements to help people quickly understand their meaning. Closure works well in the creation of icons, utilizing positive and negative space to decrease complexity, while still suggesting shapes or objects that we perceive as wholes, as in these examples from the Noun Project’s website19.

Icons utilizing closure to form recognizable objects

Despite these icons being reduced to the barest of elements, we perceive the pieces as wholes and form familiar objects: a file drawer, a shop window and awning, stacked folders, and mail.

Abstract Closure Link

Closure can get quite abstract and still allow us to form recognizable patterns. One of my favorite uses of closure is in the Google doodle20. Google employs closure often in its doodles, relying on our inherent need to fill in the missing information to create a whole object. Google doodles depend on our familiarity with the Google logo which allows us to read the image below despite containing very abstract shapes. Here, color helps to reinforce the relationship between each letter of Google’s logo as well.

Google doodle for the 2015 FIFA Women’s World Cup21

Familiarity with the Google logo (at top) allows us to form the logo in our minds, despite being very abstract, as in this doodle for the 2015 FIFA Women’s World Cup. (View large version22)

As you can see, using positive and negative space creatively, and reducing elements in our designs, we can create some really interesting designs with closure. We can take advantage of the need to fill in the missing parts to decrease complexity and simplify our designs. Next, we’ll take a look at how we can use positive and negative space to create good figure-ground relationships.

Figure-Ground Link

What is the principle of figure-ground? According to Universal Principles of Design, figure-ground is the state in which we perceive elements as either the objects of focus or the background. Like closure, figure-ground works through the use of positive and negative space. Figure-ground exists in practically everything we visually perceive, whether a scene, a composition, a website, a logo or an icon.

Figure-ground is stable when objects are distinguishable from the background and the background holds no interest. Stable figure-ground provides a setting for objects and allows us to focus attention where we want it. For example, we perceive the image below as a circle on a background. The circle is the focus and holds our attention while the background is of little interest. This example exhibits strong figure-ground stability as the figure has shape and is perceived to be in front, while the background is shapeless, continuing behind the figure at a further depth.

Simple example of stable figure-ground

When figure-ground is not stable, as in the example below, perceptual ambiguity is introduced and the relationships between elements become unclear. In this deliberately oversimplified example, the figure and ground are reversible, causing us to alternate between seeing one item and then the other as the figure and then the ground.

Simple example of unstable figure-ground

However, ambiguity isn’t necessarily a bad thing. This lack of stability can be used to our advantage when designing. Purposefully destabilizing the figure-ground relationship can introduce discord or tension, adding excitement and interest to our designs. One of my favorite uses of this tension in figure-ground is in the Criminal Underworld poster series by Simon C. Page23. Here, Page deliberately destabilizes figure and ground, pitting the principle against itself as figure and ground battle it out for our attention, much like the hero and villain in the poster battle against one another.

Criminal Underworld posters of Batman versus Penguin and Spiderman versus Green Goblin24

Notice how figure and ground shift depending on which hero or villain you focus on. (View large version25)

Creating Good Figure-Ground Relationships Link

There are many visual elements that we can use to reinforce the figure-ground relationship in our designs. Using these elements can help us focus attention where we want it, assisting in the memorability of a website or other design:

  • Contrast
    White or black, paired with color, as seen in the Criminal Underworld posters, creates very strong contrast. Likewise, complementary colors are excellent for creating contrast. If pure colors are too intense, alter the value (how dark or light the color is) to create more effective contrast.
  • Color
    Warm colors, such as yellows, oranges and reds, are perceived as approaching and can be used to strengthen figure. Cool colors, such as purples, blues and greens, are perceived as receding and can be used to strengthen ground.
  • Size
    When a large element fills the majority of the ground, it will be perceived as the figure. Conversely, a small element within a large ground will be perceived as the figure.
  • Position
    Elements positioned in lower areas will be perceived as figure while elements positioned in upper areas will be perceived as ground. This plays with our perception of distance, as we perceive objects positioned in lower areas to be closer to us and objects positioned in upper areas to be farther away.
  • Focus
    Elements that are in focus will be perceived as figure while elements that are out of focus, blurred, faded, or tinted, will be perceived as ground.

Most good figure-ground relationships are created with a combination of many of these visual elements. Next, let’s take a look at some real-world examples and see how these elements work together to create successful figure-ground.

Figure-Ground In Practice Link

The example of figure-ground in the Criminal Underworld poster series above shows the principle in an unstable state, where figure and ground battle each other for attention. Unstable figure-ground works well when there are few elements and the design is simple. However, this may not necessarily be the desired use of the principle when we’re designing websites, although that depends on the content and context of the website. Websites need to convey complex information and still be clear and usable. With stable figure-ground, we can guide attention where we want it and avoid any ambiguity of the message we’re trying to communicate.

Take a look at the example below from the Apple Music website26. Most likely, your eye is drawn to the image of the smartphone, which, along with the copy to the left of it, are the figure elements. While the background begins to fight for our attention, the figure elements are enhanced through the use of multiple visual elements. First, figure is strengthened through large copy and the large size of the smartphone. Positioning the smartphone at the bottom of the screen also assists in bringing figure forward. The figure is further enhanced by tinting back the video animation in the background, causing ground to recede. Finally, contrast between the bright screen and the dark background provide good separation between figure and ground.

Apple Music website27

A good figure-ground relationship is created using multiple visual elements. (View large version28)

In the next example, from Naya’s website29, the size of figure is the strongest visual element used to create good figure-ground. Here, we perceive the woman (and her very large hat!) as figure as she fills the majority of the ground. Furthermore, the use of a cool color in the background, as well as clever use of overlapping elements, assists in helping the background recede. Finally, like the Apple Music example, there is good contrast separating the foreground from the background.

Naya website30

The Naya website makes use of a large figure to create a good figure-ground relationship. (View large version31)

Finally, excellent contrast between figure and ground is the strength of R/m Design School’s website32. Here, the menu exhibits strong contrast, using bright color and black to separate figure from ground. In addition, warm color is used to strengthen the perception of the figure coming towards us. Don’t you just want to reach out and grab those red tiles!

Readymag Design School website33

The R/m Design School website employs strong contrast to create good figure-ground. (View large version34)

Conclusion Link

Understanding how to use closure and figure-ground will help you build strong relationships and differences between elements in your designs. Look at the negative space just as much as the positive space to discover interesting forms. Play around with removing elements in the foreground and use the negative space to form shapes instead. Finally, mix visual elements such as contrast, color, size, position and focus to create both stable and unstable figure-ground relationships.

Now that you know how to use these two principles in your work, go forth and create your own engaging and successful designs!

Resources And Good Reads Link

(ml, da, og, jb, il)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2016/05/improve-your-designs-with-principles-similarity-proximity-part-1/
  2. 2 https://www.smashingmagazine.com/2016/05/improve-your-designs-with-principles-similarity-proximity-part-1/#further-reading-on-smashingmag
  3. 3 https://www.smashingmagazine.com/2014/03/design-principles-visual-perception-and-the-principles-of-gestalt/
  4. 4 https://www.smashingmagazine.com/2014/09/design-principles-connecting-and-separating-elements-through-contrast-and-similarity/
  5. 5 https://www.smashingmagazine.com/2015/06/design-principles-compositional-balance-symmetry-asymmetry/
  6. 6 https://www.smashingmagazine.com/2014/08/improve-your-email-workflow-with-modular-design/
  7. 7 https://books.google.com/books?id=l0QPECGQySYC
  8. 8 /wp-content/uploads/2016/01/03-closure-NBC-logo-large-opt.png
  9. 9 /wp-content/uploads/2016/01/03-closure-NBC-logo-large-opt.png
  10. 10 http://www.fastcodesign.com/1671067/the-story-behind-the-famous-fedex-logo-and-why-it-works
  11. 11 /wp-content/uploads/2016/01/04-closure-fedex-logo-large-opt.png
  12. 12 /wp-content/uploads/2016/01/04-closure-fedex-logo-large-opt.png
  13. 13 http://www.houzz.com/
  14. 14 /wp-content/uploads/2016/01/05-closure_houzz_large-opt.png
  15. 15 /wp-content/uploads/2016/01/05-closure_houzz_large-opt.png
  16. 16 http://uncrate.com/
  17. 17 /wp-content/uploads/2016/01/06-closure-uncrate-large-opt.png
  18. 18 /wp-content/uploads/2016/01/06-closure-uncrate-large-opt.png
  19. 19 https://thenounproject.com/
  20. 20 https://www.google.com/doodles/
  21. 21 /wp-content/uploads/2016/01/08-closure-google-large-opt.png
  22. 22 /wp-content/uploads/2016/01/08-closure-google-large-opt.png
  23. 23 http://blog.excites.co.uk/
  24. 24 /wp-content/uploads/2016/01/11-figure-ground-hero-villain-large-opt.png
  25. 25 /wp-content/uploads/2016/01/11-figure-ground-hero-villain-large-opt.png
  26. 26 http://www.apple.com/music/
  27. 27 /wp-content/uploads/2016/01/12-figure-ground-apple-music-large-opt.png
  28. 28 /wp-content/uploads/2016/01/12-figure-ground-apple-music-large-opt.png
  29. 29 http://naya.com/us/
  30. 30 /wp-content/uploads/2016/01/13-figure-ground-naya-large-opt.png
  31. 31 /wp-content/uploads/2016/01/13-figure-ground-naya-large-opt.png
  32. 32 http://school.readymag.com/
  33. 33 /wp-content/uploads/2016/01/14-figure-ground-readymag-large-opt.png
  34. 34 /wp-content/uploads/2016/01/14-figure-ground-readymag-large-opt.png
  35. 35 http://www.scholarpedia.org/article/Gestalt_principles
  36. 36 https://books.google.com/books?id=l0QPECGQySYC
  37. 37 https://books.google.com/books/about/Information_Visualization.html?id=UpYCSS6snnAC

↑ Back to top Tweet itShare on Facebook

Jon was a visual designer for many years before making the leap to interaction design. He has a master's degree in Human-Computer Interaction from DePaul University and lives and works in Chicago. You can follow him on Twitter at @jonhensley.

  1. 1

    Very interesting facts!

    1

↑ Back to top