Training your eye
Six exercises that rewire how you see interfaces
A developer sees a component that renders correctly. A designer sees a heading in the wrong weight, 14px padding on one side and 16 on the other, ease-in where it should be ease-out. Not talent. Trained perception.
Once trained, it doesn't turn off. Misaligned icons in banking apps. Straight quotes on billboards. Inconsistent border-radius everywhere.
How designers actually see
Designers don't run checklists. They pattern-match against thousands of examples stored as intuition. A misaligned element doesn't trigger "that's 2 pixels off." It triggers a feeling: something is wrong here.
"Having an eye" means violations register as discomfort before you can name the problem.
Train your eye across all four pillars
The developer blind spots
Typography is invisible. Line-height too tight, heading and body weights too similar, straight quotes everywhere.
Spacing is "close enough." 4 pixels of padding difference: invisible in code review, obvious on screen.
Motion is binary. Things animate or they don't. The curve, the duration scaling with distance rarely get the same scrutiny as the logic that triggers them.
Copy is someone else's problem. "Submit" stays "Submit." The words are the interface.
Practice: the 5-second scan
- Open a page. Five-second timer.
- Look away when it ends.
- Write down everything that felt wrong. Not broken, just off.
- Reopen. Verify each item.
The gap between what you caught and what you missed is your perception gap. Run this weekly.
The progression
See problems when pointed out. Notice them unprompted. Stop creating them, because the wrong option feels wrong before you finish typing.