# Learn UI: interfaces, explained interactively # Learn UI: An interactive guide to design engineering: how interfaces are built to feel right, from motion and typography to systems and craft. [Start reading](https://learn-ui.com/chapters/introduction) [Continue reading](https://learn-ui.com/chapters/introduction) [People](https://learn-ui.com/chapters/people)[Glossary](https://learn-ui.com/chapters/glossary)[Further reading](https://learn-ui.com/chapters/reading) ## What this book is An interactive book about design engineering, read from the people who do it: Rauno Freiberg, Emil Kowalski, Maggie Appleton, Bartosz Ciechanowski, Kathryn Gonzalez, Jim Nielsen, Paco Coursey, Steve Ruiz, Amelia Wattenberger, Andrew Swank. Gestures, motion, components, craft, taste, explanation, canvases, and the career, with every claim traced to its source. Each chapter pairs prose with figures you operate: set a spring and watch it overshoot, swipe a card and see when the action commits, stack toasts and find out why keyframes fail. Nothing shifts the page, and the glossary quotes the authors verbatim. ## Try one This one is from the Motion chapter. A spring is described by its physics, not by a duration: change the stiffness and damping, then press play and watch the same equation drive the curve and the dot. > Figure. Spring playground. A spring has no duration. Its stiffness, damping, and mass decide how it settles, and the curve, the playhead, and the dot are the same equation evaluated at the same time. Move a slider, watch the curve, then play.Illustrative numbers ## Contents ### [Introduction](https://learn-ui.com/chapters/introduction)[](https://learn-ui.com/chapters/introduction) - [A role between two rooms](https://learn-ui.com/chapters/introduction/a-role-between-two-rooms) - [Why the details are invisible](https://learn-ui.com/chapters/introduction/why-the-details-are-invisible) - [How to read this book](https://learn-ui.com/chapters/introduction/how-to-read-this-book) ### [Invisible details](https://learn-ui.com/chapters/invisible-details)[](https://learn-ui.com/chapters/invisible-details) - [Metaphors and learned gestures](https://learn-ui.com/chapters/invisible-details/metaphors) - [Kinetic physics and swipe gestures](https://learn-ui.com/chapters/invisible-details/kinetic-physics) - [Responsive gestures](https://learn-ui.com/chapters/invisible-details/responsive-gestures) - [Spatial consistency and fluid morphing](https://learn-ui.com/chapters/invisible-details/spatial-consistency) - [Frequency and novelty](https://learn-ui.com/chapters/invisible-details/frequency-and-novelty) - [Fitts's law](https://learn-ui.com/chapters/invisible-details/fitts-law) - [Touch, context, and fidgetability](https://learn-ui.com/chapters/invisible-details/touch-and-context) ### [Motion](https://learn-ui.com/chapters/motion)[](https://learn-ui.com/chapters/motion) - [You don't need animations](https://learn-ui.com/chapters/motion/you-dont-need-animations) - [Easing: where the speed goes](https://learn-ui.com/chapters/motion/easing) - [Springs and duration](https://learn-ui.com/chapters/motion/springs) - [Practical tips](https://learn-ui.com/chapters/motion/practical-tips) - [The magic of clip-path](https://learn-ui.com/chapters/motion/clip-path) - [Choreography and depth](https://learn-ui.com/chapters/motion/choreography-and-depth) - [Friction as a feature](https://learn-ui.com/chapters/motion/friction) ### [Components](https://learn-ui.com/chapters/components)[](https://learn-ui.com/chapters/components) - [A toast that stacks](https://learn-ui.com/chapters/components/toast) - [A drawer that follows the finger](https://learn-ui.com/chapters/components/drawer) - [A command menu with pages](https://learn-ui.com/chapters/components/command-menu) - [A modal that respects focus](https://learn-ui.com/chapters/components/modal) - [Dark mode without the flash](https://learn-ui.com/chapters/components/dark-mode) ### [Craft](https://learn-ui.com/chapters/craft)[](https://learn-ui.com/chapters/craft) - [Coding is designing](https://learn-ui.com/chapters/craft/coding-is-designing) - [HTML first](https://learn-ui.com/chapters/craft/html-first) - [Sanding the interface](https://learn-ui.com/chapters/craft/sanding-ui) - [Grids and fluid type](https://learn-ui.com/chapters/craft/grids-and-type) - [Accessibility as craft](https://learn-ui.com/chapters/craft/accessibility) - [Performance and reduced motion](https://learn-ui.com/chapters/craft/performance-and-reduced-motion) ### [Taste](https://learn-ui.com/chapters/taste)[](https://learn-ui.com/chapters/taste) - [Developing taste](https://learn-ui.com/chapters/taste/developing-taste) - [Training judgement](https://learn-ui.com/chapters/taste/training-judgement) - [Novelty and contrast](https://learn-ui.com/chapters/taste/novelty-and-contrast) - [The AI aesthetic](https://learn-ui.com/chapters/taste/the-ai-aesthetic) ### [Explaining with interaction](https://learn-ui.com/chapters/explaining)[](https://learn-ui.com/chapters/explaining) - [Explorable explanations](https://learn-ui.com/chapters/explaining/explorable-explanations) - [Data into meaning](https://learn-ui.com/chapters/explaining/data-into-meaning) - [Digital gardens and visual essays](https://learn-ui.com/chapters/explaining/digital-gardens) - [Interface patterns worth knowing](https://learn-ui.com/chapters/explaining/interface-patterns) ### [Canvases and tools for thought](https://learn-ui.com/chapters/canvases)[](https://learn-ui.com/chapters/canvases) - [Prototypes that become products](https://learn-ui.com/chapters/canvases/prototypes-to-products) - [Drawing a perfect stroke](https://learn-ui.com/chapters/canvases/perfect-stroke) - [The canvas meets the model](https://learn-ui.com/chapters/canvases/canvas-and-models) - [Tools for thought as cultural practices](https://learn-ui.com/chapters/canvases/tools-for-thought) ### [The career](https://learn-ui.com/chapters/career)[](https://learn-ui.com/chapters/career) - [The attributes of a design engineer](https://learn-ui.com/chapters/career/attributes) - [Where the role lives](https://learn-ui.com/chapters/career/where-the-role-lives) - [The case for design engineers](https://learn-ui.com/chapters/career/the-case) - [Your own site as proof](https://learn-ui.com/chapters/career/your-own-site) - [Where to go next](https://learn-ui.com/chapters/career/where-to-go-next) ### [People](https://learn-ui.com/chapters/people)[](https://learn-ui.com/chapters/people) The designers and engineers this book reads ### [Glossary](https://learn-ui.com/chapters/glossary)[](https://learn-ui.com/chapters/glossary) Every term, defined in its author's words ### [Further reading](https://learn-ui.com/chapters/reading)[](https://learn-ui.com/chapters/reading) - [Essays and talks](https://learn-ui.com/chapters/reading#essays) - [Tools and libraries](https://learn-ui.com/chapters/reading#tools) - [People and sites](https://learn-ui.com/chapters/reading#sites) - [Hubs and resources](https://learn-ui.com/chapters/reading#hubs)