UI/UX Fundamentals

UI vs. UX: What's the Difference?

UI (User Interface) is what something looks like. UX (User Experience) is how it FEELS to actually use it, start to finish. They sound similar, but they're genuinely different skills, and good products need both.

Visual Hierarchy & Typography

Visual hierarchy means using size, weight and spacing to guide someone's eye to what matters most, first. Without it, everything shouts for attention at the same volume — which really means nothing stands out at all.

Color & Contrast

Color can carry real meaning and guide attention, but low contrast between text and its background is one of the single most common — and most damaging — mistakes a design can make.

Spacing & Alignment

Generous, consistent spacing and clean alignment often separate an amateur-looking layout from a professional one — more than any clever color choice ever will.

Wireframing & Prototyping

A wireframe is a rough, low-detail sketch of where things sit on a screen — deliberately plain and unfinished-looking, so that early feedback is about structure and flow, not about which blue looks nicer.

Designing with Accessibility in Mind

Accessible design isn't a separate, optional extra step tacked on at the end — decisions about contrast, text size, and how big a button is made early on affect who can actually use what you build at all.

Typography Deep Dive: Font Pairing, Line-Height & Readability

Typography — the craft of choosing and arranging type — quietly decides whether reading something feels effortless or exhausting. This lesson covers font pairing, line-height, and comfortable line length.

Color Theory Basics: Building Harmonious Palettes

A previous lesson covered contrast — making text readable. This one covers harmony — choosing sets of colors that feel like they genuinely belong together, using the color wheel as a simple, repeatable tool.

Mobile-First & Responsive Design Principles

Most people will meet your design on a phone first. Mobile-first design means starting with the smallest, most constrained screen and deliberately adding complexity as space allows — not the other way around.

User Flows: Mapping the Journey Before You Design the Screen

A user flow is a simple step-by-step map of exactly how someone moves through your product to complete one specific goal — planned out BEFORE any individual screen gets designed in detail.

Microinteractions & Feedback States

Small, immediate responses to a click, tap or wait — a button changing color, a spinner appearing — quietly reassure people that the product is actually responding to them. Without that feedback, every action feels uncertain.