Matt D. Smith shows how to strengthen a list card UI by letting one style lead. He scales up an organic blob avatar, adds real supporting text, swaps verbose numbers for icons, and applies the blob's rounded corners and shadows throughout. One strong element makes everything else fall into place.
How do you go from this to this? And why does the second one feel so much better? First, let's analyze what's working. See these organic blob shapes masking the avatars. This feels like the strongest style element. Everything else needs to support this quality. First, let's isolate the card from the rest of the design. The avatar feels a little tight in here, so let's scale the avatar and give it some breathing room. Let's pop in a slightly bigger name and add actual supporting text instead of placeholder copy. And let's bring in an arrow for depth navigation. We don't really need to see the full number in each email, so we can use icons instead of text here. Plus, these are much better tap targets. Now let's take the spirit of this organic blob and apply it to the card itself. Let's round the corners and trade the hard border for a subtle shadow. The card now connects to the organic shape. Way more spacious than where we started. Now we can apply the design to the whole list. And finally, let's lose the dark status and tiny text in favor of a lighter, more breathable navigation. That also works really well with a scroll. But before we had organic avatars and rigid everything else. Now we have a unified visual language throughout. The key takeaway here is to find your strongest style element and make everything else support it. Follow me for more UI tips or share with a friend that likes to sweat the details.
