Alignment in Design – Graphic Design Principles

Alignment is the positioning of visual elements so they line up, whether vertical, horizontal or diagonal and is vital to creating a clean polished look. Designers use alignment to achieve a particular look of feel of the design, and if it is used incorrectly, the design can look unfinished and unintentional. If it is used intentionally and is clear, the design can look fun and unique although you must be careful not to make it too sporadic.

The contrast in alignment can make a design look interesting and can draw the eyes of your audience to a certain element. A contrast in alignment is used a lot in text, and even when we write in notepads. Notice when you put the title of the page in the middle, and we write paragraphs against the margin on the left-hand side? That is a contrast in alignment. If you are not using a contrast in typography (bolding), a contrast in alignment will be able to separate the title from the paragraph.

If you decide to align text diagonally, this can create movement within your design and you can direct your readers eyes to certain elements on a web page like a call-to-action. Diagonal alignment makes your design seem fun and visually stimulating, it will make the text stand out.

Edge Alignment

Edge alignment is best used with shapes with flat sides such as rectangles, squares, and triangles. To align by the edge, elements are lined up with each other on the top, bottom, or side edges. Imagine there are invisible lines going along the edge of a shape, this is where the edge of the other element should sit.

Alignment in design

Notice how the windows phone has all edges of the squares aligned perfectly, including the little ones? To keep the design consistent, notice how they also used the same spacing between every element to keep it looking.

Centre Alignment

Centre alignment does what is says on the tin and means aligned in the centre of the shape. Simple shapes work best for this as it’s easy to work out where the centre point is. Centre alignment works best on verticle as we have a better sense of balance and symmetry when we see items vertically compared to aligning horizontally. When aligning text in the centre, avoid using it on paragraphs. The lack of straight lines means that each line starts in a different place and it’s more strain on the readers eyes.

Centre alignment but aligned diagonally can often be risky as it’s hard to show they are properly aligned. If you are in doubt, pop the shapes into a rectangle as this will be easier on the eye as it shows the visual connection between elements.

Visual Alignment

Using visual alignment can be a tricky one as the shapes aren’t actually aligned, they are simply placed in a way that looks like they are aligned. Line spacing is a great example on this. If you have a line of capital letters, there is nothing that hangs below the line which means there will be more whitespace under that particular line and less above it as the letters are rising above the line. Regardless of what is right on the numbers, sometimes you have to use your eyes instead of software. This can be the same with a line that has little or no descenders like the letter y, notice how the tale hangs below the line.

Visual alignment is often used when quotation marks are at the beginning of a line. The reason for this is because it looks tidier (even if it doesn’t follow the “rules) and doesn’t leave awkward whitespace in your text.

Visual Aligment Example

Experimenting with alignment is not only fun, but you can also create unique designs. By just changing the alignment, the look and feel of the design changes and it can draw your attention to other elements in the design. Others may not notice straight away that everything is lined up, but if something is out of place they will.

 

See our other post on Design Principles

Contrast in Design