Space. It may be invisible, but it’s one of the most important elements of a composition. All the little details, the bits and pieces a designer puts together to make an interface, they can only work if they work together. Sometimes the spacing of elements doesn’t get the attention it deserves.
So I’ve put some thought into the different ways space can be used and how they can affect the usability of an interface.
Arguably one of the most important considerations of space in UI design is that which surrounds objects. How a designer chooses to position elements in relation to each other can largely affect the comprehension of an interface.
The space between objects is described as proximity—a principle of Gestalt Theory. When elements are placed close together they are perceived as a group, or a singular element. Paying special attention to how elements relate to each other can benefit an interface aesthetically, increase usability and decrease cognitive load. This is sometimes referred to as microspace.
Spacing elements too loosely can lead a design to feel cluttered and lacking a clear structure. Tightening the spacing between related elements can improve coherence and reduce clutter (e.g. three elements become one, etc.). Grouping related objects also infers meaning to the objects in a group. for instance if a collection of actions are all within close proximity of each other a user can safely assume they are all related actions.
Macrospace is what most people would refer to as white space. This is the negative space between major elements that often dictates the overall aesthetic of a design. This space serves much more than an aesthetic purpose though, it is often what guides the user’s eye across the page. Elements with ample space around them will elicit more attention, often regardless of size.
Finessing the spacing between objects can help to create clear hierarchy, give objects meaning, improve coherence, reduce clutter (and by extension the number of seperate elements on a page) and guide the user’s attention.
The opposite to negative space is positive space, or occupied space. Don’t just think about the space between elements but also consider the size of the elements themselves. Varying the size of elements is a great way to add visual interest to a layout as well as controlling the hierarchy.
Elements of a significantly different size placed near each other create contrast. Contrast is one way to create interesting designs, it is often the difference between a mediocre looking design and an amazing one. Of course scale is only one of many ways to introduce contrast into a design, but it is a great tool — just don’t go overboard with it.
Too varied visual weighting within a layout can look messy and incoherent, a good rule is to have about three to four differently sized elements, or blocks, in a design. This might be a large headline, paragraph text, an image and a group of buttons or links.
The space within elements describes the padding of containers (think buttons and boxes) and the spacing of text (think character spacing and leading). This sort of space mostly controls thelegibility of a design, but it can also be manipulated to create a certain visual feel—very tight versus very loose.
Leading is the space between lines of text. This is very important for legibility, too tight or too loose and the copy becomes very difficult to read. Getting it right helps readers easily move from one line to another. A good rule of thumb for body copy is to set the leading at around 150% of your text size— this has the added benefit of meeting AA accessibility too. There’s been loads written on this topic before so I won’t go into detail here but if you want to read more about leading I suggest this short article.
Character spacing is the space between the characters as a whole (not to be confused with kerning). Again just like leading this is important to get right, but unlike leading character spacing is more about setting a visual style than controlling legibility (not that leading can’t be used for style purposes). Often when setting all-caps it’s a good idea to loosen up the spacing a little whereas it would be very unusual to have loose spacing on a block of sentence case copy.
Padding describes the amount of space between an element and it’s containing borders. Think about what a button would look like with no padding, it becomes more like a highlighted line of copy than a button. The button’s internal space is literally what makes it a button. It’s generally safer to go too loose with padding than too tight. Padding that’s too tight can make an interface look cluttered making it difficult to distinguish elements from each other. If you think about the real world, almost everything works better with a bit of breathing room.
How a designer uses space can make or break an interface. Spacing affects everything a designer touches. Being purposeful about how you’re using space in an interface will always yield a better result. The next time you’re struggling to make something ‘work’ try thinking about how you can make better use of your spacing.