Visual design fundamentals

The learnable rules that make a screen look ordered: grids, spacing, type, colour, hierarchy, grouping and icons.

Layout grid

Also called column grid, 12-column grid

What: Columns separated by gutters inside outer margins, used to align content. Common choices are 4 columns on phones, 8 on tablets and 12 on desktop.
Why: Aligning to columns makes screens feel ordered and makes responsive layouts easier, because blocks can span fewer columns on smaller screens.

Watch out

Setting up a grid and then placing elements a few pixels off it.

Breakpoints

What: The screen widths at which a layout changes, for example from one column to two.
Why: They let one design adapt to phones, tablets and desktops. The best breakpoints are where the content starts to look wrong, not popular device sizes.

Watch out

Designing only the desktop layout and leaving the small screens to be squeezed later.

Spacing scale

Also called 8-point grid, 4-point grid, spacing system

What: A fixed set of distances, often multiples of 4 or 8 pixels (4, 8, 12, 16, 24, 32, 48, 64), used for all padding and gaps.
Why: It makes spacing consistent, speeds up decisions and maps directly to tokens in code.

Watch out

Eyeballing every gap, which produces 13, 15 and 17 pixel gaps that look slightly off.

Proximity

Also called law of proximity

What: The principle that items placed close together are seen as related.
Why: Space is your main grouping tool: a label close to its input, a gap between sections. It often removes the need for borders.

Watch out

Equal spacing everywhere, which destroys grouping.

Type scale

Also called font sizes, typographic scale

What: A small fixed set of font sizes, such as 12, 14, 16, 20, 24, 32 and 40, each clearly different from the next.
Why: It creates consistent hierarchy and becomes text styles in Figma and tokens in code.

Watch out

Using many sizes that differ by one or two pixels, which looks accidental.

Line length and line height

Also called measure, leading, line length, line height

What: Line length is the number of characters per line; line height is the vertical space per line. Body text reads well at about 45 to 75 characters and a line height of about 1.4 to 1.6.
Why: Very long or tightly set lines tire the eye and make people lose their place.

Watch out

Letting body text run the full width of a large desktop screen.

Colour palette

Also called colour system, color palette

What: A planned set of colours: neutrals for text and surfaces, one primary colour for actions, and semantic colours for success, warning and error, each in several shades.
Why: A small, planned palette keeps screens calm and makes actions and states obvious.

Watch out

Picking colours one at a time per screen, ending up with nine slightly different greys.

Visual hierarchy

Also called hierarchy

What: The order in which the eye reads a screen, controlled by size, weight, colour, contrast, position and space.
Why: People scan rather than read. A clear first, second and third point of focus gets them to the purpose and the main action fast.
Example: Squint at the screen: the page title and the primary button should still stand out, while metadata fades.

Watch out

Making everything bold or brightly coloured, so nothing stands out.

Gestalt principles

Also called similarity, common region, continuity

What: Rules describing how people perceive groups: proximity, similarity, common region, continuity and closure.
Why: They explain why a layout feels grouped or messy, and let you group content with space and alignment instead of extra lines.

Watch out

Solving every grouping problem with borders and dividers, which adds visual noise.

Icon usage

Also called icons, icon set

What: Using symbols to aid recognition, from one consistent set with the same stroke, size and style.
Why: Familiar icons speed up scanning; unfamiliar ones slow people down unless they have a text label.

Watch out

Icon-only buttons with abstract symbols and no accessible name.

Go deeper