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

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Previously a design blog editor at Toptal and SitePoint, and before that a freelance product/UX designer and web developer for several years, Daniel Schwarz now advocates for better UX design alongside industry leaders such as InVision, Adobe, Net Magazine, and more. In his free time, Daniel loves gaming, café culture and Wikipedia, and also travels perpetually when there isn’t a pandemic.