Design Principles — Alignment & Proximity
Design Principles — Alignment & ProximityAlignment 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 goes far beyond text layout though. 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 on their website a list of logos to showcase their clients. 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 the same size then some will look smaller than others and this is un-pleasanat to the eye and harder to read so to over-come this we take 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 more uniformed as a group of relational objects.
- We centre align the four boxes across the page.
- We then constrain each logo within a box by its height first and then width
- We then 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 better and provides a more 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.
Originally published at blog.conceptstore.co.uk.