Principles of Design: Alignment

2018-11-20

Alignment is the principle of design used to create structure, organization, and improve readability. The effects of alignment are often subtle, but it can be the difference between a polished and unpolished design. 

Introduction to Alignment

Alignment can be easy to overlook because its often invisible. In the first lesson of this course, we discussed how unity was the end goal of UI Design. Alignment helps us to create a sense of unity by providing structure and connecting elements in a subtle, yet powerful way.

alt text

In this lesson we’ll cover the different types of alignment and how to use them in UI Design.

Vertical and Horizontal Alignment

It’s easy to confuse horizontal alignment and vertical alignment because they are both defined the opposite way you might think. 

Vertical Alignment

When the center, top, and/or bottom of elements align on an invisible horizontal line, you create vertical alignment.

Vertical Alignment

Vertical alignment gets it name, not because of the invisible horizontal lines, but because of the vertical space within the element being aligned with another. One trick to remember this is to think of the direction you go when drawing a line from top to bottom.

It’s not always necessary or possible for a row of elements to be vertically aligned by their tops, bottoms AND center. In many cases, your elements will have variable heights and you’ll have to decide which of these makes the most sense.

Top or Bottom Vertical Alignment

When the heights of two or more elements are drastically different, it might make sense to vertically align them by their tops or bottoms. 

In this example we have a top vertical alignment on the main body section and the sidebar. 

Top Vertical Alignment

In the example above, notice how both containers and their headings are aligned to establish a connection between both elements.

Centered Vertical Alignment

In cases where an element’s height may vary, but not drastically, it might make more sense to vertically align them across the center.

Centered Vertical Alignment

In the example above, we have a centered vertical alignment for each of the navigation elements in the header.

Horizontal Alignment

When the center, left side, and/or right side of elements align on an invisible vertical line, you create horizontal alignment.

Horizontal Alignment

You can remember horizontal alignment by thinking about the direction you go when drawing a line from left to right.

As with vertical alignment, you do not necessarily need to align the left, right, AND center of elements to have horizontal alignment. There are many cases where just one of these is sufficient.

Left and Right Horizontal Alignment

When designing a layout, the easiest way to ensure left and right alignment is to establish a max-width for all of your content in the very beginning. This invisible box will ensure your elements are aligned whether they are pushed to the left or right side.

Left and Right Horizontal Alignment

Centered Horizontal Alignment

Centered horizontal alignment can be useful when you have a single element in a row. The most common use case for this in UI design is with call to action text.

Centered Horizontal Alignment Text

In the majority of cases, however, text should be aligned to the left (if your audience reads from left to right). Left alignment helps the eye jump from one line to the next in a predictable way. Readability begins to decrease with centered or right alignment after a few lines of text, so it’s good to be mindful of this when designing.

Media Object Alignment

Media objects are a very common UI pattern, but with variable width icons, it’s easy to end up with misalignment. One tip for media object alignment is to center align your icons and left align all of your text, like in the example below.

Media Object Horizontal Alignment

Notice that in this particular case we are aligning like items with like items. Although the fourth element has no icon, it remains left aligned with the text above. 

Edge Alignment

Edge alignment occurs when we create vertical and horizontal alignment from one or more corners.

Edge Alignment

By anchoring elements in each corner it’s easier to guide the eye from one element to the next. 

Optical Alignment

In some cases, top, bottom, left, right and center alignment is not the answer. You’ll often run into cases where elements are aligned perfectly, but do not appear to be due to the uneven distribution of visual weight of an element. 

In these cases you’ll have to use your eye and adjust the alignment according to what looks best.

Optical Alignment

In the example above, the left icon is centered vertically and horizontally within the circle. However, the bottom of the icon is visually heavier than the top. The right icon has been optically aligned within the circle to appear more balanced. 

Conclusion

Alignment makes a design look clean and polished. It helps to give your design organization and structure. There are several types of alignment, and some are more appropriate to use than others, depending on the circumstances.

Next Lesson
Principles of Design: Hierarchy

Previous Lesson
Principles of Design: Balance

Principles of Design

  1. Lesson 1: Unity

  2. Lesson 2: Balance

  3. Lesson 3: Alignment «

  4. Lesson 4: Hierarchy

  5. Lesson 5: Emphasis

  6. Lesson 6: Proportion

  7. Lesson 7: White Space