learn.

Design topic

Visual Design

Visual design is the craft of arranging elements so the eye moves where you intend and the meaning lands before anyone reads a word. It rests on a small set of durable ideas: composition, hierarchy, Gestalt grouping, the grid, color, and how human vision actually works. Master these and every other design skill gets easier, because they are the physics underneath.

Start here

ReferenceBook

Universal Principles of Design

William Lidwell, Kritina Holden, Jill Butler

A browsable encyclopedia of design principles, one concept per two-page spread.

This is the fastest way to build a shared vocabulary of design principles, from Gestalt grouping to the aesthetic-usability effect, each explained on a single spread with an example. Do not read it cover to cover; keep it nearby and look concepts up as they come up in real work. A strong starting point for someone new to visual design.

Visual DesignbeginnerPaid5 hours

Best resources

EssentialBook

Grid Systems in Graphic Design

Josef Müller-Brockmann

The foundational, bilingual manual on using grids to structure layout, by a Swiss-style master.

Visual DesignintermediatePaid6 hours
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.

UI DesignintermediatePaid6 hours
RecommendedWebsite

Every Layout

Heydon Pickering, Andy Bell

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

UI DesignintermediatePaid4 hours
RecommendedBook

Interaction of Color

Josef Albers

Josef Albers's classic experiential course on how colors interact and deceive the eye.

Visual DesignadvancedPaid6 hours
RecommendedBook

Practical UI

Adham Dannaway

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

UI DesignbeginnerPaid4 hours
ReferenceTool

Coolors

Coolors

A fast color palette generator with lock-and-shuffle, contrast and shade views, and export.

Visual DesignbeginnerFreemium30 min
ReferenceWebsite

Grid by Example

Rachel Andrew

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

Visual DesignintermediateFree1 hour

Collections

Sequenced path

Visual Design Fundamentals

Build the perceptual and structural foundation to make deliberate visual decisions instead of nudging by eye.

4 steps · About 12 hours over 3 to 4 weeks

Key concepts

CompositionHierarchyGestaltGridColorVisual perception

Connects to

TypographyUI DesignInformation Design