<?xml version="1.0" encoding="utf-8"?>

Size contrast

Size contrast Bad Practice
Size contrast Best Practice

When combining shapes, each of a different size, we create size contrast and emphasize that the larger one is more important.[1] Think of things like notification badges over avatars or icons. If the notification badge and avatar are the same size, it’s not immediately apparent which element is more important. By using a larger avatar and small notification badge, we get a sense of the hierarchy of those two elements — the avatar is the primary element and the notification badge is secondary.

Improve your UX & Product skills with interactive courses that actually work