Karl Koch | 10 Principles for Fluid UI
karlkoch.me · 2,037 words · saved by 1 readers
Physics-based, interruptible motion and direct manipulation make interfaces respond to input with weight, continuity, and clear spatial relationships.
Fluid interfaces have physical weight. Elements respond like objects, closing the gap between your finger and the screen. Fluid interfaces don’t display state changes, they animate through them. Building them requires a specific way of thinking that sits at the intersection of physics, interaction design, and engineering craft. I use these 10 principles to assess whether an interface responds as a continuous system or a sequence of disconnected states. 1. Motion Should Be Physics-Based, Not Time-Based The default approach to animation on the web is time-based: pick a duration and an…
saved by
related reading
- Designing Fluid Interfaces - WWDC18 - Videos - Apple Developerdeveloper.apple.com
- Animate with springs - WWDC23 - Videos - Apple Developerdeveloper.apple.com
- Great Animationsemilkowal.ski
- On layout choreographykarlkoch.me
- The physics behind spring animations - The Blog of Maxime Heckelblog.maximeheckel.com
- Invisible Details of Interaction Designrauno.me
- Details That Make Interfaces Feel Betterjakub.kr
- Responses: A Brief Rant on the Future of Interaction Designworrydream.com
- 12 Principles of Animationuserinterface.wiki
- Learning From Terminals to Design the Future of User Interfaces — brandur.orgbrandur.org
- Web Interface Guidelinesrauno.me
- Web Interface Guidelinesvercel.com