User interface

Use consistent alignment

With inconsistent alignment, designs can look messy and unstructured.

Don't change your alignment randomly

I've seen this in quite a lot of designs as an instant item where I can give design feedback. In some designs, a designer will have a mix of left-aligned and centre-aligned content (not so much right-aligned content). I typically find one choice of alignment is better. Look at the heading and text of this paragraph for an example.

If there is a difference in alignment between elements, it can make designs look unstructured and messy. Note that consistent alignment isn't for every use-case, but in the majority of designs, consistency is key.

Use a grid

By using a grid, it will force to you stick to some constraints in your design. By using a grid, it will give you an invisible structure that your content will follow. Grids will naturally help you with alignment and consistency.

Make it easier to read

By having consistent alignment, it makes it easier for a user to get used to the alignment. By keeping this form of consistency, you're making it easier for a user to read. Why do you think books use consistently aligned text? So your eyes know where to jump to on the next line.

Keep similar patterns consistent

In my example at the top of the page, you will see a bad example on the left. There was no reason to make those buttons aligned differently, but it is a mistake some designers make. By having similar UI patterns, some feel a need to make them different. Don't make them different.

Final thoughts

I'm going to sound like a broken record, but the key to this is keeping consistent. If you're consistent, it will naturally help your designs. This isn't a hard and fast rule, as you'll see that I break this convention on this site as well. Just know there is a time and place to use this tip, and you should be the judge of that.

Subscribe

If you found this tip useful, consider subscribing with the form at the bottom of this page. If you didn’t find this useful, let me know what I could have done better at callum@uiuxtips.com.