The UI & UX Cheatsheet

21 Quick, and Easy Tips to help you

improve your designs fast

By Marc Andrew

1
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 adjustments

you can quickly improve the designs you're trying to create.

In this handy little Cheatsheet, I’ve put together a quick, and easy to put into prac-

tice selection of UI & UX Tips that can, with little effort help both improve your

designs (UI), and the user experience (UX).

Let’s dive on in...

2
1. Make your elements appear more
defined

Use Multiple Drop Shadows, or a very subtle border (just a shade darker than your

actual shadow) around certain elements to make them appear a little sharper, more

defined, and help avoid those muddy shadows.

3
2. Using just the one typeface in your
design is all good

It’s absolutely fine to just opt for the 1 Typeface when creating your designs, and

sometimes doing this can help you produce much stronger, and consistent results.

Ignore the ‘Always use 2 Typefaces minimum’ crowd. Using a combination of

Weights, Sizes, and Colours you can still produce perfectly acceptable results.

4
3. Creating long-form content? Give
20pt and up a try

For long-form content (ie; Blog Posts, Product Descriptions etc...), try opting for

20pt (or even a little more) with your Body copy.

Of course this is dependant on the Typeface chosen, but a good majority of popu-

lar Body Typefaces work great at 20pt, and bring a much better reading experience

for the user when faced with a wall of text.

18pt is sooo last decade.

5
4. Improve your users onboarding ex-
perience

Enable users to skip your App Onboarding sequence at any time, and place that

Skip link within easy thumb reach.

Thumbs still rule in 2020 remember!

6
5. 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,

and sometimes goes unnoticed mistake to make.

We don't live in a land of a thousand suns remember.

7
6. Improve contrast between text and
images with a subtle, but simple over-
lay

Depending on where the text may be positioned over your image, you can either

go for a tried, and tested full image overlay, or a more subtle; bottom to top, or top

to bottom gradient overlay to achieve a simple, effective contrast between the two

elements.

8
7. Use centred text in moderation

Try to only used Centred Text for Headlines/Titles and small blocks of Text.

For pretty much everything else keep that text content left-aligned.

9
8. Whitespace is your friend. Use it
generously

Ah, good ol’ Whitespace. Use it generously, or in moderation, but use it well.

Even just small amounts of the white stuff can allow your designs to breathe, and

look more polished.

One of the fastest, and simplest ways to improve your designs.

10
9. Darken up your text on light back-
grounds

Don't make your text too light when working against a light background.

It can look like all the cool kids are (still) doing it, but you're much smarter than

that, and want to create more accessible interfaces right?

11
10. Check out these great Typefaces,
perfect for Headlines in your designs

Here’s a selection of Serif, and Sans-Serif Typefaces that I’ve used many time be-

fore, and found they work really well for Headlines, bringing a bit of warmth, and

character to any design.

You can find them at fonts.adobe.com (No, I'm not getting any commission).

12
11. Check out these great Typefaces,
perfect for Body copy in your designs

Behold a small selection of both Serif, and Sans-Serif Typefaces that I’ve used con-

sistently for long-form Body text, and highly recommend.

You can find them over at fonts.adobe.com (No, I’m still not getting any commis-
sion).

13
12. Lighten up your text if it looks a lit-
tle on the heavy side

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.

14
13. The smaller the font size, the more
generous the line height

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

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

15
14. Choose a Base Colour, and then
use Tints & Shades to add uniformity

You don't always have to stuff your design with an abundance 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.

16
15. Give prominence to the most im-
portant elements

By using a combination of Font Sizes, Weights, and Colour, you can easily give

prominence to the most important elements in your UI.

These simple adjustments can greatly improve the user experience.

17
16. For Consistency, make sure your
Icons share the same visual style

When implementing Icons in your UI, try to keep things consistent.

Make sure they all share the same visual style; the same weight, and are either

filled, or outlined.

Don’t mix and match those Icons.

18
17. 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 your ‘Call to Action’ is as prominent as possible, via the use of colour

contrast, size, and labels.

Don't always rely on just Icons alone . If you can, use Text Labels too. This enables

much easier user comprehension.

19
18. 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?

20
19. Give Prominence to the most fre-
quently used action in a Menu

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 promin-

ence on the screen.

21
20. Try to create generous Tappable ar-
eas on Mobile

When designing for Mobile try to create Tappable Areas large enough for fingers

to, well, tap successfully.

Things can be challenging for Buttons, and Links that consist only of Text so try to

go for an Icon with a Label whenever possible.

Here’s the minimum recommended Tap Areas for both iOS and Android...

44 x 44pt for iOS

48 x 48dp for Android

22
21. For Download Indicators, try to be
as informative as possible

The one time you don't want to go with the super ‘Minimal’ look is when it comes

to Download Indicators.

For the user, try to make your Download Indicators as informative, and user-friendly

as possible.

You can achieve this via the use of colour, a percentage figure to show the current

progress, and a simple icon giving them the ability to cancel the download at any

time.

23
I hope with this Cheatsheet you've gained a little more understanding on how the

smallest tweaks to your UI can produce a much better end-result, for both yourself,

and your user.

If you have any questions, please get in touch - hello@marcandrew.me

Many thanks

Marc Andrew

https://marcandrew.me

https://twitter.com/@mrcndrw

24