463: Design Medley, Vol. 1

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.