White Space

You purchase a new couch for your living room - a big fluffy purple one. The couch has definite form and important function, a big fat slice of design that will work tirelessly to catch you when you are weary. Though the overstuffed piece has a certain charm and aesthetic unto itself, it will only look grand if it is positioned in the perfect spot of your living room.It is the surroundings that bring definition, meaning, and purpose to an object. Consider the same purple couch perched in a dimly-lit alcove with black velvet drapes and a ceiling adorned with mauve paint, then imagine it in a lofty room with sheer white walls, angular skylights, and bleached blonde floorboards.As breathtaking as any of our pixel constructions could possibly be, the life or death of the design will be determined by the spaces that surround the elements in it. Below are several compositions that will highlight the importance of the space between and around objects.For all of you font geeks out there (like me), the face used in the examples is Gotham - light/bold (in most cases) and book/bold (where reversed type is needed).

First I present some simple type placed in the most default of positions - dead center. There is nearly perfect symmetry around all sides of the type object, which makes the white space a void more than a design tool. The type looks okay, but has a static, planned feel that does nothing to engage the viewer.

Notice these two derivations. Using the exact layout as the first example with only a font size change, the amount of white space either contradicts or defines the meaning presented by the type object.

When the object is moved to the upper right hand corner of the layout, notice how the white space actually looks like empty space, bringing meaning to the type. The object is seeming to float weightlessly, and appears pushed into the corner by the force of the space. Now the space is starting to work for the design.

Consider the difference between the past example and this one, where the space seems to be a weight on the object, pushing it to the bottom of the composition. This gives mass to the object and makes the white space airier and atmospheric.

This example further promotes the point, illustrating the force of the white space pushing the type object out of the composition. The first illustration showed a type object as the heavyweight, whereas here the space around it holds the prominent position in the design..

Where is your eye drawn in this layout? Our attention is drawn to the calm words surrounded by gentle space, while our eyes bounce from the frenetic left portion of the layout. The eyes are always searching for a resting place, and the white space on the right helps to bring order and calm to an otherwise frenzied aesthetic.

Do you see the ‘W’ as the dominant design feature of this layout? This object is being created by five magenta shapes. Here, design and layout is used to bring ambiguity to the positive and negative spaces. Whether it is the cyan shapes that are the white space or the white ‘W’ that is the negative space is up for debate.

These two examples further illustrates the ambiguity of positive and negative space. Which forms do you see first? The simple design uses the spaces between objects to keep the viewer’s eyes moving around the composition, accomplishing the goal of keeping the audience’s attention past a single glance.

Here is some basic paragrah type set centered on a page, as we have all seen on many documents. The space on either side of the paragraph is symmetrical and static - hardly a player in the design at all. There is nothing about the compositional spaces that brings meaning to the text.

Simply left-justifying the text and bringing it to the edge of the composition provides a more engaging space to the edges of the composition and forms a single shape that has equal weight to the type.

Formatting the text just a bit adds even more dynamics to the white space shape. The space between the two headline words becomes a subtle player in the layout, and the ragged edge of the four lines of type serves the type with an asymmetric balance. Reducing the margin on the left brings further weight and force to the white space.

This final example moves from typesetting to actual design. The headline and body type seem to be pressed against an actual object, and the type seems to be hinged on a fulcrum, accomplishing the illustrative goal of design simply by creating dynamic shapes out of white space. The wedge formed by the space between headline and body copy serves as an arrow that points the eye to the start of the type.

We can wow the clients with the latest pixel effects, dizzying dimensional displays, and perfected arrays of color, but the designs will only have significance and impact when our white spaces are carefully constructed and implemented to create meaning and relevance.