UI details that connect
summary
Five concrete steps — spacing, typography, layering, a fun or unexpected element, then interaction — turn a flat Figma into a shippable page. Demos rebuild a Laravel blog homepage and the Forge hero using imported fonts, SVG/GIF video, gradients, selection styling, hover effects, and Unicorn Studio animations wired in with Raycast snippets and plain CSS. The uploader claims this process ships: multiple marketing sites including Laracon US, Nightwatch and Learn are live, notably four sites in four months.
AI-written summary · about
chapters (18)
- 0:00Start
- 1:05Introduction to Leah and her role at Laravel
- 2:05From maths teacher to front-end developer
- 3:10Discovering Laravel through Laracon US and the community
- 4:40Joining Laravel and shipping the Laracon US and Nightwatch sites
- 5:25Feeling overwhelmed by designs and tight timelines
- 6:10A step-by-step framework for building front ends
- 6:20Step 1: spacing and padding for clarity and structure
- 6:45Step 2: typography, fonts, weights, and hierarchy
- 7:10Step 3: layering with shadows, gradients, and depth
- 7:25Step 4: adding something fun or unexpected
- 7:40Step 5: interaction and animation through subtle hovers
- 7:50Live demo building the Laravel Blog homepage
- 12:30Visual payoff from incremental improvements
- 14:20Applying the same approach to the Forge marketing site
- 18:20Shipping Laravel Learn and education-focused design
- 19:35Building the new Forge marketing pages
- 24:20Gradients, selection styling, and small delightful details
related talks
15mModern Approach to Designer ❤️ Developer Collaboration
38mDesigning, prototyping, and publishing websites with Figma Sites
19mBehind the system: A showcase of files that inspire us
01h 14mFigma product launch keynote
29mDesigning Laravel
19mHow to make interactive animations with Figma
18mThe space-filling curve of design
23mHow to create Figma design loved by developers