White Space

White Space

Sometimes the difference between a mediocre design and a stunning one is the amount of white space. Leave everything else the same and simply change the white space and you change the design.

Whitespace is the empty space in-between elements. Here’s a simple example.

No white space: Simple page with a text box that doesn't have any space between the lines.

White space: Simple page with a text box that has a bit of space between the lines.

Once you begin adding more elements it becomes even clearer. Notice the difference when I add only one additional element.

No white space: A simple page with text and an image with no space between the elements and no space between the lines of text.

White space: A simple page with text and an image with white space around the elements and between lines of text.

This is even more pronounced when there's more elements in the mix.

No white space: An example app design with little bits of white space between elements and lines of text.

White space: An example app design with white space that showcases the power of white space in improving a design.

White space can change a cluttered and confusing interface into one that is appealing, enjoyable, and even clear and easy to use.

So, add space between your text, your elements, and your groups of elements. For headlines I also often add space between the characters of each letter.