Build the simplest correct structure
Choose native elements and predictable layout primitives before abstractions.
PROCESS / 03 / BUILD
Make it
real.
Implementation is not the moment design gets handed off. It is where the design is tested against real content, browser behavior, data and platform constraints—and where many of the best product decisions are made.
implementationintent preserved
const product = await fetchProduct();render(product, {loading, empty, error, ready});onViewportChange(() => {adaptInteraction();});
BUILD RULEReal contentReal statesReal devices
THE STANDARD
Build with reality in the loop.
Use real data and real constraints early so technical reality improves the interface instead of forcing a last-minute compromise.
DOMSemantic
CSSSystematic
JSState-driven
DATAReal integration
WHAT GREAT LOOKS LIKE
Mirror the design system
Code tokens and components should map clearly to design decisions.
Make states explicit
Loading, error, empty and success behavior should be readable in the implementation.
Prefer progressive enhancement
The baseline journey should stay robust even if advanced behavior fails.
PRACTICAL METHOD
Create structure
Build semantic page and component boundaries.
Apply system styles
Implement tokens, fluid layout and responsive rules.
Add interactions
Mount focused JavaScript behavior with clear ownership.
Connect platforms
Integrate APIs/CMS/backend contracts with visible states.
Refine motion and detail
Add interaction polish only after the core journey is stable.