16 little UI design rules that make a big impact

User interface design is hard. With so many options to choose from regarding layout, spacing, typography, and colour, making design decisions can be overwhelming. When you add usability, accessibility, and psychology to the mix, it gets even harder.

Luckily, UI design doesn’t have to be so hard. Over nearly 2 decades working as a product designer, I’ve realised that most of my visual and interaction design decisions are governed by a system of logical rules. Not artistic flair or magical intuition, just simple rules.

Having a system of logical rules helps you efficiently make informed design decisions. Without a logical system, you’re just using gut feeling to move stuff around until it looks pretty.

I love rules and logic, but design decisions are rarely black and white. Rather than strict rules that you must follow, think of the following advice as helpful guidelines that work well in most cases.

The quickest way to learn is by doing, so let’s get started.

Let’s fix the problems with the original design one at a time using the following logical rules or guidelines:

1. Use space to group related elements
2. Be consistent
3. Ensure similar looking elements function similarly
4. Create a clear visual hierarchy
5. Remove unnecessary styles
6. Use colour purposefully
7. Ensure interface elements have a 3:1 contrast ratio
8. Ensure text has a 4.5:1 contrast ratio
9. Don’t rely on colour alone as an indicator
10. Use a single sans serif typeface
11. Use a typeface with taller lower case letters
12. Limit the use of uppercase
13. Use regular and bold font weights only
14. Avoid pure black text
15. Left align text
16. Use at least 1.5 line height for body text

Recent articles

• 16 little UI design rules that make a big impact
• UI design books you should read in 2023
• UX design books you should read in 2023
• Button design tips to avoid common mistakes
• How NOT to design a volume control interface