Vol. 01 — A living catalogue of interface craft

Design is how it works.

Don't just look at great interfaces. Touch them. Every exhibit on this page is live, with a short note on why it works.

Enter the gallery Feel the principles
Live exhibits
0
Principles to feel
0
Design tools
0
Dependencies
0
01

Exhibits, in motion

Twelve small interactions that turn functional interfaces into ones people love. Each one is live, so try them.

Atelier®
4921  ••••  ••••  0042
Card holderDieter Rams
Expires10/30
E.01 · Depth

Perspective tilt

A light 3D tilt and a moving glare make a flat rectangle feel like something you're holding.

E.02 · Attraction

Magnetic button

The target leans toward your cursor. It feels eager, and it's a little easier to hit.

E.03 · Continuity

Sliding segments

The indicator slides between options instead of jumping, so your eye always knows where it went.

Focus mode Off — notifications on
E.04 · Physicality

Squishy switch

Press and hold: the thumb stretches like a real material, and a spring overshoot makes it feel alive.

E.05 · Celebration

Burst of joy

A tiny reward goes a long way. Particles and a rolling counter make an ordinary action feel good.

    E.06 · Hierarchy

    Stacked toasts

    New messages stack neatly instead of piling up. Hover to fan them out.

    AK
    Ada Kalmár
    Principal Designer · Budapest
    Obsessed with typography, motion curves, and making software feel like a well-made object.
    E.07 · Anticipation

    Skeleton loading

    Placeholders shaped like the real content make waiting feel shorter than a spinner does.

    E.08 · Confirmation

    Copy, confirmed

    The icon changes in place, so you see the confirmation right where you clicked.

    Warmth62%
    E.09 · Precision

    Expressive slider

    Tick marks, a live value, and a thumb that grows when you grab it. Small cues that build confidence.

    E.10 · Safety

    Hold to confirm

    For destructive actions, a deliberate hold replaces the "Are you sure?" dialog nobody reads.

    • 8+ characters
    • Upper & lowercase
    • A number
    • A symbol
    E.11 · Guidance

    Live validation

    Show the rules up front and check them off as you type, instead of rejecting the form after submit.

    What makes an interface feel fast?

    Immediate feedback. Respond within 100ms, even if the real work takes longer. Optimistic updates help too.

    Why do easing curves matter?

    Nothing in the real world moves linearly. An ease-out start feels responsive, and the soft landing feels natural.

    How much animation is too much?

    If you notice the animation more than the result, it's too much. Motion should explain what happened, not perform.

    E.12 · Disclosure

    Fluid accordion

    Content opens to its natural height. Nothing snaps, and the page around it moves smoothly.

    02

    Principles, felt

    UX laws are easy to quote and easy to forget. These demos let you feel them instead.

    P.01

    The Doherty Threshold

    People stay engaged when the system responds in under 400ms. Press each button and compare.

    P.02

    Fitts's Law

    The time to hit a target depends on its size and distance. Click five dots, then change the size and try again.

    Avg —
    P.03

    Law of Proximity

    Same sixteen dots, different meaning. Spacing alone tells the eye what belongs together.

    P.04

    Visual Hierarchy

    Same content, same layout. Size, weight, and color decide what you read first.

    Pro plan $24/month Everything in Starter, plus unlimited projects and priority support. Start free trial
    Hierarchy
    03

    The Lab, tools

    Good systems start with good foundations. Try a modular type scale, or build a color ramp in a perceptual color space.

    L.01

    Modular type scale

    Perfect Fourth 1.333
    L.02

    OKLCH color ramp

    Hue 28°

    Click a swatch to copy it. Because OKLCH is perceptually uniform, each step looks evenly spaced, whatever the hue.

    04

    Process, slowly

    Great interfaces aren't drawn. They're the result of many decisions, each one a little better than the last.

    01 / 06 — Observe
    1. 01

      Observe

      Watch real people use real things. The best insights come from noticing what they do, not what they say.

    2. 02

      Define

      Name the problem precisely. A well-framed problem is already half solved.

    3. 03

      Sketch

      Go wide before going deep. Fifty bad ideas on paper cost less than one in code.

    4. 04

      Prototype

      Make it real enough to touch. Motion, timing, and feel can't be judged in a static mockup.

    5. 05

      Refine

      Sweat the 2px. Tune the curves. Remove one more thing. Craft is cumulative.

    6. 06

      Ship

      Release it, learn from it, and start again. A design isn't finished until people are using it.

    05

    Index, of inspiration

    Studios, products, and people who keep raising the bar. Worth studying closely.

    esc
    ↑↓ navigate↵ select