Matt D. Smith shows how misaligned margins, uneven spacing, and inconsistent corner radii make UI feel accidental. He fixes it with an implicit grid, a spacing system based on multiples of four, and a simplified color palette.
12 pixels.
Multiples of four pixels.
Matt D. Smith.
How do you go from this to this? And why does it feel instantly better? The first interface looks okay, but the details are working against it. The left alignment doesn't match. Down below, similar elements have inconsistent spacing, and this one has more space, a lighter gray and a different corner radius. It's just ever so slightly off. The right margin doesn't match the left margin exactly, and the spacing isn't following a clear system. Even the use of green and black here and here, when everything else is this lavender hue doesn't quite make sense. Everything's a bit random and unbalanced, and it feels a little off. Now look at the updated version. All of the elements line up with an implicit grid and the same spacing increment throughout the entire UI. 12 pixels between the image and title here. Multiples of four everywhere else. Left and right margin consistently aligned with an importance here that looks more obviously swipeable. We've also simplified the use of color across the interface, which makes everything more consistent and cohesive. Before it felt a bit accidental, and after everything feels more intentional and strong. Follow for more interface design tips or share it with a friend who likes to sweat the details.
