Stage 2 of 8 · 7 lessons · ~4 weeks

Visual design fundamentals

The rules that make a screen look ordered and easy to scan: grids, spacing, type, colour, hierarchy and alignment. These are learnable rules, not talent.

Start: Layout grids and columns

Lessons· one lesson for each topic, in this order

Do this

Set up a 4-column mobile grid and a 12-column desktop grid, and place one screen on each.
Pick a spacing scale based on 4 or 8 and use only those values for a week.
Define a type scale with no more than 6 sizes and apply it to one screen.
Build a palette of neutrals, one primary colour and three semantic colours, each with light and dark shades.
Check every text and background pair for contrast and fix any that fail.
Squint-test each screen and write down what stands out first.
Recreate one screen from a well-designed app exactly, measuring its spacing and type.

Start with· follow one of these

GuideFree
Material Design 3
Google
Free, detailed foundations on layout, colour roles and type scales from a system used by millions of apps
BookPaid
Refactoring UI
Adam Wathan and Steve Schoger · About $99
Paid, practical visual design tactics explained for people without a design background

Practise

Mobbin
Study how real apps handle layout and hierarchy, then recreate a screen to train your eye

Keep handy

WebAIM Contrast Checker
Check every text and background pair against WCAG contrast ratios in seconds
Laws of UX
Proximity, similarity and common region explained with examples, for when grouping feels off

Also worth your time

Visual Hierarchy in UX: Definition (opens in a new tab)Read
How size, colour, contrast and spacing create reading order, with examples

Before moving on: Three redesigned screens from an app you use, each with a written note on the grid, spacing scale, type scale and colour choices, and every text colour pair checked for contrast.

Tauseef's advice

Copy good work before you invent. Recreate three well-made screens pixel for pixel, then redesign a weak one using the same rules. Measuring the spacing and type in a professional app teaches more than a month of reading about it.