Principles of Website Design: Alignment
A good-looking website is one that just “feels” cohesive – like it’s all pointed in the same direction, or telling a consistent story from page to page. Part of that consistency is due to consistent alignment. Things don’t have to all be in a single column aligned to the left to be technically aligned, as we’ll discuss how balance can lead to alignment even when things aren’t symmetrical.
Over the course of four blog posts, we’ll explain the fundamental principles of great design: Focus, Alignment, Repetition, and Contrast. You’ll take away design concepts you may not know about, or ways to use them differently to make your brand consistent across the whole website. And if you’re ready to see how our professionals can transform your site into one that captures leads with excellent design, we’re just a phone call away.
A major player in how people focus and follow content on your website is how certain things are aligned. Whether you want something classic, squared-off, and contained or purposefully all-over-the-place, your content can be aligned with your brand as long as you understand how this principle works.
In general, things can be horizontally and vertically aligned; left, center, and right; top, middle, and bottom. You might think that the most “balanced” approach would be to place everything directly in the center and spreading out evenly to all the edges, but this is what separates amateur design from great design. Great designers know that alignment helps people emphasize important things, rather than place everything on equal footing of importance.
For English speakers, we have a strong bias toward left-aligned text, as it gives our eyes a clear starting point, since we read from right to left. This means that things to the left are more important, in general, than things to the right for people writing and reading English text.
However, alignment can create distinct impressions when the rules are understood and broken in specific ways. This is where balance plays into alignment, since elements of design such as photos and text boxes can be technically misaligned from left to right, but still have balance among themselves.
Symmetrical balance in website design is functionally visual balance between the left and right parts of your screen. As long as the text box is the same width as the photo next to it, for example, you have symmetrical balance.
Unfortunately, symmetrical balance, while easy to achieve in many senses, can become boring for people using your website. With symmetry comes monotony, and no matter how compelling your content or dramatic your visuals, the human eye and brain are looking for changes in pattern to stimulate their attention. That’s where asymmetrical balance can help.
Picture an old-timey scale with flat plates on both sides of a pivot point. You can put one heavy object on one side to balance several smaller objects on the other. The same principle applies to the alignment of content on a website. Your page doesn’t have to be a single layout of one element at a time, or even split into rows of two equal boxes. It can have a flow to it with large elements interrupting smaller, piecemeal boxes of text, for example.
Great designers know that asymmetry is a recipe for creativity, and website users will recognize a stale, formulaic approach compared to one that is designed to engage them in multiple ways.
As experts in design and development, the team at DLM is here and ready to give your website the refresh it needs to look relevant in the most recent trends in design, and to enhance your brand to drive more leads to your practice. We have designed and launched websites for practices all across the country, and are able to customize your site to achieve the goals that are important for you. Call our team or contact us online today to get started.