What are the key takeaways from this Design Details episode?

Key insights include: **Animation Duration Standards:** Use 200-250 milliseconds for common interactions like dropdowns and state transitions. Larger surfaces moving longer distances require 50-100 milliseconds more to convey appropriate weight. The key threshold is making animations complete before users consciously register they happened, creating seamless perception rather than noticeable waiting periods.; **Motion Design Testing Protocol:** Designers must use animated interfaces extensively in real contexts, not just preview them in prototype mode. What feels impressive during the tenth viewing often becomes irritating by the hundredth use. Test with actual content at full resolution across complete user sessions to identify animations that cause fatigue on common interface elements like buttons and modals.; **Button Size Application Rules:** Medium buttons serve as the default for 90 percent of use cases, working across both touch and click interfaces at 36-40 pixels tall. Reserve extra small sizes for low-priority actions like tags or navigation bar elements. Deploy extra large buttons for full-screen interstitials with single primary actions, scaling text and iconography proportionally with container size.

How long is this episode of Design Details?

This episode is 34 minutes long. SignalCast provides an AI-generated summary so you can get the key insights in about 3 minutes.

Design Details

463: Design Medley, Vol. 1

October 18, 2023

34 min episode · 2 min read

Episode

34 min

Read time

2 min

Topics

Productivity, Startups, Leadership

AI-Generated Summary

Published Feb 16, 2026

Key Takeaways

✓Animation Duration Standards: Use 200-250 milliseconds for common interactions like dropdowns and state transitions. Larger surfaces moving longer distances require 50-100 milliseconds more to convey appropriate weight. The key threshold is making animations complete before users consciously register they happened, creating seamless perception rather than noticeable waiting periods.
✓Motion Design Testing Protocol: Designers must use animated interfaces extensively in real contexts, not just preview them in prototype mode. What feels impressive during the tenth viewing often becomes irritating by the hundredth use. Test with actual content at full resolution across complete user sessions to identify animations that cause fatigue on common interface elements like buttons and modals.
✓Button Size Application Rules: Medium buttons serve as the default for 90 percent of use cases, working across both touch and click interfaces at 36-40 pixels tall. Reserve extra small sizes for low-priority actions like tags or navigation bar elements. Deploy extra large buttons for full-screen interstitials with single primary actions, scaling text and iconography proportionally with container size.
✓Responsive Button Considerations: A 32-pixel tall button functions adequately on desktop with pointer precision but feels inadequate on touch devices. When buttons span full width on mobile screens, 36 pixels represents the absolute minimum height to avoid a ladder-rung appearance. Adjust sizing based on button width proportions rather than applying universal height rules across all contexts.
✓Typography Spacing Management: CSS requires dozens of specific rules for element combinations that Figma cannot document—like lists within blockquotes adjacent to images. Define spacing through code with extensive sample text covering edge cases rather than attempting Figma documentation. The upcoming CSS text-trim feature will eliminate hidden padding for accents and descenders, dramatically simplifying vertical rhythm calculations.

What It Covers

Marshall and Brian explore motion design principles for productivity software, examining animation duration, easing curves, and when to use restraint versus emphasis. They address button sizing strategies across devices and breakpoints, plus typography spacing challenges in design systems, particularly managing CSS margins that Figma cannot replicate.

Key Questions Answered

•Animation Duration Standards: Use 200-250 milliseconds for common interactions like dropdowns and state transitions. Larger surfaces moving longer distances require 50-100 milliseconds more to convey appropriate weight. The key threshold is making animations complete before users consciously register they happened, creating seamless perception rather than noticeable waiting periods.
•Motion Design Testing Protocol: Designers must use animated interfaces extensively in real contexts, not just preview them in prototype mode. What feels impressive during the tenth viewing often becomes irritating by the hundredth use. Test with actual content at full resolution across complete user sessions to identify animations that cause fatigue on common interface elements like buttons and modals.
•Button Size Application Rules: Medium buttons serve as the default for 90 percent of use cases, working across both touch and click interfaces at 36-40 pixels tall. Reserve extra small sizes for low-priority actions like tags or navigation bar elements. Deploy extra large buttons for full-screen interstitials with single primary actions, scaling text and iconography proportionally with container size.
•Responsive Button Considerations: A 32-pixel tall button functions adequately on desktop with pointer precision but feels inadequate on touch devices. When buttons span full width on mobile screens, 36 pixels represents the absolute minimum height to avoid a ladder-rung appearance. Adjust sizing based on button width proportions rather than applying universal height rules across all contexts.
•Typography Spacing Management: CSS requires dozens of specific rules for element combinations that Figma cannot document—like lists within blockquotes adjacent to images. Define spacing through code with extensive sample text covering edge cases rather than attempting Figma documentation. The upcoming CSS text-trim feature will eliminate hidden padding for accents and descenders, dramatically simplifying vertical rhythm calculations.

Notable Moment

Marshall describes encountering gratuitously animated dashboard tooltips on Twitter that received thousands of likes despite creating disorienting user experiences. The disconnect illustrates how motion design that generates social media engagement often contradicts principles of usable productivity software, where restraint and speed matter more than visual spectacle that impresses designers.

Know someone who'd find this useful?

Episode Transcript

So, last time we met Brian, it was incredibly hot in this room. But in the in the time since our last meeting, there's a little chill in the air. And and and today was a milestone from you. Today, I had my first cup of pumpkin spice creamer in my coffee. Oh, wow. Starting actually, I was gonna say early, but I guess it's about time. It's about it's about that time. Yeah. It's about that time. It's available in the stores. So, hey, I'm gonna take advantage. I mean, you can also get a Christmas tree at Costco, but that doesn't make you right. So Welcome to episode 463 of the Design Details podcast. I'm Brian Lovett. And I'm Marshall Black. Welcome back for another episode. Brian, how are you doing? Oh. I know. I'm not supposed to ask you how you're doing. I'm supposed to ask you what what's on the docket. Asking me how I'm doing is opening a can of worms. I fell into old habits. There's there's a lot going on Yeah. Yeah. Yeah. Right now. What's on the docket, though? We are gonna talk a lot about design. Surprise, surprise. We're gonna talk about some pixel stuff, some design system stuff, some motion stuff. And then, in the sidebar, we're gonna talk about sharing work in progress and, some of the observations I've had having interviewed now, hundreds of design teams and talked with different teams of all sizes, shapes, and figuring out what is causing a mismatch in, you know, what managers want designers to do and what designers want to do when it comes to sharing work in. So that'll be in the sidebar. Speaking of which Sidebar side. We have some new, very important pixels. Hey. Welcome to the fam. Some new and returning very important pixels. Welcome in. Ophelia Lung, Leo, Yule Albert, Mark Gill, Brighton, Rich Beckett, Tibor, David Mills, Ava Liao, and Shannon Ma. Welcome. Welcome. Welcome. I recognize some names in there. Yeah. Yeah. Yeah. So everyone coming into the the VIP lounge, be sure to catch this week's sidebar talking about sharing work in progress. If you didn't know, we're a listener supported podcast. That means that people just like the aforementioned list of very important pixels support us on Patreon. And in return, they get access to sweet, sweet bonus content. We call it the sidebar. Sidebar. Sidebar. So if you, get through this episode and you're just hankering for a little more design to tickle your eardrums, head to patreon.com/designdetails where you can get the sidebar and support us for just a dollar a month. Just a buck a month? Just a buck a month. Alright. Welcome, everybody. Thanks for supporting the show. Here we go. Marshall, main topic time. We've got three. Yeah. So I wanna start with a spicy tweet that I had a little while ago. I said, animating interactive elements and productivity software is good for getting likes on …

Get the full transcript (6,487 words) + summary by email — free

One-time email with the complete transcript and AI summary of this episode. No account needed.

One email, no spam. We’ll also show you what SignalCast does.

Browse all Design Details transcripts →