Think of a layout as the architecture of a digital product. There are certain rules and guidelines you should follow, the same as you would when designing a building. If your hallways are too narrow or your doors are aligned with the ceiling instead of the floor, the inhabitants of that building aren’t going to be happy.
The same goes for layout. If the elements in your layout present usability problems, it’s going to ruin the user experience. Understanding how each layout technique affects UX allows you to use each concept effectively to create a functional experience your users actually like using, as well as a layout that’s visually pleasing.
The most basic element of a layout’s structure is spacing. Spacing is a set of rules that define how elements in an interface should be arranged. It includes the measurable values that define distances inside and outside of elements.
When spacing is consistent (we recommend defining spacing in factors of 8), it helps maintain a clean and organized layout. It can also help eliminate comments about "please add some space here, or some space there" when working with clients. A spatially balanced UI makes it easier for users to navigate your product.
There are a few specific aspects of spacing you’ll need to know. Layout spacing defines the distances between the most significant elements and the page itself. Consistent layout spacing makes a page look visually balanced, aids in easy navigation, and defines relationships for responsive design.
While layout spacing focuses on the big picture, component spacing is all about the details. Component spacing defines the spatial relationships within a given component, like the distance between a button’s icon and label. If you’re not keeping that kind of spacing consistent across all the buttons on your page, it can be subconsciously jarring to users and looks sloppy. Maintaining consistency here brings balance to your UI components, so take the time to establish rules for use across the entire product.
When creating either layout spacing or component spacing, you’ll need to know a couple of concepts: margin and padding.
Margin is the space that exists between elements. This could be the space around a button, between columns, or between an image and surrounding text content. Margins are the basic building blocks of layout spacing.
Margins also give us white space (or negative space) on a page. Think of this as breathing room on the page, helping to eliminate visual clutter. White space also helps maintain balance and rhythm on the page between elements.
While margins are external, padding is internal. Padding is the space within an element’s bounds, starting with the border and extending to the next inner element. For example, if a button is a component, the spacing between the button’s label and the edge of the button is the padding.
Virtually every element will have padding. Be sure to always set minimum paddings within an element—we recommend at least 12px. This prevents insufficient space in responsive designs when viewed on smaller screens.
When creating consistent spacing within your design, keylines are an essential tool. These are imaginary lines that help align elements that would otherwise venture outside of the layout grid. They help maintain structure and organization. They’re vital for keeping your content balanced, especially among different types of neighbouring elements, such as a profile picture and text accompanying it.
You’re probably at least somewhat familiar with alignment thanks to word processing programs. But alignment applies to more than just text content. It can be used on every element in a design to make sure those elements line up consistently.
Left alignment is the most commonly seen alignment. As the name suggests, left-aligned elements are positioned starting from the left side of the page (or their parent element).
Right alignment is the opposite of left alignment. Elements are positioned relative to the right side of the page or parent element. With the exception of languages that are read right-to-left, this is the least commonly used alignment. While it may be used for elements that are non-text-based, it makes text content difficult to read due to the varied starting point for each line. Horizontal alignments like left and right are only one aspect of aligning elements. There’s also vertical alignment to consider.
Center alignment can refer to both horizontal and vertical alignment. Elements are aligned along an imaginary central line. It’s commonly applied to things like headers or button labels. Center alignment on the horizontal plane isn’t particularly useful for large blocks of text (those that include more than three lines), as the varying starting point for each line can make reading more difficult.
Top alignment is the most common vertical alignment. In this alignment, elements start at the top of the page, and each one appears below the previous. It’s the same way we write on paper, starting at the top and working our way down the page, and for this reason it’s the most intuitive and scannable alignment.
Bottom alignment, by contrast, starts at the bottom of the page or container, as if the elements were being affected by gravity. These elements are always stuck to the bottom of their container, even as the height increases. One example of bottom alignment is seen when captions appear over the bottom of an image, keeping them at the bottom even if the image size changes.