Unit 1: Intro to Design
Unit 2: Figma Fundamentals
Unit 3: The Creative Process
Unit 4: Color Theory
Unit 5: Introduction to Illustrator
Unit 6: Typography
Unit 7: Layout
Unit 8: Typesetting
Unit 9: User Interface Design
Unit 10: Design Systems
1 of 2

Alignment

Alignment is the placement of visual elements so they line up in a composition. In design, we use alignment to organize elements, to group elements, to create balance, to create structure, to create connections between elements, to create a sharp and clear outcome.

Alignment in visual hierarchy communicates a sense of order by connecting elements spatially. As with chapters in a non-linear novel, imagine a square standing out of line in a graphic composition. When a single element breaks an established structure, it stands out from the composition and thereby attains meaning relative to the rest.

Alignment helps you to organize your design elements and create a visual connection and make the viewer easier to detect the most important information from your design and improve the readability of it.

Proper alignment is one of the telling signs that a professional designer crafted the interface you’re using. When you see something that is well aligned, even if you’re not consciously aware of it, you feel that you’re using an interface that was designed more deliberately.

In design there are several types of alignments.

Edge Alignment

Edge alignment is either to the left, right, top or bottom. Everything is kept on the edge.

If the edge alignment organizes elements on the left or right, it’s called horizontal alignment, but if the elements are arranged on top or bottom edge, it is known as vertical alignment.

Edge alignment, particularly left alignment, is fairly comment for large amount of text because it is easier to read with this particular alignment.

In digital design, left alignment is most common for a lot of elements while right alignment is less common because it is harder to read. In print design however, right alignment can be used for dynamic effects that emphasize a piece of information.

Top, bottom and vertical center alignments are most common in relation to two or more columns. When there is a small amount of information in one column versus a large amount of information in the next column, vertical center alignment helps to balance out the content.

If a large heading is needed with a small amount of body text in one column, bottom alignment for the body text in relation to the next column may help create more space.

If there is similar amount of information between columns and it is important to keep the top on the same eye level, top alignment may be a good choice.

Center Alignment

Center alignment as it states is aligned to a center line down the middle or across the horizontal. Take an example of center aligned text. Each text might have a different width, but each is placed just at the center of the page.

Center alignment is usually recommended for a small amount of text or graphical objects such as photos, videos and illustrations.

Alignment is often an invisible line visual elements are aligned to but can also be hinted at physically. Alignment can be used to achieve a particular look and feel. We should always be conscious when working with alignment to achieve the intended result.

Mixed Alignment

Alignment is not “all or nothing”. In most design, there are multiple alignments throughout the page. It is a designer’s job to experiment and judge which alignment is best for the content.

If mixed alignment is intended as part of a design, it can appear more radical, dynamic, free and playful.

In these examples, alignments are not traditional. We can see a lot of vertical alignments in the first design; slanted alignments that seemingly confirm to a geometric shape in the second design and again, slanted and diagonal alignment in the third design.

However unconventional these alignments are, they are not haphazard and unaligned. We can clearly find focal points in these design and recognizable patterns in how information flows.

Mastering alignment is arguably one of the most crucial part of your design career. Next time you lay down an element on a blank canvas, don’t just drop it anywhere – ask yourself, what alignment will I use for this element and how will it serve the purpose of the content?

Scroll to Top