Design: Space

In design, space is an extremely powerful tool for controlling attention and conveying meaning. Space facilitates understanding.

Space can group things together, space can create emphasis, and space can drastically improve legibility. Negative space (or whitespace) are hallmarks of professional design. Negative space is incredibly important in your design.

Negative Space

Many beginning designers do not navigate negative space well. White or negative space refers to the unmarked spaces around or between visual elements in a design.

Academics often itch to fill every inch of space with text, images, or other design elements, leaving no place for the eye to rest.

To improve your design, take a less-is-more approach.

  • Remove elements that don’t clarify to give breathing room to the core elements.

  • Use wider margins around the edges of the design and expand the space between unrelated elements to clarify page structure. More information below in "Padding."

Consider the Google homepage. Have you noticed how Google's homepage is incredibly clean and simple? It effectively uses white space to draw your eye to the focal point - the search bar.

Focal Point

Where does your eye naturally go when you first look at your design? Is the primary message getting across?

Your eye should naturally gravitate towards the most important piece: the title. Then, your eye will probably go to the section header in the top left corner.

Or is your eye confused and distracted, jumping around the image and not sure where to focus?

Play with sizing, spacing, proportions—and if the design is too busy, take something away.

Simplify, and play up the size, color, or surroundings of the area of focus.

Alignment

1

Grids

The word grid here can be a bit misleading. In the context of design, a grid is a set of columns that can be overlaid on top of a page. Elements on the page are typically sized to take up one or more columns. In between columns, we can place a “gutter,” or space, so that adjacent items are not overlapping.

Use grids in your design to make it more clean and organized. Notice the template poster on the right uses grids effectively with four columns of main text and a header that spans the top.

2

Alignment

If the content is supposed to be centered, is it? Check to ensure there is equal space on either side of the text. If a headline and an image are both left-aligned, does the left side of the headline line up with the left side of the image?

3

Padding

Padding refers to the space between the text and the border of the box that contains the text. Be sure that your text does not sit right against the border - this makes the text feel crowded and is not a good use of white space. Generally, you can change the padding in the formatting for the text box.

Continue to the next page: