Training your eye

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 1. Open a page. Five-second timer. 2. Look away when it ends. 3. Write down everything that felt _wrong_. Not broken, just off. 4. 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.