Training Your Eye

8 min

Training Your Eye

Designers don't see interfaces the way most developers do. Where a developer sees a component that renders correctly, a designer sees a heading set in the wrong weight, a button with 14 pixels of padding on one side and 16 on the other, and a transition that uses ease-in when it should use ease-out. This isn't talent—it's trained perception.

The good news: perception is a skill. Like any skill, it responds to deliberate practice. The bad news: once trained, it doesn't turn off. You will start noticing misaligned icons in banking apps, straight quotes on billboard advertisements, and inconsistent border-radius values in the tools you use every day. This is the cost of craft awareness. It's worth paying.

Spot the difference
Spot the errors

Build faster apps

"Build faster" with our platform.

  • Unlimited projects
  • Real-time collaboration
  • Priority support

Free trial available

Crafted version

Build faster apps

“Build faster” with our platform.

  • Unlimited projects
  • Real-time collaboration
  • Priority support

14-day free trial · No credit card required

Click on the craft errors in the left card. Found 0 of 4.

How designers actually see

When a designer evaluates an interface, they aren't running through a mental checklist. They're pattern-matching against thousands of previously encountered examples—good and bad—stored as intuition rather than explicit rules. A misaligned element doesn't trigger a conscious thought like "that's 2 pixels off." It triggers a feeling: something is wrong here.

This feeling is the goal. Checklists are a stepping stone. Eventually, you want the rules to be so deeply internalized that violations register as discomfort before you can name the specific problem. That's what "having an eye" actually means.

Train your eye across all four pillars

Reading about taste only gets you so far. The fastest way to internalize quality is to make a judgement, commit to it, then learn whether you were right. The series below mixes typography, animation, craft, and copywriting — the four domains that show up on every interface you build. Pick the option that feels stronger, then read the explanation.

The developer blind spots

Developers tend to have consistent blind spots, not because they lack ability, but because their training optimizes for different things. The most common gaps:

Typography is invisible. Most developers treat text as content that fills a container. They don't notice that the line-height is too tight, that the heading and body weights are too similar, or that straight quotes are everywhere. Typography is the single largest quality gap between developer-built and designer-built interfaces.

Spacing is "close enough." A 4-pixel difference in padding is invisible in a code review and obvious on screen. Developers tend to round to convenient numbers—p-4 instead of the optically correct value—because the tooling doesn't surface the difference. But the eye registers it.

Motion is binary. Things either animate or they don't. The character of the animation—whether it decelerates on exit, whether the duration scales with distance, whether it uses a spring or a cubic-bezier—rarely gets the same scrutiny as the logic that triggers it.

Copy is someone else's problem. Developers often treat interface text as placeholder content that a copywriter will eventually replace. In practice, the developer's placeholder ships. "Submit" stays "Submit." "Error occurred" stays "Error occurred." The words are the interface.

Practice: the 5-second scan

Here's an exercise you can run on any interface, including your own:

  1. Open a page. Set a timer for five seconds.
  2. Close your eyes (or look away) when the timer ends.
  3. Write down everything that felt wrong—not broken, but slightly off. Don't filter.
  4. Open the page again and verify each item.

The gap between what you noticed in five seconds and what you find on closer inspection is your perception gap. Run this exercise weekly and the gap will shrink. Within a few months, you'll catch most issues in the initial scan.

The progression

Craft awareness develops in stages. First, you learn to see problems when they're pointed out. Then you start noticing them unprompted—in other people's work, then in your own. Eventually, you stop creating the problems in the first place, because the wrong option feels wrong before you've finished typing it.

This is the trajectory of this course. The early lessons will point out specific problems. The later lessons will give you frameworks for preventing them. By the end, the framework should be unnecessary—replaced by the instinct it was designed to build.

The next lesson introduces the four domains where these instincts operate. Every detail you'll learn to see falls into one of them.