Skip to main content

Master the golden rules of incredible UI design

Rule #3: CTAs need hierarchy

The majority of decisions made about our design lead the user towards an action – but this is only effective if the target looks clickable and communicates the visual hierarchy. Buttons and links, much like typography, should have a few variations. 

Components example

You'll need some different button variations for different situations (Image credit: Daniel Schwarz)

After all, not all actions are of equal level of importance, and colour is an unreliable method of communication, so it cannot be our main method of influencing visual hierarchy.

01. Size

Size example

Keep the text size the same when creating bigger buttons (Image credit: Daniel Schwarz / InVision)

We need to think with size. Generally, it is recommended that button text be declared as 18px (same as the body text), but have three variations in size:

  • Normal: 44px in height (rounded corners: 5px)
  • Large: 54px in height (rounded corners: 10px)
  • Extra large: 64px in height (rounded corners: 15px)

This allows us to make certain buttons appear to be more important without reliance on colour, and also to nest buttons (for example, use a button inside a minimal-looking form field).

02. Shadows

Shadows should be used to increase depth and therefore suggest interactivity. A single shadow style for all variants of buttons and form fields is fine – no need for anything fancy.

03. Interactivity

Each button type needs a variation to indicates its hover state. This clarifies to the user that what they've attempted to do is totally fine and ensures that they carry on without delay.

This is actually one of the more complex aspects of creating a design system, because the colour is often the favoured style to change when creating a state. Luckily, these state changes can be relatively subtle, so it's fine to change the colour into its slightly lighter or darker variation – that's what they're for. This applies to links as well.

Deciding against this will cause us to use a colour that either already has significant meaning, resulting in users becoming confused, or else deciding to come up with another colour. Now, deciding to use a secondary colour is totally fine, but it should be saved for marketing visuals rather than UI elements. Less is more (and easier).

Remember to repeat this step for every artboard. Don't include the branded CTA buttons on the brand artboard – later on we'll talk about what happens when certain combinations don't work.

Next page: Components