USING
ALIGNMENT
Alignment can be used to communicate various things. Think of it as creating invisible lines that connect information together.
In order to create rhythm and movement you can use both left and right aligned content beneath it. This creates visual contrast and movement while still conveying that the ideas are related.
EXAMPLES
USING
PROXIMITY
USING
CONTRAST
EXAMPLES
Proximity is one of the easier principles to understand. You want to leave less space between items that are related, such as this text and the title above it, but put more space between items that aren't related, such as this text and the text above that describes alignment. This is a separate concept so this content about proximity is spaced farther away from the content about alignment or contrast.
When using proximity, make sure to use equal spacing between groupings to create balance and consistency. Think about how you can use proximity to emphasize contrasting ideas and do not be afraid of white space!
Contrast can be created through having big differences between fonts, colors, weights of fonts, spacing, alignments, and other things. If the differences aren't big enough, the elements will clash. Think about how you aren't supposed to wear navy with black. This is a "rule" because the two colors are so similar when they are next to each other they compete for attention. You want to use elements that will support your content by making it stand out.
Contrast helps create hierarchy. The size of the title of this section contrasts with the size of this paragraph text. If you squint your eyes on a page with good hierarchy you will be able to visually separate the important content.
​
​
EXAMPLES
USING
REPETITION
EXAMPLES
Emphasize elements that are already existing and consistent in the design. You want to use the same colors, fonts, icons, bullet points, spacing, headers, footers, etc. Repeat elements in all different locations where you need to create consistency.
For example, on this site there is one font for all of the body text and another for all of the headlines. All of the headlines are in the same style as well as the subheadlines. The same color scheme is being used throughout as well as the background images.
