The following are some tips I have found to be most impactful when either designing new, or cleaning up and modernising a user interface. These aren’t hard rules, I find that what ‘feels right’ can often better than sticking to rigid rules or systems, but these are a good guide.

1. Reduce borders

The more borders that appear in your UI, the more cluttered it feels. This is because your eyes jump all over the place following lines around and between things. Removing lines that are used to divide and surround content is one of the easiest ways to modernise and declutter. Instead of horizontal of vertical lines, use space to infer separation and relationships between elements on the screen. You can also use background colors and shadows to create edges, instead of lines. Using background colors and shadows also has the advantage of creating a heirarchy of depth and visual interest.

2. Increase padding

When text sits on a background that contains the text, such as a button, pill, form field, or alternating rows, ensure there is enough padding around the text. A guide I use is for the top and bottom padding between the text and the edge of the background should be at least half the line height of the text. This gives the text room to breath, avoiding the claustrophobic feel you get when text is too close the edge of a shape.

3. Match text and icon weight

When using icons in your interface try to match the weight of the icons to the weight of the adjacent or surrounding UI text. This is mostly important when using line style icons instead of filled icons. Don’t use thin stroked icons with bold text, or thick stroke icons with light text. The balance will feel off, so try to visually match the weight of your UI text with the icon stroke weight.

4. Reduce color

For applications, try to keep the number of colors in your UI to a minimum. The majority of the interface will be shades of gray or an accent color. You should reserve colours for emphasis, categorisation, and messaging. When there are too many colours the importance colours that need to get attention are diluted.

5. Increase contrast

Color contrast is an important tool, not only for visual accessibilty, but also to aid in the scannability of your UI. When everything appears to have the same weight, your eyes get lost and struggle to focus and scan. Ensure your UI elements have enough contrast from each other so that they are easily distinguishable.