Get In Touch
Pittsburgh, PA
hello [at]

Utilizing Space in UI Design

Space is your friend. Software developers tend to optimize things around them and often this applies to the user interfaces they work on. They trim excess space and keep things together, this is great for the backend, but on the frontend, not so much.

In past projects, I struggled with the concept of explaining why using adequate spacing is important. Initially, I felt everyone should understand and grasp the concept of white space at first glance but I was wrong. Seeing the beauty of white space is something that has to be gradually introduced.

When I realized this, I created a few slides to share with my team and it was a success. I’ll be sharing a summary of these slides here.

Space keeps things alive

When the right amount of space is applied to a button the button looks clean and communicates that it can be clicked.

A picture showing of how space makes a button communicate clickability better

How space makes a button communicate clickability better

Button 1 is more common in projects that you would think, the urge to keep everything lean often makes buttons like this happen. Button 2 is less common because some developers tend to think the space is too much. However, Button 2 wins whenever an action has to be communicated.

Space reduces eye strain and increases readability

Many times, we have looked at the text on a screen or book and wondered why it was hard to read. The answer is that space is often underutilized in some of these scenarios. Take a look at the example below.

Utilization of spacing in card design

Keeping things simple often creates the look of a well-balanced system. Space helps you with this, more than you may think, by reducing cognitive overload and keeping your focus on one thing at a time.

Remember, space is your friend.

First published on Medium

This website uses cookies. By continuing to use this site, you accept our use of cookies.