Close
Type at least 1 character to search
Back to top

Hierarchy

Are labels needed?

When presenting data to people, it’s easy to fall into a trap where we just display every entry with a label. It’s much easier to present data by just emphasizing important information, making the interface easier to use while at the same time making it feel more polished.

Weight & Contrast

The bold text feels emphasized compared to regular text because bold text covers more surface area — in the same amount of space, more pixels are used for text than for the background. Just like bold text, solid icons generally feel pretty heavy. If you put an icon next to the text, it wil feel selected or emphasized. Unlike with text, you can’t just change the weight of the icon – so to create a balance, we need to de-emphasize it in some other way. We can lower the contrast by giving it a softer color or just changing the style to be an outlined version fi it’s not active.

In specific scenarios, it’s excellent to increase elements’ weight, especially if they are low contrast ones. If you have a horizontal divider, using a dark color would feel too harsh and aggressive; softening that color would make it much more organized and polished.

Secondary

Secondary actions are an essential part of buttons, but that doesn’t mean you should forget about hierarchy. Every action on a page sits somewhere in a pyramid of importance. Most carriers only have one actual primary action, a couple of less critical secondary actions, and a few used tertiary actions.

  1. Primary actions should be obvious. Solid, high contrast background colors work great here.
  2. Secondary actions should be clear but not prominent. Outline styles or lower contrast background colors are great options.
  3. Tertiary actions should be discoverable but unobtrusive. Styling these actions like links is usually the best approach.

Space is never enough

Whitespace is almost always added to design when something looks cramped. However, the problem is that in that way, elements have just a little breathing room. To make something look outstanding, start with too much whitespace. You might think you will end up with too much whitespace, but when focused on individual elements, they end up being closer together when looking at the complete interface.