Should designers be able to code? This topic never seems to die, with its endless blog posts, Twitter discussions and conference talks. But the developer’s involvement in the design process seems to be addressed very little.

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 gestalt; 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 relationship 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

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.

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.

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 breathe. 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.

Credit: Smashing Magazine