An interactive companion to UX · UI · Human–Computer Interaction
Click, drag, score, simulate. Built around Jesse Garrett's five planes, Nielsen's heuristics, Fitts's Law, Gestalt principles, accessibility, research methods, and emerging trends.
Jesse Garrett's model — abstract at the bottom, concrete at the top. Click a plane to expand. Drag the slider to peel through.
Scroll the timeline. Click a marker to read more.
Personas turn vague "users" into concrete people you can design *for*. Fill the form — generate a card.
Junior product manager
"If I have to read the manual, the design failed."
Mobile-first
Run usability tests without IT involvement
Tools that hide pricing behind a sales call
Drag each requirement into Must / Should / Could / Won't (MoSCoW). The scope is whatever you commit to.
💡 If everything is "Must", nothing is. Garrett: scope creep is the silent killer of UX.
Drag the items into categories that make sense to *you*. Then compare with how real users would group them — that's how information architecture is born.
Add boxes for header, nav, content, sidebar, footer. Drag and resize. Low-fidelity, on purpose — wireframes are about arrangement, not aesthetics.
Visual design is a system, not a vibe. Move the sliders → watch the preview update.
Change one variable, every component updates. This is what "Surface plane" looks like in modern frontend.
Card
Reusable surface. Inherits radius, color, spacing.
Pick an app you use daily. Score each heuristic 1–5. Get an instant audit.
Score: — / 50
MT = a + b · log₂(D/W + 1) — the time to hit a target grows with distance and shrinks with target size. Click each blue dot as fast as you can.
Hits: 0 / 10
Avg time: — ms
Predicted (Fitts): — ms
The brain groups visual elements before you consciously notice. Designers exploit this constantly.
Based on the Nielsen Norman Group framework. Hover the quadrant to read more.
Click a method to see when to use it, what it gives you, and what it costs.
Toggle the filters. Your design must work for all of these users — that's not extra, that's the baseline.
Enter your email and we'll send you a link. Need help?
💡 If you rely on color alone (the dots), users with color blindness lose information. Add labels, icons, or shapes.
Sample text — can you read this?
Contrast ratio: —
WCAG: — AA · — AAA
The same content rendered at three breakpoints. Watch how layout (not content) adapts.
💡 Mobile-first isn't about phones — it's about forcing yourself to cut to the essential before you have room to bloat.
Click each card. What's the upside? What's the dark pattern lurking?
Ten questions across the whole syllabus. No login, no tracking, just feedback.