Design and Composition | Shape and Form

Course Developer: Piper Nilsson
Instructors: Andrew Shalat, Piper Nilsson, Jordon Schranz
Designer: Surim Hwang, Piper Nilsson
Editors: Gordon Drummond, Tara MacKay

Shape and Form

Composition is the artful arrangement of shapes and forms. A good composition will bring harmony to your design.

To quote John Updike, "What art offers is space—a certain breathing room for the spirit." In this lecture, we will step into the space of the canvas and feel out the "breathing room" between the elements on the page. Intuitively, you will sense whether the shapes feel too crowded, too widely dispersed, or perfectly spaced.

Let's start with the building blocks of composition: two-dimensional shapes.

Most designs (whether an ad, a poster, or a web page) are contained within a flat, two-dimensional surface.

When a line is drawn across the canvas, it can be seen as a distant horizon. Your visual perception creates the illusion of three-dimensional depth. Section A looks like the sky, and section B the Earth.

But on a two-dimensional surface, A and B are only two rectangular shapes. This is easy to see when they are separated.

Here we add several triangles. This might appear to be a road reaching to a distant mountain.

When we separate the component parts of the picture, it becomes easier to study the relationships in size and shape. Each triangle is proportionally balanced. Together, they divide the two-dimensional surface.

How can you apply this principle in your designs? Whether you are designing a magazine ad, poster, or book cover, remember that the surface you are working with is two-dimensional. Visualize the design elements as flat shapes and compare their relationships to each other and the page as a whole.

 

Negative Space

If you've been working in design for a while, you probably have heard the term negative space bandied around a lot. Usually, it sounds like the kind of mysterious secret restricted to those "in the know."

Negative space refers to the background area of a design. It is called negative to distinguish it from the positive subject matter that occupies the center of visual interest.

In the diagram on the left, the "positive" volume of an apple is placed against the "negative" surface of the table. From force of habit, you'll pay more attention to the apple than the table. The apple is the center of visual interest. However, the negative area of the table is integral to the overall composition.

In the Alphabet of Design Classics by Blue Ant Studio, there is an interplay of positive/negative shapes in each graphic. Click the image for a closer view.

Ancient Islamic artists were masters of negative space. In Islamic patterns, each shape creates another shape. The opposing shapes seem to complete each other, as you can see in the example below.

When the design is abstracted, it may be difficult to determine which shapes are positive and which shapes are negative. All of the shapes are equally important.

Reversing the positive and negative areas may cause your viewer to do a double-take.

How many fish do you count in the logo to the right? Four, or eight? The visual play engages the eye, making the design more memorable. You may have seen a similar effect in Dutch artist M.C. Escher's famous Sky and Water painting.

Noma Bar plays with the negative space in his illustrations, creating positive subject matter within the negative areas of the design.

Type designers are very sensitive to the relationships between positive and negative shapes.

In this call for entries to a design contest in Critique magazine (left), the spacing between the letters is carefully controlled. There are no awkward gaps or crowded spots—it flows.

You can use negative space in a million different ways, but they all fall into three categories: open, closed, and divided.

Open Negative Space

This UCLA poster, designed by Paul Rand, is an example of open negative space. The positive subject matter of the orange is surrounded on all sides by empty space.

Open negative space poses a special problem—the ever-present danger that the large open areas will feel "empty."

Notice how carefully Rand has placed his subject matter. The orange is centered vertically on the page. The type is aligned to the left, balancing the heavy base of the orange on the right.

If the orange were placed slightly too high, or sized too small …

… the composition would fall apart. A figure placed within open space must be related sensitively to the dimensions of the page.

In the poster below by Hans Schleger, each element feels visually connected. Imagine an invisible web pulling between the shapes, holding them together within the open surface of the canvas.

This Blanca Gomez illustration is arranged around a circular motif. There is a continuous movement from one shape to the next.

Gomez's New York illustration is also surrounded by open space, but it feels fully contained.

If you have just one image, then you need a beautiful contour to make an impact. The Audubon magazine cover (below-left) silhouettes a bird against a white background. Hans Schleger's Edinburgh poster (below-right) uses a swirl of red paint to move the eye in one fluid movement.

Closed Negative Space

In the posters below by Ryohei Kojima, the animals are cropped off the edge of the page. This creates closed negative space. There are two brown negative shapes and one green negative shape between the horns of the elk, and three gray negative shapes surrounding the waterfowls. Each negative area is a closed shape—you could trace its contour all the way around.

The dog on this Spoon magazine cover has a definite momentum towards the upper-left corner. As a counterbalance, the dog's black collar and the white Spoon logo pull to the right. Compare the negative areas to the left and right of the dog. The empty space is well-balanced.

In this book cover by Wim Crouwel, the green, closed negative shape on the left mirrors the green, closed negative shape on the right.

The typographic composition below (by the Swiss design firm Odermatt & Tissi) is anchored to the upper-right corner of the page. Without this connection, the type would float in the yellow field. There is only one negative shape in the empty area of the design, but it is a closed shape.

Divided Negative Space

In the CD cover below by Julia Guther, the figures aren't cropped and they don't touch the edge of the page; they are surrounded by empty space. However, the rocks along the bottom of the illustration divide the canvas, giving structure to the design.

The background in this Harper's Bazaar magazine cover, designed by A.M.Cassandre, is divided by the diagonal planes of the deck, the water, and the sky.

In Johnny Vitorovich's poster for the School of Visual Arts, the triangle of parchment paper creates two background shapes: a dark shape and a light shape. Imagine if Vitorovich had left out the parchment. Wouldn't the bananas appear to float above the canvas?

The background of this Max Mara ad is divided into several rectangles. Compare the height and width of the bench to the canvas frame to the small square in the top-left corner to the long, narrow rectangle in the top-right corner. Notice how each corner is a different size and shape. This keeps the eye moving around the page.

In this Diebenkorn painting, the space behind the model is divided by the chair and the circular pillow. The blue color of the pillow is repeated in the negative space under the woman's arm and between her ankles, moving the viewer's eye across the figure in a curve. Test the importance of the pillow by masking it with your finger. Without the pillow, the space to the right of the girl feels awkward.

Testing Compositions

By looking at designs as two-dimensional shapes, we can test for two common compositional problems: empty space and crowded space.

Empty Space

The feeling of empty space is a signal from your subconscious that the spatial relationships are out of balance. Take a look at the landscape photo (below-left). There is a vast empty space in the upper area of the sky. The hillside masonry rises abruptly on the left, leading the eye out of the picture.

In a painting of the same scene (below-right), Cézanne solved the compositional problems evident in the photograph. The distant hills have been expanded in size, while the slope of the hillside masonry is more gradual.

If your design layout feels empty, first check the outside dimensions. Cropping off the empty canvas area might be the solution. If you continue to have doubts, adjust the placement of the subject matter. The goal is to arrange the shapes until the composition feels complete.

Compare the Band of Horses posters below, by Sasha Barr. In the version on the left, the white negative area of the page seems rather empty. This problem was resolved by reversing the colors and using a blue background in the final design (below-right).

Mark Brooks' Communiqué poster contains a lot of empty white space. However, unlike the first draft of the Band of Horses poster, there isn't a feeling of emptiness. The power lines expand out diagonally to fill the page, creating a sense of expansion. No color is needed.

Crowded Space

Another compositional concern is crowded space. This occurs when too many elements fill the canvas. How do you know which to eliminate? Mask different areas of the page until the design comes into balance.

The photo below feels claustrophobic; there are too many boats in the harbor. The artist (Theodore Robinson) eliminated the left boat in the final painting. By blocking out the three adjacent boats one-by-one, you might have arrived at the same composition!

The Julia Rotham illustration below is very busy. However, it doesn't feel overly crowded. The space between each of the elements is carefully adjusted, allowing the energy to follow through the city streets.

These magazine covers are packed to overflowing, but not crowded. The shapes are unified and evenly spaced. If just one more element were squeezed into either design, it might break the camel's back, but the spacing is harmonious as it stands.

Pictorial Depth

A poster is a flat surface, but it can create an illusion of depth. In the image below-left, the one-point perspective of the road leads back, back, back, to the setting sun. The sense of perspective creates depth, but once you arrive at the vanishing point, you're stuck. The viewer drifts off that cliff and doesn't come back.

In the final poster on the right, the large "I can do whatever I want" title holds the viewer in the picture. After reading the title, the eye circles back to the bicycle in the foreground.

The same effect works in reverse. In the image on the left, the viewer is drawn irreversibly into the tunnel. Stuck. In the final design on the right, the tunnel doesn't feel as far off. The tension between the tunnel and the movie title engages the eye.

Cézanne carefully controlled the pictorial depth in his paintings. In a photograph of his motif The Sainte Victoire from Beaurecueil, the road leads back to the distant mountains. Lovely scene, but it only has one direction, pulling back into distant space.

The forms in Cézanne's version of the landscape are more visually engaging. The road no longer leads far into the distance. The mountains in the background expand up and to the left, while the road in the foreground pulls down and forward. The eye moves between the two trees, between the two houses, and between the three triangular hillsides.

Deep fathoms of space should be avoided, but you don't want your design to be too flat either. In the modified Mimmo Castellano illustration (below-left), the red bus is as flat as a pancake. In the final illustration on the right, the variations in color and texture give the bus dimension and form.

At first glance, these illustrations by Olimpia Zag may seem flat. However, they contain a good amount of depth. The black books on the Stockholm shelf appear to shift slightly forward. The gray table is flat against the wall, but the yellow floor expands forward and the chair is drawn three-dimensionally.

Each of the buildings in the Saigon poster is on a a different plane. The brick pattern leading up the buildings pushes them back in space.

The illustrations below use flat shapes, but there is a sense of pictorial depth. Some shapes are in front, some shapes are in back. The eye is engaged in the process of moving from plane to plane. It feels satisfying because all the shifts occur within a controlled range—nothing is too far back or too far forward. The Conor Oberst poster was designed by Kansas City-based Vahalla Studios, and the Go Outside poster is by illustrator Hollie Chastain.

Using three-dimensional shapes is a sure-fire way to create depth. In the posters below (left by Keating & Keating, right by Les Mason), the subject matter is incorporated into the surface of the canvas while maintaining a sense of form.

Working with Composition

Cézanne declared "I advance all of my canvas at the same time." From the first sketch to the final painting, the entire picture was considered. If there were merely a few lines on page, they were placed in relation to each other and the four edges of the canvas. The painting was a complete unit at each stage of the development.

Approach your design projects in the same way. Start with a small, simple black and white sketch, establishing the negative space right from the beginning. Stop when you've spaced the subject matter over the entire area.

Step back and look. Keep testing, weighing, and blocking out your design as it develops.

Avoid too much detail on your first draft. Stay focused on what is happening to the picture as a whole. Don't add color or illustrative details until you're sure of the basic forms of the composition.

Artist Yeesan Loh built up a strong structure before adding color to the final illustration below.

In the exercise that follows, you'll experiment with all three kinds of negative space: open, closed, and divided.

Discussion Share your thoughts and opinions with other students at the Discussions Board. Exercise Create compositions that illustrate open, closed, and divided negative space.