The secret behind weirdly perfect UI designs transcript

This is a checklist UI. And this is a receipt I got from my local Walmart. And they have more in common than you might think. There's a reason that this receipt has no center text other than these codes, and it's the same reason that this design doesn't feel right when compared to this one. On a receipt, the text is aligned hard left, and the prices are hard right. The only center things are the parts you're not really meant to read at all.

The alignment is what let you do that. Notice how there's no dividers and not really any white space. It's just two edges holding everything together. And it works the same way on the screen, too. If we start with a profile card like this, your first instinct might be to start adding in more and more content to fill up the empty space, which ends up looking strange. Instead, try thinking about the edges where we can place content.

On every card, we have four edges, but we also have a bottom edge against this avatar and name where we can stack more things. The issue here is we're not following the edges with these buttons, and there's also way too many. You might be tempted to stretch the buttons out and collapse all the secondary buttons into the top left corner menu, and suddenly the card does look better. But hiding elements isn't generally the best way to fix this.

So, instead, either we move content to clear up edges, which leaves this top part very unresolved, or we can manufacture new edges to effectively move this top edge down, lining up our buttons and avatar into a solid line for the content below. And at this point, you might be seeing that everything in here borders on at least two or more edges. And that's true for almost all compact UIs, whether it's chat inputs or Kanban cards or even sidebars.

And that's also why a checklist like this looks perfectly built, since every line creates a new edge for the next stack onto. If we replace these with larger icons, we're now missing that bottom edge, so we need a subline to restore it once again. So, we've got a design where every element is locked to an edge, but what happens when I take these lines and let them run the full width of the screen. Every edge is exactly where it was, but suddenly things don't feel so perfect anymore.

Now, take a look at this. Which of these feels like more of a chore to read through? The content is identical. The presentation is [music] not. So, if we return to our checklist, you reasonably might start adding in more white space to counter the density. And it does help a little, but it's also made everything longer. The problem here isn't that there's too much content though. It's that there's [music] too much undifferentiated content.

See, when I drop in avatars where we reference people, it starts to feel a little easier to parse [music] through. Then, if I group based on due date, now it doesn't matter how much or little text we have. You can find any task in about a second, and the density is now working for us instead of against us. And this is exactly why old AI chats use way too many bullet points, or why Claude code loves making tables at the end of its chats.

It differentiates the content, so it makes our wall of text a lot more friendly to read. So, grouping and varying the content makes navigating much easier. But, you're still reading, just in smaller chunks now. Except, there was one thing that you didn't need to read at all. You knew who each task referenced the moment the avatars went in. Let me ask you, if I show you this red octagon, what do you think of first? Stop [music] signs.

And notice how you didn't need to read anything to get there, because it's just so universal. Now, check out this card versus this card. Which is easier to understand? The first card actually has more raw information on it, which is potentially useful. But, the second card takes most of that plain text and turns it into diagrams and icons, which register the instant you look at it. You see, the instinct when something isn't clear is to explain it harder.

Add a comparison, add a label, or add a tooltip. And this feels productive, because every one of those additions is technically more information. But, you've made the screen harder to read in order to make it easier to understand, which is a trade-off you almost never want. But, that's not exclusively true. You see, when you look at this action bar, you know what this checkbox does because of its placement above the rest.

But, otherwise, you're kind of just guessing for the rest of these, at least while you wait for the tooltip to pop up. UIs that convey the information they need to and stay clean do it by using the right visuals that are immediately recognizable. Bringing it back to the checklist, this could mean highlighting and underlining links in blue or using chips to categorize content. By adding these, we're also giving the user functionality to intuitively swap tags that would otherwise be hidden behind a menu.

But, before you can create a product, you first need a marketing landing page, which is exactly what Relume Publish, the sponsor of today's video, does. Their agent pulls on the Relume library of human-made components behind 2 million existing websites. I asked it to build a website for a local landscaping business by dumping in my materials and prompts. Relume first turns that into a brief, then builds a site map and wireframe with its components.

Once you're happy, it finishes the build with blocks that are directly editable. Once that's looking good, just hit publish and your site goes live at a real URL. From there, four agents, a copywriter, strategist, designer, and analyst work on the live site using built-in analytics and can even suggest changes when they detect an issue. If you are interested in checking it out, it'll be the very first link down below.

But, to understand why these things make a UI feel weirdly perfect, we need to dive deeper into how people actually use an interface. Here's the thing, nobody reads a screen. [music] You land somewhere with a question already in your head and you hunt until you find the answer. When I open VS Code, I'm not looking at the entire editor, I'm looking for just one file. And same idea when I open a settings panel, you're looking for just one setting.

Nothing on a screen is ever fully consumed. And you've been doing it this entire video, too. You knew who each house belonged to before you read a name and you knew this was a stop sign with nothing else written on it. That's what edges and differentiation and swapping text for visuals [music] are actually all doing. They're not making it prettier, they're making it faster to scan. It's at every one of those tools makes the screen faster to scan without ever telling you where to start.

Now, think about a checkbox. Off, it's a thin border and nothing else. No color, no icon, it's easy to skip right past it. But check it and it earns a fill and a checkmark. Nobody would ever design one that's blue when it's off because the color is the whole signal that something has changed. Which brings me to this settings panel. The edges are clean, the tabs are doing the grouping, every value is a chip with an icon so we're showing, not telling.

This screen does everything we've talked about so far and yet it's not very clear which of these is important because look at what these chips actually say. Every one of these is on the default state. It's like having six checkboxes that are blue when they're off. So, to make one of these stand out, you might reach for something to give the chip more color, bolder text when all you need to do to make it stand out is change its surroundings.

And that's also exactly why in this menu, the only blue component is the one trying to get me to resubscribe to my Cloud Pro plan because emphasis isn't something that an element has, it's the difference between it and its neighbors. Now, you might have noticed something about every single example so far. They're all cards and that was actually on purpose. You get four edges handed to you for free and if the content doesn't fit, you just resize it.

But nobody actually builds just a card. Most people see a wide open canvas and start adding in containers and cards to create some structure until you end up with borders on borders and three radii all stacked together. None of that really helps. So instead, with a single line, we can dissolve all of our cards into the interface itself. That column edge is doing what the card edge was doing. Every row stacks onto the one above it.

The sections group the content, so you're not scanning one long undifferentiated list. The chips and icons are still doing the reading for you, and default values are gray, so the ones that aren't find your eye. So, cards or no cards, everything ultimately still works towards creating a scannable interface. Thank you so much for watching. If you are interested in checking out Relume, that'll be the very first link down below.

The link to all of the Figma assets used in this video will be down there, too. And I will see you in the next one.