Limited time offer - 50% off Uxcel Pro!
Get Uxcel Pro Yearly!
Expires in:
00
:
00
:
00
:
00
Interested in hiring qualified designers? Check out Uxcel Hire
Hand
Welcome Product Hunters!
Improve your design skills! Get Uxcel Pro — 50% off for Life.

Learning the basics of layout terminology

Learning the basics of layout terminology

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.

Spacing

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.


Alignment

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.

Container

A container is a bound area that holds other UI elements. They’re a home for text, images, icons, and surfaces. A large component, such as a table, might include numerous sub-componenets that each include a container of their own. There are a couple of different kinds of containers you can use.

Flexible containers shrink or expand depending on their content and the space available. They’ll resize based on the size of the page (useful in responsive design) and as content is added or removed.

Rigid containers, on the other hand, maintain their size regardless of the content or available space. While this can be useful for certain types of elements, rigid containers aren’t responsive and can run off the sides of the page on smaller display screens.


Additional Terms

There are a few other terms you’ll need to know when creating layouts: dimensions, aspect ratios, and touch targets. They’re all related to the size of elements, and can have a distinct impact on usability. 

Dimension refers to the size of each element. Two-dimensional shapes have two dimensions (width and height) while three-dimensional shapes have three (width, height, and depth). Defining dimensions upfront helps ensure consistency in a design.

Aspect ratio is the proportion between the width and height dimensions of an element. This is particular important with user-generated content, as people upload pictures of different sizes and properly displaying them in a consistent way maintains visual harmony. Think of profile pictures on a social media site: they’re restricted to square or circular images, requiring users to resize or crop them. The most common aspect ratios for images are 16:9 and 4:3, though 1:1 square images have grown in popularity thanks to sites like Instagram.

Touch targets are arguably some of the most important spacing elements in an interface. When a user has to try to tap multiple times on a button to get it to work, it’s frustrating and may cause some users to simply assume your UI is broken. When tappable elements are grouped too closely together, this amplifies the problem.

A touch target is the on-screen area that responds to user interaction. In general, they should extend beyond the visual boundaries of the element being tapped, as it enhances both usability and accessibility for users with certain physical impairments. Material Design guidelines recommend a touch target size of at least 48x48 pixels, while iOS guidelines specify a slightly smaller minimum of 44x44 pixels. 


Conclusion

Most layout terms are pretty common sense. Despite their simplicity, though, mastering them is vital to creating good UX. 

Knowing the difference between padding and margins, for example, allows you to make sure your design elements have the breathing room they need to stand out within your designs. While you may design these elements on an intuitive basis (or what looks best), remember how important consistency is across these specifications.

Understanding minimum touch targets (and their purpose) or how alignments can affect readability helps you create a highly functional design that positively affects the user’s experience.

These layout guidelines create a basis for good design and UX. Understanding them allows you to implement them in ways that are most effective, and also gives you a foundation for knowing when you might want to bend or break them to surprise users in positive ways that enhance their experience, rather than doing so in a way that effectively breaks your interface.

FacebookLinkedinTwitter
Author

Are you a design educator?

Enrich your educational experience with Uxcel's interactive and gamified learning platform.

Contact sales
Are you a design educator?
HIRE DESIGNERS

Hire qualified designers, guaranteed

Learn more
Skip the job hunt.
Uxcel Verified
VERIFIED TALENT NETWORK BETA

Skip the job hunt

Join Uxcel’s verified talent network. Get matched & hired by the top companies around the world.

Learn more
Skip the job hunt.