UX Architecture vs. UI Sensory Surface

A common industry confusion equates UX design with user interface (UI) design. While symbiotically linked, they operate at distinctly different layers of product engineering:

• UX Design (The Architectural Foundation): Focuses on structure, logic, task flows, cognitive friction, user mental models, and empirical validation through user research. UX answers: Why does this feature exist? What problem does it solve? How does information flow from step A to B?
• UI Design (The Sensory Surface): Focuses on the visual, auditory, and haptic manifestation of the experience. It governs typography, color schemes, iconography, spatial grids, micro-animations, and interactive component states. UI answers: How does this screen look, feel, and respond to input?

Jesse James Garrett formalized this relationship in The Elements of User Experience, organizing digital products into five interdependent planes from abstract strategy to concrete sensory surface:

1. Strategy Plane: User needs and business objectives.
2. Scope Plane: Functional specifications and content requirements.
3. Structure Plane: Interaction design and information architecture.
4. Skeleton Plane: Interface design, navigation design, and wireframing.
5. Surface Plane: Visual sensory presentation.