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

Frontend Mentor
Professional designs to build from, which teach spacing and type by making you match them

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 screens of your own app restyled with a written spacing scale, type scale and palette, every text colour pair checked for contrast, and before and after screenshots.

Tauseef's advice

Most developer-built interfaces look off for the same four reasons: random spacing, too many font sizes, low-contrast grey text and no clear primary action. Fix those four and your app will look designed, even without a designer.