You’ve spent all night building your app and are ready to release it to the world. But when your users try it for the first time, they miss the most important parts.
How do you highlight key parts of your UI without overdoing it?
Without emphasis, everything just looks the same…
In this practical guide, we’ll cover five ways to emphasize the most important elements in your UI.
1. Increase size / weight
Let’s get the obvious out of the way. The larger, bolder something is, the more attention it attracts.
To add emphasis to text, you can increase either the text size or font weight.
Mintlify docs creates hierarchy by varying text sizes and font weight.
Beyond text, you can scale up the entire UI. You may need to resize everything, including the text, images, and spacing.
Resend’s blog emphasizes featured posts by scaling them up.
2. Change color
In general, the brighter and bolder the color, the more it will stand out.
To easiest way is to use your brand colors to accent the most important parts of your app.
Expensify uses brand and warning colors to highlight actions and notifications.
If you're using mostly neutral colors, you can create emphasis by varying between darker and lighter shades.
Subframe’s landing page has uniform font size and weight, but varies in color.
Too much of one color can overwhelm an interface, and too many colors can clash. So depending on what you’re building, you may want to limit these pops of color to a few times per screen.
3. Break continuity
We are conditioned to see patterns and continuity when using a product. So if you can break the pattern in any way, things will naturally stand out.
How do you actually break the pattern? Try experimenting with different visual styles for the item you want to emphasize. Even something as simple as giving your UI a different background will usually work.
OpenAI breaks continuity in featured GPTs with a gray background and lack of line number.
You can even insert something completely different into the flow to grab a user's attention.
ProductHunt has a banner asking you to subscribe, right in the middle of its launches.
4. Add white space
Your eyes are naturally drawn to areas with more white space. Surrounding an important element with white space makes it stand out more.
For marketing pages or apps that don’t need to display a lot of information, adding white space can help a user focus on the key parts.
Oku’s liberal use of whitespace draws your attention to downloading their app.
5. Emphasize by de-emphasizing
When everything is a priority, then nothing is. Similarily, emphasis is relative. If everything on the page is screaming for attention, nothing stands out. A more elegant approach is to de-emphasize less important elements.
You can do so by reducing opacity, using lighter colors, or making them smaller.
Linear’s onboarding puts CMD+K front-and-center by de-emphasizing everything else.