15 Great UX & UI Tips for Designers

Creating beautiful, but also practical UIs takes time and experience, with a lengthy amount of design revisions and fedback along the way. We all been there before.

So, to help you, fellow designer we’ve put together a collection of UX & UI tips that can, with little effort, help improve both your designs, and the overall user experience.

1- Make your elements appear more defined with a subtle border

Using Multiple Drop Shadows or a very subtle border around certain elements can make them appear a little sharper, more defined, and help you avoid those blurry-looking shadows.

2- Reduce Letter-spacing on your Headings to give a better optical balance

Reducing Letter-spacing on long-form Body text? That’s a big no-no! Your Headings are most likely going to be much larger, and heavier than their body text companions, so the spacing between the letters can sometimes appear optically larger, which is not always what you want when you’re looking for that perfect aesthetic.

3- Make sure your icons share the same visual style

When implementing Icons in your UIs, keep things consistent. Make sure they all share the same visual style, the same weight, and either filled, or outlined.

4- Whitespace is your UI design friend

Good old Whitespace, Negative Space, you know the one. Use it generously, or in moderation, but use it well.

Even just subtle amounts of the white stuff can allow your designs to breathe, and look more polished.

5- Use a Type Scale to define a harmonious set of font sizes

As the name suggests, a Type Scale works based on a scale factor (say 1.25). The idea is that you start with a Base font size (18px) and multiply (or divide) it with the scale factor to get font sizes of either a higher (ie; H₁, H₂, etc…), or lower hierarchy

6- Choose a Base Colour, and then use Tints & Shades

If the project allows it, simply using a restricted colour palette by choosing a Base Colour and then using Tints and Shades of your chosen colour can add uniformity to your designs in the simplest of ways.

7- Improve your user’s onboarding experience

Enable users to skip your Mobile App Onboarding sequence at any time, and place that Skip link within easy thumb reach. Just a simple adjustment that can enable a much better experience for your users… right from the start.

8- Your shadows are coming from one light source right?

Make sure your shadows always come from just the one light source. It’s a simple mistake to make, but one that can leave your designs looking less than polished.

9- Improve contrast between your text and images

Depending on where the text may be positioned over your image, you can either go with a tried, and tested full image overlay, or a more subtle gradient overlay to achieve a simple contrast between the two elements.

10- Darken up your text on light backgrounds

Don’t make your text too light when working against a light background. It can look like all the cool kids are doing it, but you’re much smarter than that, and want to create much more accessible interfaces right?

11- Lighten up your text if it looks a little heavy

When it comes to long-form content, certain Regular weight Typefaces can still look a little too heavy, and stark on the screen.

You can easily fix this by choosing something like a Dark Grey (like #4F4F4F) to tone that text down, and make it a little easier on the eye.

12- Always make your ‘Call to Action’ prominent

You think this would be common-sense right? Erm. Not always I’m afraid. Make sure that ‘Call to Action’ is as prominent as possible, via the use of colour contrast, size, and labels.

13- The smaller the font size, the more generous line height

As your font size decreases, increase the line height for better, all-round legibility. The same applies to when your font size increases. Simply Decrease the line height.

14- Colour-pick from your images

Simply colour-picking from your product images, and then applying various tints and shades of your chosen colour to your background, text, icons or more, can add plenty of visual interest, and character to your designs.

15- Keep the contrast ratio acceptable

Always make sure light text is legible against, well, lighter image backgrounds. Simply applying a slightly opaque darkened background behind your text will keep a good contrast ratio between those elements.