Design Tips

8 (more) tips to help you quickly improve your UIs

In this follow-up article, I've provided you with another set of easy-to-implement UI & UX micro-tips to help quickly improve your designs.

Marc Andrew
Jul 16, 2020
3 min read
Photo by Nubelson Fernandes / Unsplash

Creating beautiful, usable, and efficient UIs takes time, with many design revisions along the way. Making those constant tweaks to produce something that your clients, users, and yourself are truly happy with. I know. I’ve been there many times before myself.

But what I’ve discovered over the years is that by making some simple visual tweaks you can quickly improve the visuals you’re trying to create.

In this follow up article, I’ve put together a small, and easy to put into practice, selection of tips that can, with little effort, not only help improve your designs today, but hopefully give you some handy pointers for when you’re starting your next project.


Lighten up your text if it's looking a little too heavy.

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

Easily fix this by opting for something like a Dark Grey (ie; #4F4F4F) to make that text a little easier on the eye.

Example of dark coloured text alongside lighter coloured text

The smaller the font size, the more generous your line height needs to be.

As your font size decreases, increase the line height for better, all-round legibility.

The same applies to when the font size increases. Simply decrease the line height.

Example of blocks of text with varying line heights

Choose a base colour, and then use tints & shades to add uniformity.

You don’t always have to stuff your design with a mass of colours.

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

Example of a design with a base colour and different tints and shades

Give prominence to the most important elements.

By using a combination of Font Sizes, Weights, and Colour, you can easily give prominence to the most important elements in your UI.

Simple adjustments to make the user experience that little bit better.

Example of a Card with more prominent design elements

For consistency, make sure your icons share the same visual style.

When implementing icons in your UI, keep things consistent.

Make sure they all share the same visual style; the same weight, and either filled, or outlined.

Don’t mix and match.

Example of a design with consistent icons in use

Always make your 'call to action' the most prominent item on the screen.

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.

Don’t always rely on icons alone if you can. If you can use Text Labels too, use ’em, to enable much better user comprehension.

Example of a design with a prominent 'call to action' button

Add an extra visual aid to your form errors.

Adding an Error Message close to the action that the user has just taken can be a simple, but helpful, extra visual aid for when they’re filling out short Forms inside of your site, or app.

Every little helps right?

Example of a form design with an extra tooltip shown on the 'Add to cart' button

Give prominence to the most frequently used action in your menus.

When designing a Menu to use inside of an application, make sure to give the most frequently used action (ie; Upload Image, Add File etc…) the most prominence on the screen.

Example of a menu with a prominent 'call to action' button

By the way, if you want to really save yourself hundreds of design hours, my Design System for Figma; Cabana is now available.
Special Offer: Use the code CABANA35 to receive 35% OFF. 👇

Cabana - Design System for Figma
Cabana is a Design System for Figma that is super-powerful and feature-rich but gives you the creative freedom and flexibility to make it your own.

Thanks for reading the article,
Marc.