Composition in design: the basic rules for beginners

Step 1

Hierarchy: what matters most

Nielsen Norman Group defines visual hierarchy as guiding the eye so that people attend to elements in the order of their importance. Before arranging anything, number the elements: what should be seen first, second and third. Then make that order visible through scale: the most important thing is the largest.

• •NN/g advises sticking to three sizes: small, medium and large, for example a heading, a subheading and body text;
• •if two elements are equally large and bright, they compete for attention and neither wins.

💡 The squint test NN/g describes: squint or slightly blur the layout. Whatever stays visible is what gets read first.

Step 2

Contrast: show the difference

Contrast is a noticeable difference between elements in size, color, saturation or shape. It signals that elements differ in meaning or function. What matters is not the color itself so much as the difference between an element and its surroundings.

• •one accent works harder than five: if everything is highlighted, nothing is;
• •NN/g advises using no more than three contrast variations in complex designs;
• •don't rely on color alone: reinforce the difference with size, font weight or position, because people with color blindness may not see the difference between some hues.

Step 3

Grouping: proximity and similarity

Gestalt principles explain how we automatically assemble separate elements into a whole. Three of them come in handy every day:

• •proximity: elements placed close together are perceived as one group, which is why a caption should sit closer to its image than to the next one;
• •similarity: elements with the same color, shape or size seem related, so style things with the same role the same way;
• •common region: a frame or background panel also binds elements into a group.

💡 Spacing within a group should be clearly smaller than spacing between groups. It's the quickest way to bring order without any lines or boxes.

Step 4

Balance: distribute the weight

NN/g describes balance as an equal, but not necessarily symmetrical, distribution of visual weight on both sides of an imaginary axis. A large, dark or bright element is “heavier” than a small, light one. Types of balance:

• •symmetrical: calm and static;
• •asymmetrical: dynamic, creating a sense of movement and energy;
• •radial: elements radiate from a center and lead the eye to it.

💡 Empty space has weight too. Don't try to fill every corner: white space lets the main element breathe.

Step 5

Grids and alignment

A grid is a structure of columns, gutters between them and margins at the edges that elements are aligned to. NN/g notes that grids make layouts cohesive and easier for people to scan. Start simple:

• •choose the number of columns for the format: a poster or post often needs only a few, a website more;
• •align the edges of text and images to grid lines rather than by eye;
• •keep equal margins at the edges and equal gutters between columns;
• •breaking the grid on purpose is a way to create emphasis, not an accident.

💡 A one-week exercise: every day, break down one poster or web page by finding the grid, the groups and the reading order. Share your analysis in the community and compare it with what others see.