How To Activate Space In A Design

White space is to be regarded as an active element, not a passive background.
—Jan Tschichold

Form exists within space. Without whitespace there is no form as one provides the contrast in which to see the other. Learning to see and use the space in your designs is one of the most important things you can do as a designer. Space can be active and space can be passive and while both have pros and cons we generally want the space in our designs to be active.

What are Passive and Active Space?

Space is created in between and around positive elements. It can exist between shapes, images, lines, and dots. It can exist in between lines of text in a paragraph or a bulleted list. Space also exists in the area between any element and the edge of the page or browser window.

Whenever there is no positive element there is whitespace.

Space can be a by-product of a layout. It can be there as what’s leftover after you’ve placed your positive elements. Or it can be consciously planned, co-exiting with non-space, and becoming part of the design.

Leftover space is passive. Planned space is active.

Spaces between the forms, or the negative shapes, play just as great a role as the positives and they enable you to check the accuracy of your drawing. The positives make the negatives and negatives make the positives.
&#8212Stan Smith

Passive Space

Passive space isn’t integral to our perception of design elements as it doesn’t affect the positive form. Passive space isn’t enhancing your design elements. It isn’t necessarily detracting from them either. It’s simply there and usually it hasn’t been consciously planned.

Being passive in your use of space forces space to the perimeter. Think of any fixed and centered website. Assuming you’re viewing the site in a browser open wider than the fixed width you see space that’s been forced to the edges.

I’m sure you’ve built a similar site and know you didn’t consciously think of the space other than perhaps to make it equal on each side. Your thoughts were on centering everything other than that passive space.

Passive space is usually symmetrical. Because of its symmetry it’s predictable and suggests order, balance, peacefulness, and stability. Each of the previous qualities may be exactly what you want at times. However due to it’s predictable orderly nature it tends not to be noticed and becomes background only.

Order, balance, peacefulness and stability are all appropriate at times. Because of the title of this post and because more of the content in it is about active space you may be led to believe that active space is good and passive space is bad. That isn’t so.

Passive space isn’t bad by default. It’s often exactly what you want. Passive space is bad when it exists as a by-product. When it’s used to help communicate something like order it’s good.

Active Space

Active space by contrast is integral to our perception of design elements as the space influences the form. It enhances your design elements by affecting their shape and position on the page. Active space is space that has been consciously planned. It is not simply there. It has an active role in the design.

A master of using active space was MC Escher. Look at any work by Escher and try to imagine it without the space. Classic examples like Sky and Water where birds turn to fish or Day and Night seen below with dark and light birds flying in each direction, appear to have their positive elements emerge from the space between other elements. Space is very much an active and integral part of each work.

Active space is carefully considered emptiness. Unlike passive space it’s asymmetrical. It’s dynamic and suggests motion and activity. It’s inherently more interesting than passive space.

Shape your space.
—Mihaly Csikszentmihalyi

Why active space is important

Visual design is the arrangement of shapes. Shapes that are both positive (form) and negative (space). Learning to activate space leads to the creation of shapes of space that are equally interesting and important to the shapes of form on the page.

Seeing emptiness not as emptiness, but as a shape to be arranged leads to better designs. Seeing space as shape leads to space becoming part of your visual grammar instead of merely background. It becomes something you can use to communicate.

If you decide to use passive space do so because you recognize the shape of the space and what it communicates.

Active space enlivens the page and helps guide readers into the design. It creates flow through your design by connecting and separating positive elements. It communicates things like energy and growth and in general will communicate more than passive space through it’s greater variety of shape.

If you arrange whitespace well the positive forms on the page will inevitably look good, but if you only arrange the positive forms the resulting whitespace will be ineffective. Active space is often the primary attribute of pages that are perceived as well-designed. They seem to have an inborn quality lacking in designs where passive space dominates.

How To Create More Active Space in Your Designs

You can activate space in a variety of ways. The most important being to consider the space and think about the shapes you’re creating when you place positive elements within and around it.

You need to think about space in order to activate it. You need to see not just the shape of the positive forms on the page, but the shape of the resulting space. The more conscious you are of space in your design the more active it will become.

One obvious way is to use asymmetrical balance in your composition, which by default activates the space within. Asymmetrical balance is not the only way to activate space though. Another simple way to activate space is to shift a positive element such as an image so it moves into the empty space around it or partially off the page.

Space is activated through its size and relative position to positive elements. As a figure gets larger in a given space it activates that space by achieving a balance with it. Each becomes a size of relative importance to the other.

By continuing to enlarge the figure so it moves outside the space and even off the page you can abstract the figure, which forces the eye to consider the negative space, thus making the space more active.

Consider the bird shape in the image above and the same shape enlarged in the two images below. Notice how the space is passive above and becomes more active in each of the images below.

You can control space through:

• The number of positive elements within the space
• The relative size of elements within space
• The intricacy of the pattern of form and space

The principle of closure can be used to activate space by integrating space into a positive form leaving the form incomplete. This requires the viewer to interact with the design and complete the form.

If you don’t use enough space though, your viewer won’t need to participate as the form will essentially remain closed. If you use too much space on the other hand you might hinder the closure and prevent your viewer from completing the picture.

Space is the breath of art.
—Frank Lloyd Wright

Fixed, Elastic, and Fluid Designs

I mentioned above that fixed and centered websites force space to the edges and create passive space. It’s really the centered part creating that passive space. Shift the site to the left or right and asymmetry is generated.

In general fixed or elastic designs allow for more control over whitespace in your design. One of the downsides to fluid designs is this loss of control over space.

As your design is allowed to resize itself to match the window size of the browser, active space changes shape to communicate different things than intended. It’s no longer considered and thought about. You no longer control it’s shape and relative position. It becomes a by product of the size of the browser and moves toward passivity.

An observation I’ve made over the years is that those who prefer to create fluid designs tend to come more from a development background. They rightly take pleasure in the ability of their code to adapt to different conditions.

Those who prefer a fixed or elastic design tend to come from more of a design background rightly preferring the control over space and form.

The above is a general observation to be sure and one that only occurred to me while writing this, but an interesting observation to me at least.

Early on when first learning html and css I was excited by the concept of fluid designs. Years later as I shift more toward the design side of things I much prefer a fixed or elastic design. I can’t remember the last time I even considered making a design fully fluid or saw a fully fluid website who’s design spoke to me.

Summary

Space is an essential part of any design. It is only through contrast with whitespace (PDF) that we see form and it’s space that leads us from one element to the next.

Learning to see the shape of space so you can control and activate it, is one of the best things you can do to grow as a designer. When you get the empty space right the positive forms inevitably work well together The reverse is seldom, if ever, true.

Between passive and active space it is almost always the active space that is preferred. The order and balance of passive space has its place, but the dynamic motion and action of active space offers the greater range of communication and is inherently more interesting.

Active space can be created in a variety of ways, the most important being to take the time to think about it and consider its impact on your design. When you fail to think about space it becomes passive in a way you don’t want. It doesn’t interact with your design and adds nothing to it.

When you take the time to consider space and understand how its shape impacts your design you have a new design element at you disposal.

Interestingly, according to modern astronomers, space is finite. This is a very comforting thought – particularly for people who cannot remember where they left things.
—Woody Allen

« Prev PostNext Post »

Download a free sample from my book, Design Fundamentals.