Design Principles – Alignment & Proximity

As a principle of design, Alignment refers to the position of an object or group of objects within a page or group.

Aligning objects
Text is tightly aligned left within a set space| Black image box is aligned right with the same set space

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
Alignment and proximity used to create two relative columns and a third concluding column

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.

alignment with logos
Un-aligned logos

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.

Aligning logos and resizing logos to the same size
Aligning logos and resizing logos to the same size

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
Aligned logos individually
The four boxes are justified and the logos are vertically aligned within the box height.

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.

Creatively aligned
Creatively aligned

Some call alignment and proximity the invisible lines but as a design principle it is up to you to utilise it creatively.

1 Comment

Leave your comment

Subscribe for top tips on Branding, Marketing & Design