Part TwoDesign Principles: Space And The Figure-Ground Relationship

Advertisement

If you see graphic design as a process of arranging shapes on a canvas, then you’re only seeing half of what you work with. The negative space1 of the canvas is just as important as the positive elements that we place on the canvas.

Design is an arrangement of both shapes and space. To work more effectively with space, you must first become aware of it and learn to see it — learn to see the shapes that space forms and how space communicates. This is second part of a series on design principles for beginners. The first part covered an introduction to gestalt2; the rest of the series (including this post) will build on those gestalt principles and show how many of the fundamental principles we work with as designers have their origin there.

The Figure-Ground Relationship

The gestalt principle that applies most to space is that of figure-ground. Everything in a design of yours will be seen as one or the other, and the relationship between them is mutually exclusive. Neither can be perceived except in relation to the other, and changing one is impossible without changing the other as well.

The figure-ground relationship3 is also complementary. Figure and ground can enhance or detract from each other, and organizing the two in relation to each other is one of the more important aspects of design. It sets a context for how your design communicates and how it will be interpreted.

“White space is to be regarded as an active element, not a passive background.”

— Jan Tschichold

Figure-Ground Relationship.
Figure-Ground Relationship. (Image credit: “Elements of Graphic Design4”, Alex White)

Consider the three panels in the image above. On the left, we see a series of black lines with an equal amount of white space between them. Together, the black lines and white space form a gray field, each contributing equally to the result. Removing the space (in the second panel) completely changes the field, rendering it as a solid-black shape. Not only is the space gone, but the individual elements have become a single element.

In the third panel, two of the black lines have been removed. This activates the space, making it appear to be sitting on top of the gray field. The ground has become the figure and adds more depth to the design.

Stable, reversible and ambiguous figure-ground relationships.
Stable, reversible and ambiguous figure-ground relationships.

There are three types of figure-ground relationships:

  • Stable (above left)
    It’s clear what’s figure and what’s ground. One or the other usually dominates the composition.
  • Reversible (above center)
    Both figure and ground attract the viewer’s attention equally. This creates tension, whereby either can overtake the other, leading to a dynamic design.
  • Ambiguous (above right)
    Elements can appear to be both figure and ground simultaneously. They form equally interesting shapes, and the viewer is left to find their own entry point into the composition.

Depending on which relationship you set up and how you balance both figure and ground, you direct the audience to look at different parts of the design and interpret what they see in different contexts.

Figure-ground is not the only gestalt principle in which space plays a prominent role. Two others are these:

  • Proximity
    Proximity uses space to connect and separate elements by enclosing some elements in space. An example we might take for granted is paragraphs of text on the page. The space between paragraphs is greater than the space between lines of text within a paragraph.
  • Closure
    This makes use of space as gaps between elements. Viewers fill in the gaps with their own information to complete a whole from the parts. Too much space and no closure occurs. Too little space and no closure is needed. Only the correct balance between space and filled-in space will activate the space and lead to closure.

Closure.
Closure.

Space As A Design Element

Think about music for a moment. If every note or chord were played at the same time, you wouldn’t have music. You’d have noise. Music occurs when sounds are contrasted against silence. Varying the pattern of sound and silence creates rhythm and melody. Without the silence, there is no music.

Space performs the same function visually. It gives positive elements room to breathe5. It gives the eye freedom to move through a design and to discover the elements it’s looking for. The positive is seen only in contrast with the negative. Without space, you don’t have design. You have visual noise.

Unless noise is what you’re trying to communicate, lean toward space. People are less likely to complain about too much space than about too little.

Space can do the following:

  • establish contrast, emphasis and hierarchy;
  • generate drama and tension;
  • provide visual rest between groups of elements.

As the figure-ground relationship implies, you have space only when something is present inside it. Prior to the addition of positive elements, space is undefined. The figure-ground relationship has to be established before space can exist and its communication begins.

One of the more important functions of space is to improve readability and legibility. Macro-space makes text more inviting. Micro-space makes it more legible.

  • Micro-space
    This is space within elements in a group. It’s the space between letters, words and paragraphs.
  • Macro-space
    This is space between major elements. It separate elements or groups of elements and provides avenues for the eye to follow and places to rest between elements.

Space correlates to quality. More space entails fewer elements or a rarity of elements. Compare high-end and discount retail stores. Which one typically has more space inside, and which one packs products into every bit of available space? What does the space communicate to you?

Space can also convey attributes other than quality, such as:

  • sophistication,
  • simplicity,
  • luxury,
  • cleanliness,
  • solitude,
  • openness.

You waste space when you fail to consider it. You can waste space by overfilling it. You can waste space by trapping it inside elements of a design and not allowing it to connect to other space in the design.

Design is ultimately an arrangement of shapes, and that includes the shapes formed by space. Don’t be afraid to use space. View it as an important design element under your control.

A Few Examples Of Space In Websites

To better use space, you first need to become consciously aware of it. Learn to recognize space in different designs. Notice the shape it forms, and think about what the space is communicating. To that end, let’s look at the design of some websites, taking notice of how space is used.

Old Guard

The design of Tom Johnson’s Old Guard86 uses plenty of white space, giving text and other elements room to breathe. There’s no mistaking what’s figure and what’s ground.

Old Guard uses plenty of white space, giving text and other elements room to breathe.7
Old Guard86 uses plenty of white space, giving text and other elements room to breathe. (Large version9)

Information is contained and separated by space (recall the principle of proximity), distinguishing groups of elements. You can easily tell where one post ends and the next begins, solely by the space between them.

The main content is slightly off center on the page, with generous space on either side. This space is occasionally interrupted by elements, activating both the space and the interrupting elements. This helps to draw attention to the area and especially the elements within.

Heroku’s Staus Page

The image below shows part of the status page for Heroku10 as being mostly space. I happened to catch the website on a particularly good day, because additional positive elements would mean more reported incidents on the platform. Here, more white space signifies better service.

Part of the status page for Heroku11
Part of the status page for Heroku12. (Large version13)

Notice how the white space doesn’t need to be white. While the page is overly generous with space, you’re unlikely to complain that there’s too much of it. Only important information — in this case, status updates and reports of incidents — interrupt the space.

Introducing the Novel

The space at the top of Introducing the Novel1614 is asymmetric and active. Notice how the large block of space on the left leads your eye directly to the content. If you click through to the website and scroll down from the top, you’ll see that space is also used to separate and group blocks of information.

The space at the top of Introducing the Novel is asymmetric and active.15
The space at the top of Introducing the Novel1614 is asymmetric and active. (Large version17)

Thin light lines are also used to group and separate these blocks. When viewing the website, notice how the lines don’t always touch, allowing the space to flow around them and connect to other space. This prevents the space from being trapped.

Elliot Jay Stocks

The website of Elliot Jay Stocks18 should be familiar to all of you, since he’s behind the design of this one. Asymmetrical space on Elliot’s website again leads to active space.

Asymmetrical space on Elliot’s website again leads to active space.19
Asymmetrical space on Elliot Jay Stock’s website20 leads to active space. (Large version21)

The large image at the top of this page could potentially stand as a temporary block to accessing the content below; however, a generous amount of space next to the image provides ample and inviting room for the eye to move around it. If the sidebar on the left had the same background color as the main content, then it would probably be easier for the eye to move around the image, but the change in color hardly makes it difficult.

As with the websites above, space is used to both enclose and separate groups of distinct information, allowing each group to stand out and allowing the eye to find what it wants and to rest in between.

Phil Coffman

The content on Phil Coffman’s website2322 forms a single shape that sits in mostly empty space. The absence of many positive elements increases the importance of those that are present.

08-phil-coffman
The content on Phil Coffman’s website2322 forms a single shape that sits in mostly empty space.

Even within the colored rectangular backgrounds, the text has enough space around it to be easily read and not to be mistaken for another category of text on the page.

The positive shape (and the shape of the space) adjusts responsively to different browser widths, but the pattern of a single large shape surrounded by space remains.

New Adventures in Web Design

Like many of the websites here, The 2013 website for the New Adventures in Web Design24 conference leaves generous room around elements. Distinct groups of information are contained by space, and the space is active throughout the design.

New Adventures leaves generous room around elements.25
New Adventures26 leaves generous room around elements. (Large version27)

Something interesting to note is the gray circular arrows between the image in the upper-left and the main content to the right.

Do these arrows block the flow of space? Because they don’t touch and because each is dashed where it interrupts the space, the space can flow through, although it’s clearly more restricted in that flow.

The lighter-gray color helps. It prevents the arrows from dominating, and it’s not hard to imagine the space flowing over the lines.

In fairness, if my browser was wider when I grabbed the screenshot, the arrows wouldn’t overlap with the main content. However, around 1280 pixels down to where the design becomes a single column, they do. Overall, it works, although I wonder whether the space would flow better without the arrows present.

A Few Examples Of Logos

I’ll leave you with some logos in which space is incorporated as an integral part of the design. Instead of pointing out the use of space in each, I’ll make a few general comments and then let you explore the spaces for yourself.

Notice how the logos below make use of the figure-ground relationship. With some, until you see both figure and ground, you don’t see the full logo. Both are necessary contributors to what is being communicated.

Several of these logos rely on the principle of closure. What you’re meant to see isn’t really there, but you see it nonetheless. A few of these logos also play around with figure and ground. What’s figure when you take in the whole logo against its background becomes ground for a smaller figure within. This reversible figure-ground relationship is central to what’s being communicated.

Various logos that make good use of white space.
Various logos that make good use of white space.

Summary

I hope you take away two main things from this post. First is the connection between the use of space in design and the gestalt principle of figure-ground. Gestalt principles underly much of what we do as designers.

Secondly, and perhaps more importantly, make an effort to spend time observing how space is used in design. Don’t let space be a byproduct of your positive elements. Learn to design space as much as, if not more than, positive elements. The layout of any page is ultimately an organization of space.

Consciously analyze that space, and deliberately use it to create a better design. Don’t allow it to be what’s left over. View it as an essential design element, and then view the relationship between space and positive elements as a design element that you shape.

Next time, we’ll add more gestalt principles to the mix and explore how focal points, continuation and common fate lead us into ideas such as visual weight and compositional balance.

(al, ml, il)

Footnotes

  1. 1 http://designfestival.com/a-solid-understanding-of-negative-space/
  2. 2 http://www.smashingmagazine.com/2014/03/28/design-principles-visual-perception-and-the-principles-of-gestalt/
  3. 3 http://www.andyrutledge.com/gestalt-principles-1-figure-ground-relationship.php
  4. 4 http://www.amazon.com/Elements-Graphic-Design-Second-Edition/dp/1581157622/
  5. 5 http://www.creativebloq.com/design/importance-whitespace-web-design-11125952
  6. 6 http://www.oldguard.co.uk/
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2014/04/04-old-guard.jpg
  8. 8 http://www.oldguard.co.uk/
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2014/04/04-old-guard.jpg
  10. 10 https://status.heroku.com/
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2014/04/05-heroku-status-broken-space.jpg
  12. 12 https://status.heroku.com/
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2014/04/05-heroku-status-broken-space.jpg
  14. 14 http://introducingthenovel.com/
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2014/04/06-introducing-the-novel.jpg
  16. 16 http://introducingthenovel.com/
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2014/04/06-introducing-the-novel.jpg
  18. 18 http://elliotjaystocks.com/
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2014/04/07-elliot-jay-stocks.jpg
  20. 20 http://elliotjaystocks.com/
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2014/04/07-elliot-jay-stocks.jpg
  22. 22 http://www.philcoffman.com/thoughts/home-again/
  23. 23 http://www.philcoffman.com/thoughts/home-again/
  24. 24 http://2013.newadventuresconf.com/
  25. 25 http://www.smashingmagazine.com/wp-content/uploads/2014/04/09-new-adventures.jpg
  26. 26 http://2013.newadventuresconf.com/
  27. 27 http://www.smashingmagazine.com/wp-content/uploads/2014/04/09-new-adventures.jpg
  28. 28 http://dribbble.com/shots/379029-Cloud-Bed
  29. 29 http://dribbble.com/shots/437870-Black-Cat-Lounge
  30. 30 http://dribbble.com/shots/221638-Shift-logo
  31. 31 http://dribbble.com/shots/305899-Dolphin-Seal-Logo-Designer
  32. 32 http://dribbble.com/shots/191197-Dental-Implants-Guide-Logo
  33. 33 http://dribbble.com/shots/224859-Wineforest

↑ Back to topShare on Twitter

Steven Bradley is the author of Design Fundamentals: Elements, Attributes, & Principles and CSS Animations and Transitions for the Modern Web. When not writing books he can be found writing for his blog at Vanseo Design or on his small business forum.

Advertising
  1. 1

    Daniel Schwarz

    May 16, 2014 3:10 pm

    I think this is a brilliant article – something not often, or ever discussed. The main issue here is that clients always think that space HAS to be filled, otherwise its a waste, for which designers rarely have the final say over. It’s a tweak and test process but clients rarely understand that. Online newspapers are the worst, although The Guardian recently redesigned its online presence and its beautiful, and I’m sure that they are seeing more engagement because of it.

    Purposely I made my sites content webpages 730px wide (not a “standard” I know) because it creates a strong focus on a minimal design, which our users are very happy with http://airwalk-design.com. Bigger is not always better.

    4
    • 2

      Steven Bradley

      May 16, 2014 7:18 pm

      Thanks Daniel. I know what you mean abut clients. I think most people assume they should cram as much as possible into the space to make sure nothing is missed. Most of the time if you explain to them the reasons for wanting to use more space they get it though.

      With news or magazines sites they do need to present a lot and will naturally be more information dense. Sometimes, it probably is a little too much information at once, but in fairness they do need to present a lot in less space. Not necessarily on every page, but definitely on some.

      0
  2. 3

    Great article. It all reminds me of a book that changed my life: Art and Visual Perception by Rudolf Arnheim. Although his writing is a tough read, I still use those Gestalt principles on a daily basis. Thanks for bringing a lot of value in a concise article.

    2
    • 4

      Funny, that reminds me a book also. “Drawing with the left side of your brain”.

      0
      • 5

        Steven Bradley

        May 16, 2014 7:22 pm

        Another great book, I’ve also read, though I didn’t look to it for this article. Maybe the info in the book stuck in my mind more than I realize.

        0
    • 6

      Steven Bradley

      May 16, 2014 7:21 pm

      Thanks Esteban. Great name by the way. :)

      I’ve read Art and Visual Perception. It’s one of my favorite books. I think every designer should read it at least once. I don’t think many realize how much of what we do comes from that and other Arnheim books.

      0
  3. 7

    Great article. Many Designers focus in the content, but the content should be readable, usable and comfortable. This balance is very important but unfortunately one of the last things professionals think about, so one of the lasts to achieve. This is deeply related to alignment and adaptivity ( in Websites case ). Thank you Smashing Mag to again share good Knowledge and Good practices.

    0
    • 8

      Steven Bradley

      May 16, 2014 7:23 pm

      Thanks Erick. When I first started designing websites I crammed too much into the space too. Once I started to see the space as a design element and not just something to place elements in, I think my designs improved immeasurable.

      1
  4. 9

    Thanks for the article!

    Dolphin and Seal logo could easily be “Dolphin and Rabbit” because of the way the space leaks through at the seal’s head. Bit too ambiguous, IMO.

    2
  5. 10

    Nice article. It help me a lot in reviewing and extending my knowledge.

    0
  6. 11

    Useful article thanks for sharing.
    What’s the difference between negative space and white space?

    My understanding is that negative space is mostly evident in a small scale context where it can add further meaning to “shape”, e.g. stencils, masks and logos (WWF panda) and white space is deployed to portray “figure” with greater emphasis.

    0
  7. 12

    Angela Berlingeri

    May 29, 2014 8:33 pm

    This article is a keeper – and one to share – especially with students. Thanks for the great examples.

    0
  8. 13

    Patrick Tehubijuluw

    June 11, 2014 11:44 am

    You guys should also check out this article which holds lots of the concepts we saw here. This article more describes how our brains work related to the message in this post.

    URL: http://qlikshow.com/what-we-can-not-unsee/

    Don’t forget to look at the links in this article, that’s the part were the brain is explained a bit more.

    0
  9. 14

    this is awsome! thanks for sharing Website design for small business

    0
  10. 15

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top