The Figure-Ground Relationship of Web Design

Paul Schetelich

Lead Designer

Negative space is just as important as the positive elements in graphic design. If you focus all of your attention on arranging shapes on a canvas, then you’re limiting what you can do. Design is the arrangement of both shapes and space, and in order to take graphic design to the next level, you must be aware of space, how it communicates and how you can work effectively with it.

First, let’s talk about a fundamental design principle: gestalt. The gestalt principle that applies most to space is the figure-ground concept. This means that everything in the design will be seen as one or the other, with a mutually exclusive relationship. So, if you were to change one part of the design, the other part would be changed as well. The figure-ground relationship is also complementary, meaning that the elements can enhance or detract from each other.

Understanding the figure-ground relationship will ultimately affect how the design is communicated and interpreted. This can be done, in part, by recognizing that white space is an active component, not something passive.

Consider three separate images that include black and white lines. In the first, the lines are equally spaced and the figure and ground are stable. In the second, the space in between the black lines is removed, so all you see is a dominant field of black. In the third, the lines are equally spaced again, but two black lines have been removed. That space becomes active. In all images, messing with the space completely changes the field.

The three types of figure-ground relationships include:

  • Stable: It’s apparent what’s figure and what’s ground. One or the other typically dominates the composition.

  • Reversible: Both figure and ground attract the viewer’s attention equally. This design is often dynamic because both vie for attention and can overtake the other.

  • Ambiguous: Elements may appear to be both figure and ground at the same time. They form interesting shapes, and the viewer can make their own interpretation.

Using these relationships, you can direct your audience to look at different parts of the design and interpret what they see. Additionally, taking a closer look at space allows you to establish contrast, generate tension and provide visual rest between elements. Space, in essence, correlates to quality.

 

About the Author: Paul Schetelich

Since the days of sidewalk chalk and finger paints, Paul has been creatively crafting the art of design. With a B.A. in Graphic Design from Monmouth University and a Masters from the Califano School of Art - Paul quickly moved up the ranks at SEMGeeks from Junior Designer to the Lead Designer. With 4+ years of experience in web design Paul is ready to conquer the digital atmosphere.

Talk With Our Team to learn more about this...

Comments?