As a principle of design, Alignment refers to the position of an object or group of objects within a page or group.
Typically we deal with alignments in relation to text display where you can align paragraphs in either “left, centre, right or justify” positions by using their edges to align.
This also applies to objects and more specifically groups of objects which introduces the idea of proximity.
The idea is to use alignments within a design to create a relationship between objects and maybe create groups of objects which will have relationships with each other aka the principle of proximity.
Alignment and proximity go far beyond text layout.
Sometimes you have to get creative with the rules to make something look good. Here’s an example:
Let’s say you or a client want to display a list of logos on a website. This is a problem because logos come in all shapes, sizes and alignments of their own.
Grouping together a bunch of individual logos is pretty much setting you up for a messy display but by using alignments we can make it look a lot better.
If we resize all the logos to fill a specific space then some will look smaller than others because each one has a different layout format (portrait, square or landscape).
It creates an unpleasant image to the eye and each logo is harder to read.
To fix we get creative with alignment.
By using alignment rows, columns and boxes as guides we can set these individual objects to a specific alignment so their display is uniform as a group of relational objects.
- We centre align the four boxes across the page.
- We constrain each logo within a box by its height first and then the width.
- We vertically
center align each logo within its box
Keeping all the logos the same size looks good but keeping them in proportion to one another looks even better and provides a professional finish by way of alignment and proximity.
Some call alignment and proximity the invisible lines but as a design principle it is up to you to utilise it creatively.
