Design topic

UI Design

UI design is where visual craft meets interface convention: turning a layout into components, states, and patterns people already know how to use. It is less about inventing and more about applying proven solutions correctly, which is why the best UI resources pair a pattern reference with a sharp eye for spacing and hierarchy.

Start here

EssentialBook

Refactoring UI

Adam Wathan, Steve Schoger

A tactics-first book and video pairing that teaches developers and non-designers how to make interfaces look designed.

Most design books explain principles; this one hands you rules you can apply in the next five minutes: start with too much white space and remove, establish hierarchy with weight and color before size, design the empty and error states first. It is the fastest way for someone who can build UI to make it look intentional.

UI DesignintermediatePaid6 hours

Best resources

EssentialWebsite

Atomic Design

Brad Frost

Brad Frost's free online book introducing atomic design: composing interfaces from atoms, molecules, organisms, templates, and pages.

Design SystemsintermediateFree3 hours

RecommendedCourse

Design+Code

Meng To

Meng To's course platform covering UI design, Figma, and building real apps.

FigmaintermediateSubscription20 hours

RecommendedWebsite

Every Layout

Heydon Pickering, Andy Bell

Heydon Pickering and Andy Bell's guide to resilient, algorithmic CSS layout patterns.

UI DesignintermediatePaid4 hours

RecommendedWebsite

Inclusive Components

Heydon Pickering

Deep, component-by-component guides to building accessible interface patterns.

AccessibilityadvancedFreemium6 hours

RecommendedBook

Practical UI

Adham Dannaway

Adham Dannaway's book of concrete rules for designing clean, usable interfaces.

UI DesignbeginnerPaid4 hours

ReferenceDocumentation

Apple Human Interface Guidelines

Apple

Apple's official guidance on designing for its platforms, and a model of clear platform documentation.

UI DesignintermediateFree2 hours

ReferenceWebsite

Checklist Design

A curated collection of UI and UX best-practice checklists for common components and pages.

UI DesignbeginnerFree30 min

ReferenceWebsite

Grid by Example

Rachel Andrew

Rachel Andrew's collection of CSS Grid examples and patterns.

Visual DesignintermediateFree1 hour

ReferenceDocumentation

Material Design 3

Google

Google's open design system, covering foundations, components, and design tokens.

UI DesignintermediateFree3 hours

ReferenceWebsite

Mobbin

A searchable library of real mobile and web app screens and user flows.

UI DesignbeginnerFreemium30 min

ReferenceTool

Storybook

An open-source tool for building, testing, and documenting UI components in isolation.

Design SystemsintermediateFree2 hours

ReferenceWebsite

The Component Gallery

Iain Bean

A reference of UI components and how real design systems name and build them.

Design SystemsintermediateFree30 min

Collections

Sequenced path

Learn Figma Properly

Reach real working fluency in the skills that matter: auto layout, components, and variables.

4 steps · About 10 hours over 2 weeks

Sequenced path

Typography for Interfaces

Set type in interfaces with intent: readable body text, clear hierarchy, and typefaces chosen for reasons.

4 steps · About 14 hours over 3 to 4 weeks

Key concepts

Layout Components Patterns Responsive States Focus management

Connects to

Visual Design Design Systems Interaction Design