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 (check out Part One here), 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.


01.

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.

Click Thumbnail to Enlarge

02.

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.

Click Thumbnail to Enlarge

03.

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.

Click Thumbnail to Enlarge

04.

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.

Click Thumbnail to Enlarge

05.

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.

Click Thumbnail to Enlarge

06.

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.

Click Thumbnail to Enlarge

07.

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?

Click Thumbnail to Enlarge

08.

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.

Click Thumbnail to Enlarge

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