How I design clean UI as a developer

SEPTEMBER 2025 • 7 MIN READ

"I can make it work, but I can't make it look good." I hear this from backend engineers all the time. But design isn't magic; it's a set of logical rules. Just like you learn syntax, you can learn design. Here are the 4 principles I follow to create clean UIs.

1. Hierarchy is King

When a user lands on your page, they should know exactly what is most important. We achieve this through size, weight, and color.

The Squint Test: Squint your eyes until everything is blurry. Can you still tell what the main headline is? Can you see the primary button? If not, increase the contrast. Don't make everything bold. If everything is important, nothing is.

2. Whitespace is a Feature

Novice designers are afraid of empty space. They try to fill every pixel. Professional designers use whitespace to group related elements.

Give your content room to breathe. Increase your margins. Increase your line height. A good rule of thumb: whatever padding you think you need, double it.

3. Typography Pairs

Don't use 5 different fonts. Pick two.

A Display Font: For headings. Something with character. (I use Oswald on this site).
A Body Font: For reading. Something clean and legible. (I use Manrope).

Stick to these two. Change weights (Light, Regular, Bold) to create variety, not font families.

4. Consistency (The Grid)

The human eye loves patterns. If one button has 10px padding and another has 12px, it feels "off" subconsciously.

Use a spacing scale. I use the 8pt Grid System. All margins and paddings should be multiples of 8 (8px, 16px, 24px, 32px, 64px). Tailwind's default spacing scale (`p-2`, `p-4`, `p-8`) handles this for you automatically.

Conclusion

You don't need to be an artist to design well. You just need to be disciplined. align your elements, limit your color palette, and give things space. Your users will thank you.