Learning to notice beauty
How looking closely at the world around you makes you a better builder
There’s nothing I want more from my career than the chance to create beautiful things (and get compensated adequately).
But to create beauty, I first need the taste for it.
Unfortunately, this is not something I was born with. I don’t have the innate ability to know the perfect border radius, so I had to learn to notice it. The more beauty you notice, the more your eye develops. That’s the advice I got from my designer friends (and Interface Craft).
I started with what I could see.
Learning to notice visual beauty is easier because the eye is the first thing to make contact with the world.
And I realized just how desensitized I had become to the wonders of technology. I go through the workday, and the beautiful interfaces blend in the background. Just like you don’t notice the pretty sunset on your commute home.
How to notice the sunset?
Look at the software you use every day.
Do you like how it looks?
How it feels?
Ask yourself why.
“Because the UI is good” is not an answer. Be more specific. “Because it uses shadcn” is not a good one either. What exactly do you like?
Why do you like this font? Is it the subtle way the lowercase “l” curves? Do you like how they use both serif and non-serif fonts?
Why do you like the colors? What feeling do they give you? Do they fit together well? Does the UI feel like it has enough spacing?
Then look beyond the screen.
Notice the label on the coffee bag, the typography on a clothing tag, and the arrangement of the actors on a movie poster.
Just stop and notice. That’s all there is to it.
Then you’ll start noticing the products that lack beauty. The ones whose fonts you don’t like. The ones whose colors don’t work well together. You’ll start noticing the places where your work lacks beauty.
There’s no course you can take, no book you can read.
One morning, you’ll wake up, and your neurons will be wired just right.
Color
Color was always a mystery to me, partly because my eyes mix up green and grey.
I was fascinated by how designers find the right combinations. Somehow, they know where to place each color so it looks balanced.
I’ve tried using color palettes in my work, but my UIs looked like blankets stitched together from whatever scraps were left in the drawer.
So I decided to notice.
I spent time looking at every application I opened, every website, every label, every billboard.
Colorful patterns
I noticed that most good-looking software is built on a neutral base color.
A white or black variation that doesn’t strain the eyes. A subtle, slightly warm or cool color (also called off-white or off-black because it’s slightly different) that you can use as a canvas.
There’s always an accent color.
Something that pops out on the neutral base and complements it. It’s used sparingly and draws attention because it appears so rarely. If you use your accent color everywhere, the human eye won’t know where to look.
Then there are a few complementary colors that add depth. They’re often variations of the neutral base or something that works well with it. They’re used for the headers of a card component, a sidebar, or elements that don’t need to be accented but distinguished from the others.
A practical rule that falls out of all this theory is the 60-30-10 principle.
Sixty percent of your palette is the dominant neutral.
Thirty percent is a secondary color, used for surfaces, sections, and supporting elements.
Ten percent is the accent.
The ratio is simple. Following it gives even an untrained eye a structure to work within. But how do you pick these colors?
Newton’s color wheel
There’s a whole discipline around what colors go well together.
Between calculus and gravity, Isaac Newton invented the color wheel. He organized colors by their relationship to each other, and the placement of a color relative to others determines whether they harmonize or fight.
Just how much more could Newton have invented had he not dabbled in alchemy?
Based on what we know about the wheel, we can combine the colors to create a palette. This showed me why I subconsciously used monochromatic palettes in the past.
You can’t get color combinations wrong if you rely on variations of a single color.
So it’s not just noticing after all?
The things you piece together will turn out to have a term for them. But this is not a sign that you can skip the difficult part about learning to notice and training the eye.
It just shows that you’re on the right track.