UX Fundamentals

The reasoning behind colour, type, and spacing — the frontend interview questions nobody drills.

0 of 30 lessons complete~358 min total

Start track

Sort

Color Theory & ContrastIntermediate"Looks readable to me" isn't a test. Contrast is a ratio computed from rendered luminance, and it's exactly precise enough to pass or fail — which is why colors that look fine on screen still ship broken.13 min · 0/3 questions correct
Typographic Scale & HierarchyIntermediateFont sizes picked one screen at a time drift into noise. A modular scale generates every size from one base and one ratio, so the hierarchy is a system, not a memory test.12 min · 0/3 questions correct
Spacing Systems & the GridIntermediateWhitespace picked one gap at a time is invisible chaos — nobody notices 13px vs 16px directly, but everyone feels the inconsistency. A spacing scale is the fix, the same instinct as a type scale applied to gaps instead of sizes.11 min · 0/3 questions correct
Gestalt Principles & Visual HierarchyIntermediateHierarchy isn't built from 'make the important thing bigger.' It's built from a small set of perceptual rules — proximity, similarity, common region — that the previous two lessons were already quietly using.13 min · 0/3 questions correct
Responsive & Mobile-First ReasoningIntermediateMobile-first isn't 'design for phones first because phones are popular.' It's a constraint discipline: start from the least space and least capability, then add — because a layout that only works with room to spare has no plan for when the room runs out.12 min · 0/3 questions correct
Accessibility Standards: WCAG in PracticeIntermediateWCAG isn't a vague 'be accessible' request — it's a specific, versioned, testable standard organized under four principles, with numbered success criteria and conformance levels. Interviews test whether you know the shape of it, not just the vibe.14 min · 0/3 questions correct
Design Tokens & Consistency at ScaleIntermediateA hardcoded hex value is a decision made once and repeated by hand forever. A token is that same decision named and centralized — the difference between a color and a system.13 min · 0/3 questions correct
Motion & Interaction Design PrinciplesIntermediateMotion is a communication channel, not a decoration budget. The question for every animation isn't 'does this look nice' — it's 'what is this movement telling the user that stillness wouldn't.'12 min · 0/3 questions correct
Information Architecture & Navigation PatternsIntermediateA beautiful nav bar built on the wrong structure is still lost. Information architecture is the decision about what content exists and how it's grouped — made before any pixel of the navigation gets drawn.12 min · 0/3 questions correct
Form Design & Validation UXIntermediateWCAG tells you an error message needs to be programmatically associated with its field. It says nothing about when to show that error, or whether the label should still be there once the field is full — that judgment is this lesson.13 min · 0/3 questions correct
Empty, Loading & Skeleton StatesIntermediate'Show a loading state' collapses three genuinely different situations into one instruction. A spinner, a skeleton, and an empty state each answer a different question, and using the wrong one is a real, common bug.12 min · 0/3 questions correct
Error State & Error Message DesignIntermediate'Error 422' is technically accurate and completely useless to the person reading it. A good error message answers two questions a status code never does: what actually went wrong, and what do I do now.11 min · 0/3 questions correct