Alignment is one of the elemental graphic design principles, and sometimes this concept is hard to grasp for some beginners. In this article, you will become familiar with these fundamental rules understandably and straightforwardly so that every designer, no matter their knowledge level, will master this topic.
Effects of Alignment
If we want our lives to run smoothly and avoid chaos, we need to bring order every day. That’s why even the most trivial things like car parking have to follow the alignment principle.
Let’s explore this theory a bit further. Suppose the vehicles are positioned all over the place. In that case, the whole parking area can only be filled with a relatively small number of cars. On the other hand, if all vehicles are parked neatly in between the parking lot strips, we can fill the area to the last gap.
You might think this is a »silly« example. Still, like some people ignore the parking lot stripes, many designers overlook this essential alignment principle in their design process.
However, every skilled designer knows that the appropriate use of alignment gives you an overall sharper and more organized-looking design.
Moreover, align theory is nothing else than the correct position of design elements that create a balanced visual connection. Even if you’re planning to place items randomly across the canvas or page, the use of these rules will make them look harmonious.
The exciting part of alignment application in design is that the viewer won’t notice it because it creates an invisible connection among all the pieces. Yet as soon as you break this rule, every Tom, Dick, and Harry will see that the things are not where they are supposed to be.
Furthermore, alignment is a technique that helps you create unity and provides a well-framed structure and composition throughout the design.
That’s why the principle of alignment is the foundation for every designer and visual artist who wants to create a state-of-the-art design.
Now, let’s explore the main five align principles and their subcategories.
Principles of Design Alignment
Different types of alignment can be used for both text and other design elements. In contrast, some styles are unsuitable for longer content and should be used for other visual blocks.
1. Edge Alignment
It is a form of alignment which applies to the edge of the layer, page, or canvas. Various design forms are positioned to the top, bottom, left, or right side.
• Left Edge Alignment
As the name indicates, the elements are aligned to the left edge, and it is one of the most common and known types of alignment.
You’d use left alignment everywhere you’re dealing with a longer text body. That’s why most books, magazines, and even web pages use it. When you use this alignment, it’s advisable to have the heading aligned to the left.
• Right Edge Alignment
The opposite of the left is right edge alignment. This type is inappropriate for longer content. As a result, this alignment is best used for some shorter texts on the posters, flyers, and contact information on the backside of the business cards.
Compared to left orientation, the elements placed on the right are usually more unnoticeable by the passer-by. So have this in mind when arranging different design components to this edge.
• Top Alignment
In this case, we put design elements to the top of the canvas or page. A perfect example of this kind of alignment is a website navigational menu.
In print media, this type is applied to the headers of the memorandum.
• Bottom Alignment
Like the top alignment, this kind is helpful when making websites and apps. That’s where you store navigation or different pieces of information that are unsuitable for the main menu.
2. Center Alignment
This type of alignment sets different design parts to the middle of the design area, whether a canvas, page or layer. Center alignment is inappropriate for longer texts because it affects readability.
There are two subtypes of central alignment:
• Horizontal Alignment
We can talk about horizontal alignment when you align design elements to the center, left, and or right side of a vertical line.
You do not need to align elements to all three of the mentioned position, but setting design components to only one arrangement is enough.
As mentioned earlier, this type is not suitable for longer texts. Still, this alignment type works the best for segments you’d want to highlight.
• Vertical Alignment
Elements are vertical alignment when their center, top, and or bottom is positioned across the horizontal line.
In many cases, design blocks have variable heights; that’s why it would be impossible to align them on all three positions – top, bottom, and center.
In this case, you can align components to only one of the mentioned positions. Use your esthetic sense and align the elements to suit the design in the best way possible.
Pro Tip:
It’s pretty easy to mix up horizontal and vertical alignment because the terms are contradictory. To make things easier and to firmly grasp these two concepts, draw a top and a bottom horizontal line and place the elements from the top to the bottom one – you’re putting them vertically and thus creating a vertical alignment.
For horizontal alignment, create two vertical lines on the left and right side and put the elements from one side to another – you’re horizontally positioning them between the two vertical lines.
3. Visual or Optical Alignment
In many cases, the result of metrically aligning things might seem a bit off. Consequently, you must precisely position them with your visual feeling. The most common situation when you’d use optical alignment is when you’re dealing with a design item inside another, plus you want to center them both.
If you check the marks, it will say that both elements are centrally aligned, but the result will look imprecisely made to the eye. This imbalance in the alignment happens since the visual weight distribution is out of order.
One of the best examples in this regard is when you’re placing different elements in a circle.
When creating your designs, be sure that you trust your sight. If something looks out of alignment, it probably is, even if your design software says differently. Therefore use your gut feeling and position the parts so that they perceptibly look perfectly aligned.
4. Media Object Alignment
This type is used in cases where you have mixed media elements such as icons and text. The important thing here to remember is to use the exact alignment for the same items. So if you’re designing a layout where you’ve put the icons in front of the text, be sure to use center alignment for them and left for the content.
If you’d use left alignment for the icons, you would see that they look out of balance. The reason for that is that they have different widths, and the correct way of positioning them is with a center alignment.
5. Grid Alignment
Grid is more of a sophisticated alignment type. It is created with multiple vertical and horizontal lines on which you can assign the different design forms. You can create a grid so that spaces between the rows and columns are in various sizes. Setting multiple elements across the grid gives your layout a more dynamic appearance.
There are numerous options for setting up a grid, and one of the more unique ones is the Golden Canon Grid made by Adrián Somoza.
Moreover, unleash your creativity and use different edge alignments across the elements to make the whole layout even more visually appealing.
Nowadays, you can easily set up a grid in every graphic program. You simply enter how many vertical and horizontal lines you want your layout to be consisted of, insert the number of spaces between them, press enter, and you’re done.
Final Words: Principles of Design Alignment
I’ve compiled the elemental principles of design alignment in this article and covered the most common ones in an easily understandable language.
The proper alignment makes a design in order and professional looking. It is one of the first things that every designer should consider before creating their artwork.
You can explore my other Layout articles here.
