When creating efficient, and beautiful UIs for your next project sometimes it takes only the smallest adjustments to quickly improve the designs you’re trying to create.

Just simple tweaks is sometimes all it takes to produce something that your clients, users, and yourself are truly happy with.

In this article, I’ve put together a collection of my most popular UI & UX tips from the past few months that can, with little effort, help improve both your designs and the overall user experience.

Let's dive on in...


01.

It’s OK to use purely decorative elements from time to time, but keep things accessible.

Yes. The majority of text content on the screen should adhere to usability best practices. No questions asked.

But. There are times when you want to add text purely for decorative purposes, and that’s all good. We don’t want all of our designs falling into the realms of bland-land.

It’s OK to pop in the odd element purely for decorative reasons as long as not having that element there at all would affect the user experience in any way.

When using decorative elements that are purely visual and not important to the user experience make sure to call on those ARIA Roles such as aria-hidden=“true” when it comes round to Development.

Using the aria-hidden attribute.

Click Thumbnail to Enlarge

02.

Make elements in your UIs distinguishable from one another.

Buttons. Notifications. Two separate but essential elements in your UIs.

If you can, always try and make sure that your users can tell them apart quickly and easily when scanning your site or app.

Buttons, in most cases, will take priority, so make sure they’re the most prominent item on the screen and easily distinguished between other elements (i.e. notifications).

Click Thumbnail to Enlarge

03.

Just subtle amounts of shadow are all you need.

We all love a good drop-shadow from time-to-time right?

They can serve as subtle but powerful visual cues within your designs when used in moderation.

But. Subtlety is the name of the game here.

Shadows in the real world are, the majority of the time, almost unnoticeable, and so you should mimic this kind of behaviour in your UIs.

Lay off the heavy and dark shadows, and dial down the opacity to achieve something a little more subtle and lifelike.

Click Thumbnail to Enlarge

04.

Using All Caps? Choose a font suitable to achieve optical clarity.

Using All Caps in moderation within your designs is all good.

Applying All Caps to certain text elements can help you achieve some variety, and contrast between other text elements in your design and enhance the overall visuals you’re trying to present.

If you decide to style things up with a handy dose of All Caps, try and make sure you choose a suitable Typeface with a tall x-height and in a heavier font-weight to enable optical clarity for the user.

Click Thumbnail to Enlarge

05.

Make Breadcrumbs stand out and easy to interpret for the user.

Breadcrumbs, breadcrumbs everywhere.

Used frequently on content-heavy sites, but not always shown the love they deserve.

With the smallest of tweaks, you can make sure that the user can quickly pinpoint where they are in a site and where else they may need to go.

This is especially useful if they’ve jumped to somewhere deep in a site via the use of Search for example.

Always try and make sure that the last item in the chain is visually different from the rest. And the links, well, try and make them look like so.

Give breadcrumbs some love.

Click Thumbnail to Enlarge

06.

Using highly saturated colours? Try and tone things down with a Tint or Shade.

Highly saturated colours (brilliant blues, reds, greens etc.) can look great on a site, but when overused, they can be tiring for the user’s eyes, mainly when used with text-heavy content.

Use them in moderation when you can, and try to combine with muted colours (a tint or shade variant) of the saturated colour to avoid that dreaded eye fatigue.

Using this method can also direct attention to the saturated colour and make the most important content front and centre, with the more muted colours taking a less prominent role and giving your user’s eyes a little rest.

Always remember though, that readability and accessibility should be the top priority when choosing colours.

Don’t forget to reach for a WCAG colour contrast checker such as Contrast when you’re looking at trying out colour alternatives.

Click Thumbnail to Enlarge

07.

Use established icons in your UIs to avoid confusion for the user.

When adding icons to your designs, try and choose an established icon that represents the action that’s about to be taken.

Choose an icon that conveys the correct meaning and functionality, as anything else invites confusion and becomes a cognitive obstacle for the user.

Don’t be too rebellious with those icons.

Click Thumbnail to Enlarge

08.

Use Proximity to signal relationships between elements.

Among the many tried and tested Design Principles available (Contrast, Space, Repetition etc.), there is one that is key in helping you produce clearer UIs for your users.

Proximity.

Proximity is simply the process of ensuring related design elements are placed together, signalling a relationship between one another, which helps speed up the user’s cognition when scanning through your Site or App.

Click Thumbnail to Enlarge

09.

4pt Baseline Grid + 8pt Grid = Harmonious Vertical Rhythm.

When working with Type, using a 4pt Baseline alongside the ever-versatile 8pt Grid can bring a much more harmonious vertical rhythm to your designs.

You need to align your Type to a Baseline Grid of 4, using a line-height value that is a multiple of 4 (16, 20, 24, 28 etc.)

Why 4? Well, I’ve found that scaling in multiples of 8 in the past is just not as versatile when working with specific text sizes.

4pt Baseline Grid + 8pt Grid = Sweet Vertical Harmony.

Click Thumbnail to Enlarge

10.

It’s all good to reduce the line-height on your Headings.

As opposed to the long-form body text, which needs ample line-height for increased legibility, headings are usually much shorter, so you can ease back on the spacing a little.

The recommended line-height for headings is usually around 1 to 1.3 times the size of the text, and the larger you go, well, the less line-height you need to add to the mix.

Go line-height-light with your Headings.

Click Thumbnail to Enlarge

11.

Having trouble picking a colour scheme? Go Analogous on the Colour Wheel.

Analogous colours, also referred to as adjacent or neighbouring hues, are among the most harmonious of colour schemes and can help you greatly if you’re having trouble picking colours that play together nicely.

A set of adjoining hues consisting of primary, secondary, and tertiary colours can help you create a simple, bulletproof colour scheme quickly.

Go Analogous when you need to bring colour harmony into the mix fast.

Click Thumbnail to Enlarge

12.

Try and maximise the Signal-to-Noise ratio in your designs.

You can achieve clarity and usability within your designs by maximising the signal and minimising the noise, which in turn produces a high signal-to-noise ratio.

You can accomplish this by ensuring that relevant information (signal) is presented efficiently, and irrelevant information (noise) is reduced or removed altogether.

Cut out the fluff. Make things clearer. Increase your signal-to-noise ratio.

Click Thumbnail to Enlarge

13.

Want to speak in a more informal tone? Try going all lowercase.

Using a heavier font-weight and caps can come across a little formal and shouty occasionally.

Try choosing all-lowercase and a lighter font-weight.

Using something like all-lowercase copy can present a more informal, and approachable message when working on specific projects.

Always remember though to use some kind of colour overlay between the image and text to achieve a stronger contrast.

Click Thumbnail to Enlarge

14.

Use weight, size, and colour to indicate hierarchy within your type.

When working with type, elements don’t need to scream “Look at me!” all the time.

But they do need to have a balanced hierarchy in place.

Just subtle adjustments via weight, size, and colour are all it takes to achieve this.

Doing this allows the user to scan and find essential elements, avoiding any confusion in the process.

Click Thumbnail to Enlarge

15.

Light Text on dark? Fatten up that font-weight for the best legibility.

When setting dark text against a light background, you can, occasionally, opt for a lighter font-weight.

But…

When it comes to the reverse: light text > dark background.

It would be best to look at fattening up the font-weight a little, especially for long-form copy.

Aim for the best legibility, and avoid straining your user’s eyes.

Click Thumbnail to Enlarge

16.

Create the right emotional response with your typeface choices.

Try to choose the appropriate typeface for the content you’re presenting.

Users are savvy and have an intuitive sense when content is talking to them and when it’s not.

The correct choice of typeface is vital in making your content speak to them directly and on an emotional level.

Click Thumbnail to Enlarge

17.

If you (have to) use multiple typefaces, try to stick to the 2 max rule.

For me, I try to stick to the 1 Typeface rule whenever possible.

But.

If the project demands it, I recommend maxing out those typeface-combos at 2.

No more.

Combining typefaces well can be tricky for the inexperienced.

Go easy on yourself, and don’t just add another typeface just because you can.

Using a maximum of 2 and a combination of weight, size, and colour can bring instant visual harmony to your designs.

Click Thumbnail to Enlarge

18.

All-Uppercase + Letter-Spacing = Better Legibility.

Are you working with short lines of text in all-uppercase?

Well…

It’s a good idea to increase the spacing between those letters to achieve better legibility for the user.

Doing so makes the words easier to read and process because the letters are more distinguishable from one another.

Just small increases in spacing between letters are all that’s needed to improve legibility and add a touch of polish to your uppercase type.

Click Thumbnail to Enlarge

By the way, did you know you can create stunning UIs with my Design System; Cabana for Figma & Cabana for Sketch.
Special Offer: Please use the code CABANA35 to receive 35% OFF. ENDS SOON.

Thanks for reading the article,
Marc Andrew.

Discover 21 Quick, and Easy Tips to help you improve your designs today!

Subscribe below to download my FREE Cheatsheet of UI & UX Tips, and also receive Regular UI & UX Articles, and Tips straight to your Inbox.

UI and UX cheatsheet cover

Privacy Preference Center