Design is full of “invisible forces”, all of which help with clean and clear communication. As much as you may be tempted to obsess over getting just the right font, or picking just the right combination of colors, your design will fail miserably if you don’t pay attention to these invisible forces.
This is the first in a three-part series about these forces, so let’s begin with alignment, direction, and focus.
Introducing the “Elements”
To really think through the invisible forces of design, you need to stop thinking of your design as fonts, colors, images, and text, and start thinking of all of these things as “elements”.
Each of your headings is an “element”, each paragraph of body text is one big “element”, and each image is an “element”.
Within each of these elements is another element–you might also call them “sub-elements”. Your logo might have a “symbol” element, and a “text” element. And each letter in the text portion could be considered its own element.
All of this element talk is making me think of chemistry class (which I never took), but that's actually appropriate. When you arrange elements correctly, you get something explosive that jumps off the page. When you arrange them haphazardly, you get a dud.
Alignment
Design is challenging because you have to take a boring two-dimensional space, and make it interesting, while communicating clearly. Especially today, with tiny mobile and wearable screens, it’s important to do this as efficiently as possible. Every little pixel needs to be doing its job.
This is why alignment is so important. By aligning elements with one another, you can say a lot.
For example, these squares are all aligned.
And if we change the way they’re aligned, it changes the composition completely.
And if we break that alignment, it looks chaotic.
If, instead of squares we use social media icons, you can directly see how alignment becomes useful. What if these social media icons:
Instead looked like this:
Direction
When you align elements, you create a sense of direction with an imaginary line. Really fancy designers call this imaginary line an “axis”. Think of it like an axis on a wheel: all of the weight of the wheel spins around that axis. It has to be balanced. Similarly, an axis helps control the balance of a composition.
See all of these elements that are lined up? You could call them an axis on this composition.
If you align other elements near that axis, it still dominates and controls the composition.
Your grandpa was right: you have to be careful with your axes. For example, avoid mixing center-aligned text with an “asymmetrical” composition.
However you arrange your text: centered, flush left, or flush right (avoid justifying type on the web), you create an axis along that alignment.
When you center text, you create an axis, and all of the weight of the text is spinning around that axis. The rest of the composition wants to be centered around that axis as well.
So, if you throw some flush left text next to that centered text, the composition starts to get confusing. Now you have two axes that are fighting each other, and isn’t that a scary thought?
The exception to this is when a center-aligned element spans the width of the composition, and flush left or flush right elements are within that composition. Then the axes aren’t fighting each other.
Notice both columns of content are set flush left.
This is a pattern you see commonly in mobile design. In this screenshot of the Yelp app, the top and bottom menu bars have a centered orientation, while the rest of the screen is set in flush left.
Or, you could create an axis out of the gutter by making one column flush right, and the other column flush left.
Focus
So far, I’ve concentrated on vertical axes. You can have horizontal axes, too (or diagonal, but that will be rare in web and mobile design).
When two strong axes cross, you’ll generally create a focal area. The eye naturally follows any strong axis, so if two axes intersect, the eye will spend a lot of time at that spot.
At any given moment in a web or mobile design, there’s likely something that you want your user to be concentrating on, so you can use axes intersecting to draw attention to that spot, such as in this landing page:
The flush left text creates one axis, and the alignment of the “buy now” button with the image creates another. Where they intersect, it has created a focal area.
Conclusion
By using alignment to build axes, control direction, and establish focal areas, you can better meet your design goals: whether it’s enhancing readability, or driving a conversion.
Stick around for my next article, where I’ll talk about how you can adjust the sizing of your elements to make designs that are harmonious, beautiful, and clear.
