Learn UI/UX Design Fundamentals with Sliders
From spacing, alignment, color, and typography to components and motion, learn 78 concepts by hand and see them with your own eyes. A free learning site for developers who find design intimidating and for front-end beginners. Search or pick a concept on the left to get started.
Concepts you can try right now
Padding & MarginPadding and margin are the empty space inside and around an element's border — the value you tune most often in design.HierarchyHierarchy is making the order of importance among elements visible through differences in size, weight, color, and spacing, so users know what to look at first.Contrast RatioContrast ratio is the brightness difference between text and its background expressed as a single ratio, the core measure of readability and accessibility.ProximityProximity is the tendency of the eye to bundle nearby elements into one group, so spacing alone shows which items belong together — a core Gestalt principle.Button AnatomyButton anatomy is the set of parts a button is made of — label, container, padding, and radius — each adjustable on its own to get the size and tone you want.Transition & EasingTransition and easing shape how a value moves from A to B over time — its duration and the curve of speed it follows — instead of snapping there instantly.
How it works
- For each concept, drag the sliders and flip the toggles yourself to see how the values change the screen.
- Definition, why it matters, common mistakes, practical tips, and related concepts — each concept covered in depth.
- Assemble what you learn into a single design system in the Composer.