White space

White Space

January 07, 2015|Design

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 level up your CSS skills?

Sign up below to receive a CSS tip each week as well as access to my courses and articles as they become available.

I won't send you spam, promise. If it ever feels that way you can unsubscribe at any time.

Sign Up For Free

×

Sign In

×