an open notebook on the discipline of UX engineering

We engineer the feel of software so it feels inevitable.

uxe.fyi is an open-source home for UX Engineering — the multidisciplinary craft that lives between engineering, design, and human behavior. A living handbook, a career bridge, a community of people who care how interfaces feel under the cursor.

what UXE looks at
Search 412 patterns…⌘K
Skeleton loaders120 ms
Optimistic UI0 ms
Debounced search240 ms
Open pattern
↗ source
200ms · feels instant
live demo · 00
×invisible friction×optimistic UI×calm interfaces×perceived performance×interface trust×fitts’s law×design systems×motion choreography×cognitive load×emotional latency×micro-copy×a11y as experience×state machines×easing curves×progressive disclosure×invisible friction×optimistic UI×calm interfaces×perceived performance×interface trust×fitts’s law×design systems×motion choreography×cognitive load×emotional latency×micro-copy×a11y as experience×state machines×easing curves×progressive disclosure
01 — What is UX Engineering?

One role,
many shapes.

UX Engineering lives between engineering and design — but never in the same place twice. Hover any role to see how a UXE compares to the discipline next door.
↑ Closer to design
↓ Closer to engineering
← Implementation
Product →
Role: UX Engineer

Engineers the experience. Builds production interfaces with the rigor of an engineer and the empathy of a designer.

Frontend systemsInteraction designAccessibilityMotionDesign systemsProduct thinking
Hover other roles to compare →
02 — Career bridges

There is, finally,
a clear path in.

UX Engineering attracts people from very different starting points. Pick a path that already looks like you, and follow it without guessing.
01Interaction design
02Accessibility
03Design systems
04Visual literacy
05User empathy
Open full roadmap
01HTML / CSS depth
02JavaScript & React
03Component architecture
04Performance
05Engineering constraints
Open full roadmap
01Frontend foundations
02Interaction edges
03A11y testing
04UI state modeling
05User empathy
Open full roadmap
01HTML, CSS, JS
02A design eye
03One real project
04A portfolio of details
05Open-source contribution
Open full roadmap
01Visual fluency
02Frontend basics
03Prototyping in code
04Systems thinking
05A specialty
Open full roadmap
04 — Interaction breakdowns

Look closer.
Touch them.

Real, working interactions — each isolated and annotated. Play with the controls. Read the why. Steal what you need for your own work.
time
Optimistic UI
Apply the change instantly; reconcile with the server in the background. The user never waits for the network for actions that almost always succeed.
#perceived performance#state
time
Skeleton vs spinner
A spinner says ‘something is happening, please wait.’ A skeleton says ‘this is the shape of what you’re about to see.’ One demands attention; the other prepares you.
#perceived performance#attention
craft
Fuzzy search
Match what the user means, not what they typed. Forgiving search reduces friction and reveals the depth of your content without forcing perfect spelling.
Optimistic UI patterns
Empty state principles
Loading state taxonomy
Error message anatomy
Color contrast & a11y
#typing#matching
try: "otmsc" or "empty"
motion
Easing curves
An ease-out moves like a car braking — it settles. A spring feels alive. Linear feels mechanical. Choosing the right curve is choosing how the interface 'breathes'.
cubic-bezier(0.2, 0.7, 0.2, 1)
#choreography#feel
trust
Form choreography
Don't yell at the user the moment they start typing. Validate on blur, recover on input. Errors should arrive softly and leave the second they're resolved.
that doesn't look like an email — try again
#feedback#a11y
untouched
trust
Empty states
Most products treat empty states like errors. The best ones treat them like opportunities — moments to teach, invite, or set tone before anything else exists.
Nothing here yet.
Your saved articles will appear here. Want to see how it works?
#onboarding#tone
05 — Built in public, day one

An open notebook
waiting for its people.

uxe.fyi is open-source and brand new. The structure is here — the handbook, the roadmaps, the breakdowns. Most of it is scaffolding, waiting for people who care about this stuff to fill it in.
1
contributor
0
guides
6
live breakdowns
0
roadmaps
The crew, so far
U
uxe.fyi
maintainer · just opened the repo

uxe.fyi just opened its doors. Be the second name on the contributor list.

Activity
live
U
uxe.fyi initialized the repository
just now
U
uxe.fyi shipped six live interaction breakdowns
today
U
uxe.fyi opened discussion: what should uxe.fyi cover first?
today
See all activity →
The premise

Software is made of feelings. The people who care about that — who measure interfaces in milliseconds and millimeters and small acts of trust — deserve a name, a discipline, a community. This is for them.