Alignment is one of the most important features in design in that it adds to the organization and usability of a web page. Even with all other elements in good condition, such as a great use of color, effective use of typography, and visually appealing balance, a bad use of alignment can make a website layout look cluttered.

While most designers understand this principle, many don’t see that they’re not achieving it effectively. I will go over the basics of alignment in this article, but also be sure to use specific examples and ideas for designers who have a grasp of alignment, to achieve an even better understanding.

Get More Detailed Alignment

Alignment in web design means everything from the bigger elements, such as the header, content, navigation, and footer, to the inside elements, like paragraphs, ads, text headers, and images.

Most often times a designer will forget about the smaller elements that go within the large sections of a web layout. This is perhaps the biggest alignment mistake. If you read articles on design processes, you will see that one of the steps is always creating a mock-up just containing the core features of the layout. When doing this, though, most designers aren’t thinking of spacing, paragraphs, images, or other smaller elements. This, many times, creates an end result that does not look aligned as well as the original mock-up did.

There is an easy way to fix this, that requires a bit more effort on your part. This bit of extra effort can go along way, and create a much better ending design. In future mock-ups, try adding more detail, from the sample on the top, to the result on the bottom.

Notice how the bottom example adds a greater sense of alignment, because we’re using more elements to align to. By paying attention to the smaller elements in a website, you can create a greater visual appeal.

The bottom mock-up could be improved even more by adding in the actual feed icons, header image, and dummy text. While my example may be the quick way to get by, the more detail you add while paying attention to alignment only, the better the result will be.

Images in Alignment

An aspect of alignment that most designers miss is that an image can align with elements on the web page, using the lines, shapes, and contrasting colors of the image. Let’s take a few example header images below and find their alignment points.

As you can see, there are many areas in the above image to align with, if it were to be used as an element of a web page. One of these points of alignment is the corner of the walls, and the rest are various boundaries of the chair. If we were to use the sample layout above, we could think about how to align the RSS & Atom feeds, Twitter icon, and search bar appropriately with the boundaries of this header image.

If a landscape image were to be used in a website layout, this would be a good example of points to align with. The horizon is always a must, and in the case of this image, the top of the mountains, borders of hills, and edges of the trees would also be great alignment points.

Good Uses of Alignment

Note in the examples below how these designers used images, color contrast, and features of their respective websites to create an interesting and effective use of alignment.

Conclusion

It seems like a lot of work to go through for what seems to be such a small effect. Alignment, however, is a natural thing we see, and the proper use of it can create aesthetic beauty for all viewers. Not enough attention to alignment can make or break the beauty of a website design.

I’d love to see some more examples of great alignment, please share them with me if you find any!