Notes
Course notes, written while learning.
Learn UI Design
01 - Introduction
- 01 Begin Here — Learn UI Design Intro The core thesis of Learn UI Design: good design is based in logic, and that logic is learnable.
- 02 Introduction to Figma The 80/20 of Figma — the 20% of features that covers 80% of real design work.
- 03 Setting Up Your Workspace for Rapid UI Design Configuring Figma and your environment so you can design quickly without friction.
- 04 Building Your Design Gut Instinct How to develop a reliable filter for design decisions — and why gut instinct is trainable.
- 05 Starting a New UI Design Project A four-step process for starting any UI project: platform, brand adjectives, goals, and inspiration.
- 06 Finding and Using Design Inspiration Why cataloging good design is a critical skill, and how to use inspiration without copying.
- 07 3 Methods for Designing Above Your Level Three techniques for accelerating your design skill growth beyond your current level.
02 - Fundamentals of UI Design
- 01 Introduction: Analyzing Aesthetics Why aesthetics isn't magic — introduces the six-tool system (alignment, spacing, consistency, lightening, hiding, removing) by demonstrating it in interior design and real UI apps.
- 02 Alignment Deep dive into alignment as a design tool — centering, pixel center-of-mass, baseline alignment, hanging alignment, and when to intentionally break it.
- 03 Spacing The four laws of spacing — how to use white space to separate without cluttering, highlight focal points, and create visual hierarchy at every level.
- 04 Consistency Two concrete strategies for building visually consistent UIs — always designing consistency-first and never making inconsistencies without a reason.
- 05 Sizing Three heuristics for sizing UI elements correctly — from icons and headers to font hierarchies and mobile tap targets.
- 06 Simplicity Six strategies for making UI designs look clean, simple, and modern — building on alignment, spacing, and consistency with lightening, hiding, and removing.
- 07 Lighting and Shadows How the principle of light-from-above governs every shadow and depth effect in UI — from drop shadow recipes to elevation, inset/outset conventions, and glow effects.
UI Collections
General
- 00 Almanac — Design Analysis A design analysis of almanac.io — examining its geometric typography, high-contrast palette, and the 'Big 3' pattern used across five different section layouts.
- 00 Betterment — Design Analysis How Betterment uses blue and yellow to balance trust and opportunity, and why 3D illustration works especially well for financial products.
- 00 Fey — Design Analysis How Fey uses three mechanically different scroll-driven animations — parallax exit, frame-swap typing, and logo-matched broker carousel — to make a single scroll section feel technically masterful.
- 00 Superhuman — Design Analysis How Superhuman uses minimum motion — a fade-in-place logo ticker and scroll-synced navigation — to build a page that feels calm, fast, and never demanding.
- 00 Webflow — Design Analysis How Webflow turns its entire homepage into a live proof of capability — five patterns that make the site feel next level before you've read a single feature.