Rafael Conde

AI Summary

→ WHAT IT COVERS Leslie Cohn-Wein and Rafael Conde explain Netlify's UI design process, covering collaboration between designers and engineers, design system constraints, tool choices including Sketch and Abstract, and shipping the analytics dashboard feature using systematic workflows. → KEY INSIGHTS - **Design handoff elimination:** Netlify maintains constant conversation between designers and front-end engineers throughout feature development rather than traditional handoff processes, with daily design meetings where both teams provide feedback and solve problems collaboratively before implementation begins. - **Conservative component philosophy:** The team deliberately avoids introducing new UI patterns, rejecting common elements like toggle switches and tabs to maintain consistency. They reuse existing patterns like cards and striped lists, forcing creative solutions within constraints to reduce maintenance burden and visual complexity. - **Library evaluation framework:** When selecting Highcharts for analytics, the team created comparison matrices ranking libraries against prioritized features including chart types, responsive behavior, accessibility modules with ARIA labels, and customization ease, then prototyped top three candidates before final selection. - **Design tools as middle ground:** Sketch mockups serve as conceptual guides rather than pixel-perfect specifications. Engineers catch inconsistencies like random padding values and normalize them to system variables, with designers welcoming pushback since code represents the actual source of truth for the product. → NOTABLE MOMENT Rafael reveals Netlify uses six pixel border radius for elements inside eight pixel cards because the inner radius of curved corners requires mathematical adjustment to appear visually harmonious, demonstrating how breaking systematic rules sometimes creates better visual results than strict adherence. 💼 SPONSORS [{"name": "Cloudinary", "url": "https://cloudinary.com"}, {"name": "DigitalOcean", "url": "https://do.co/fullstack"}] 🏷️ UI Design Systems, React Development, Design-Engineering Collaboration, Component Libraries