I see a lot of designs that either don’t pay attention to the proper use of space or simply get it wrong. The proper use of proximity is key to creating a consistent relationship and hierarchy of page elements. When care is not taken, websites and interfaces can at the very least be visually displeasing or confusing, and at worst frustrating and distracting from the site’s purpose.
To see why proper spacing of elements is key to usability and aesthetics, take the Gestalt Law of Proximity:
Spatial or temporal proximity of elements may induce the mind to perceive a collective or totality.
To elaborate, our brains group elements that are close to each other and associate those elements as being related. Elements nearer each other will have a stronger relationship in our minds than elements further apart. This is an evolutionary trick our brains have learned to help understand our surroundings better. To see how this works, take a look at the example below.
Without thinking about it, our brain organizes the dots into 4 categories because of both the proximity of the dots within the groups as well as the groups themselves. To be more specific, our brain sees 2 groups and 3 subgroups of the right group. This conclusion may seem obvious, but the implications in design are important.
Even though you as the designer may think of elements as related, if you do not space them as such your users will not share this impression. This may distract or confuse a user if they see content that should be related, but is spaced as if it’s not.
Lets walk through a quick example. Say you are designing the homepage of a blog and on that homepage you have a list of articles. Each article has a title, a byline, and a description. In this simplistic example, it would make sense to have the title, byline, and description all vertically stacked and equally spaced. The spacing between each article should be more than within each part of the article to signify each article as its own unit.
Another thing to keep in mind about proximity is consistency and a minimal number of values for padding. When I am designing I like to start with a set of 3 values for padding; small, medium, and large. Usually these values will be somewhere close to 1em (~14px), 2em (~28px), 3em (~42px) respectively. I add more padding values as necessary but I keep the total number small and each value unique for simplicity. I would never have padding values of 1em and 1.1em; values should either be exactly the same or clearly different (this is another Gestalt Law, more on this later).
Using these 3 padding values to revisit the blog homepage example, the spacing of the title, byline, and description would be 1em and the spacing between the articles would be 2em. The large padding value of 3em would be used to space out layout elements of the page such as the sidebar or the header and footer of the page. This way, the different elements’ relationship to one another is made clear.
A general rule for spacing elements is that the larger the element, the more padding it needs. This is not part of the Gestalt Law, but more of an aesthetic ideal. Page elements have a visual gravity or weight and the larger the element is, the more spacing it needs. Without adequate space, large elements will suck in the smaller elements and create clutter. This can be seen in the previous blog example; as the elements grow larger, so does the padding.
One trick I find helpful is to use padding values in ems rather than pixels in responsive designs. Then, if the text size changes, all the paddings will adapt and retain a consistent relationship. Using ems also helps to visualize padding values as they relate directly to the size of the text.
I have only scratched the surface of an important topic in design. Hopefully this will serve as a starting point to exploring how spacing and proximity affect a design. The most important point to take away is the importance of being mindful that spacing affects both the aesthetics and usability of websites and interfaces. Make deliberate decisions on padding and remember, elements closer to one another have a stronger relationship to each other than those further apart.