White Space

January 07, 2015 | Design

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:

No White Space

White space:

White Space

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

No white space:

No White Space, One Element included - an image

White space:

White Space - text and an image included

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

Admin design by Nabil Admin Design by Nabil

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.

Want to Improve Your Designs?

Get my best articles, design tips and other resources once a week.

If I don't help you improve your designs, unsubscribe at any time.

Sign Up For Free

×

Sign In

×