Introduction

Achieve more with less. These are my thoughts about my journey learning to design better websites.

Most developers, myself included, spend the early part of their careers treating design as an afterthought. The logic goes: if it works, ship it. But as I spent more time building user-facing products, I kept running into the same problem — something would be technically correct but feel wrong to use.

So I started studying design more intentionally. These are the things that actually moved the needle.

Fonts

You can't create a good-looking UI if you're using too many font sizes or different font families. A good rule of thumb is to keep it simple, stick to around 2–3 font sizes and ideally just one or two fonts.

The most common mistake is making everything the same size and weight. When nothing is emphasized, nothing stands out. Your hierarchy disappears.

Click fix below to see how size and weight changes can completely transform a component:

// Broken: oversized, loud & unbalanced typography
const title    = { fontSize: "40px", fontWeight: 900 };
const subtitle = { fontSize: "20px", fontWeight: 700 };
const body     = { fontSize: "10px", fontWeight: 500 };

// Fixed: balanced design system hierarchy
const title    = { fontSize: "18px", fontWeight: 700 };
const subtitle = { fontSize: "16px", fontWeight: 500 };
const body     = { fontSize: "14px", fontWeight: 400 };

Notice that the title is both larger and heavier — so your eye lands there first. The subtitle is slightly lighter, guiding attention downward. Body text stays consistent. That's hierarchy.

Spacing

Many times UIs don't feel right not because they don't follow good spacing, but because the elements don't align visually on screen — when you standardize your spacing, your interfaces will look a thousand times better with just this change.

The principle is simple: use a spacing scale. Stick to multiples of 4 (4, 8, 12, 16, 20, 24...). Random values like 13px, 17px, or 18px create invisible inconsistency that your users feel even if they can't name it.

Click fix below to see the sidebar snap into a proper grid:

// Broken: random inconsistent spacing values
paddingTop: "13px", paddingBottom: "17px",
marginBottom: "18px", marginLeft: "14px"

// Fixed: consistent spacing with multiples of 4
paddingTop: "12px", paddingBottom: "12px",
marginBottom: "16px", marginLeft: "12px"

The fixed version uses the same padding on all four sides of the sidebar, equal spacing between nav items, and consistent icon-to-label gaps. The result feels calm and intentional.

Copywriting

Don't use unnecessary words or labels that don't make sense. Keep your text simple, clear, and informative. Avoid redundant labels. Small details make a big difference.

A few quick wins:

• Remove obvious labels. If a field has a placeholder that says "Your name goes here", you don't also need a label that says "Full name" above it. Pick one.
• Cut filler words. Instead of "Please enter the data to sign in", just say "Sign in".
• Name actions, not categories. A button that says "Submit" is worse than one that says "Create Account".

Click fix below to see redundant labels and filler words disappear:

// Broken: redundant, wordy labels
heading: "User data"
subtext: "Enter the data to sign in."
label:   "Please enter your complete full name here"
label:   "Email address for contact purposes only"
label:   null // missing

// Fixed: short, clear, consistent
heading: "Sign in"
subtext: "Enter your details to sign in."
label:   "Full name"
label:   "Email"
label:   "Phone"

The best copy is the copy the user doesn't have to read — because the UI makes the action obvious without it.

Colors

Now with AI this is a lot easier to notice — we can see a lot of UI slop. AI tends to use too many colors or few colors, but they don't have harmony between them.

The rule: every color should earn its place. Color conveys meaning. When everything is colorful, nothing is. When your CTA is pink, your title is purple, and your body text is orange — the visual noise drowns out the message.

Click fix below to see a harmonious, intentional version of the same component:

// Broken: 6+ unrelated colors
const broken = {
  card: "#F5F0FF",
  title: "#7C3AED",
  body: "#F97316",
  cta: "#EC4899",
  secondary: "#3B82F6",
};

// Fixed: semantic design tokens only
const fixed = {
  card: "var(--card)",
  title: "var(--foreground)",
  body: "var(--muted-foreground)",
  cta: "var(--primary)",
  secondary: "var(--muted)",
};

The fixed version uses just two semantic roles: primary for the single call to action, and muted tones for everything else. The message becomes clear because the eye knows exactly where to go.

What's Next?

These four areas — fonts, spacing, copy, and color — are not the full picture of design. But fixing them alone will take most UIs from "looks like a dev built this" to "this actually feels polished."

The pattern across all of them is the same: reduce, systematize, and be intentional. Remove unnecessary variation, pick a system, and stick to it.

Design taste is a skill. It gets sharper the more you look at things that are done well, and the more you question the things that aren't.