165 design references

Remove visual noise from an interface

@ui.martin, shared by @uxbrainy on Instagram

The same screen gets clearer when you turn extra signals off, not when you redraw it. A tinted card, an italic price, a tight row, a shadow, and a shape behind a photo all compete with the button and the price.

What to look at

The first card puts a tilted phone of a Burgers menu under Easy tips to make your UI Design Cleaner. The next card reads Less Clutter, More Clarity. Five pairs follow, Wrong in pink and Good in green. Reports turns three tinted hour cards and a purple date into white cards and gray type, and leaves Invite as the only blue. The bus list drops an italic serif date and italic prices for one plain sans. The burger rows spread until the last filter chip is cut off. Grocery cards trade a soft shadow for a thin line, and coffee cards drop a pale shape behind each drink.

The Reports pair. The Wrong side paints each hour card a different tint and sets the date in purple. The Good side keeps those cards white and leaves blue for Invite.
The Reports pair. The Wrong side paints each hour card a different tint and sets the date in purple. The Good side keeps those cards white and leaves blue for Invite.
The bus-list pair. The Wrong side sets the date in an italic serif and italics the times and prices. The Good side uses one plain sans.
The bus-list pair. The Wrong side sets the date in an italic serif and italics the times and prices. The Good side uses one plain sans.

Why it works

These findings are about interfaces, which is what the cards are teaching, not about the Instagram post. Nielsen Norman Group defines the signal-to-noise ratio as relevant information against irrelevant information, and treats decoration that helps neither the task nor another real goal as noise. On Reports, the tinted hour cards and the purple date use color the same way Invite does, and the group's visual-hierarchy article says too many colors of similar strength make it harder to tell what matters. The same article says a special type treatment such as italic draws the eye, and that "If everything is contrasted, then nothing stands out," which is what the italic date and italic prices do on the bus list. Spacing follows the proximity principle: items close together read as one group, and items set farther apart read as separate groups, which is why the burger rows scan more easily and why that card warns that too much space feels disconnected.

Try it

  1. Screenshot the page a visitor lands on and circle every color that is not the background, the body text, or the one main button.
  2. Turn those extra fills white or the page color, and keep the button as the only saturated color.
  3. Use one type family. Keep a heavier weight for the title and the price or the date, and set routes, calories, and labels in regular.
  4. Open the space between list rows until each item reads as its own group, then check a phone width so the last filter is not cut off.
  5. Remove a shape or a heavy shadow behind a photo, and add a thin border only where the card would otherwise disappear into the page.

What it costs

Opening the rows helps until the last chip falls off the phone, which is already happening on the Good burger screen, and the card itself says too much space can feel empty and disconnected. Taking away every tint also has a limit: Nielsen Norman Group says not to rely on color alone, and that borders and background fills become clutter when they are used on everything, so the thin line is a tool, not a rule for every card.

Words worth knowing

Sources