Layout and space

Visual hierarchy is the order in which the eye notices things: first, second, third. Open the home page of Le Monde. The main headline and its photo are the largest things on the page, so you see them first. They're the focal point, the place where the eye goes before any other. Then come the other headlines, then the short texts under them. Nobody reads a home page from top to bottom. Visitors scan it: their eyes jump between the large and bright things, looking for what interests them.

Studies that follow the eyes of readers found two common paths. On pages full of text, such as search results, the eye reads the first lines across, then moves down the left edge and reads less and less of each line. This is the F-pattern. On simple pages with little text, such as a landing page, the eye goes from the top left to the top right, then diagonally to the bottom left, then across again. This is the Z-pattern. The important things should sit on these paths.

A designer sets the hierarchy with size, weight, colour, position and the space around each element. To check it, step back from the screen, or squint (half close your eyes) until the details blur. What still stands out is what visitors see first. This is the squint test.

"Above the fold" is a phrase from newspapers, where it means the top half of a folded paper. On the web, it means what shows before anyone scrolls. On a phone, that's very little. Scroll depth is how far down the page visitors go, and many leave before the end. So the most important things go near the top. On your portfolio, that's your name, what you do, and a way to reach your projects.

The diagram is a wireframe: a simple drawing of a page in grey boxes and lines, with no real colours or pictures. Designers use wireframes to decide the layout and the hierarchy before anything else. Its numbered marks point at words from the three lessons on design: hierarchy, contrast, line length, the grid and spacing, a component and its states.

Layout is where things are placed on the page. Most pages are built on a grid. The grid divides the page into columns, separated by gaps called gutters, and every block starts and ends on a column. A common grid has 12 columns on a computer and 4 on a phone. A photo can take 6 columns and its text the other 6, or three project cards can take 4 columns each. Vinted's items, Deezer's rows of albums and the cards of your portfolio all follow a grid.

Alignment means that elements share the same edges. When the title, the text and the photo of a project start on the same left edge, the page looks planned. A title that starts a few pixels to the right of its photo looks like a mistake, even to visitors who can't say why. In languages read from left to right, the left edge is the strongest, because the eye returns to it at every line.

AI design tools often centre everything. A centred layout works for a short page with one message, such as a login page, or the top of a landing page with one title and one button. With longer content, each line of a centred paragraph starts in a different place, and lists and forms become hard to follow.

On a wide screen, the content usually sits in a container: an invisible box with a maximum width, such as 1,200 pixels, in the middle of the screen. Inside it, lines of text keep a comfortable length. Some elements go beyond the container and fill the whole width of the screen. They're called full-bleed, such as a large photo at the top of a museum's page. A section is one band of the page with one subject, such as "Projects" or "Contact". The order of the sections is part of the layout too. On your portfolio, do the projects come before the "About" text, or after it?

The example below shows the same project twice. On the left, everything is centred. On the right, everything starts on the same left edge. Read the paragraph and the list in each version, and notice where your eye goes at the start of each line. Then, in the code on the left, replace center with left.

Every element on a page is a box, called a block, even when you can't see its edges. Each box can have three layers around its content. Padding is the space inside the box, between its edge and its content. The border is the line around the box, if it has one. Margin is the space outside the box, between it and its neighbours. Designers also talk about the margins of a page: the empty space between the content and the edges of the screen.

Two more words describe the edge of a box. The border radius is how rounded its corners are. A shadow under a box makes it look raised above the page. Designers call this height elevation: the higher the box, the larger and softer its shadow. Rounded cards with soft shadows are another default of AI design tools.

White space, also called negative space, is all the empty space on a page: margins, padding, and the gaps between lines and blocks. It gives the eye a rest, and it shows which things belong together. Museums and luxury brands use a lot of it. A supermarket's page of special offers uses very little.

Designers don't choose each gap by eye. They choose it from a spacing scale, a short list of sizes such as 4, 8, 16, 24, 32 and 48 pixels, and use the same few values everywhere. The page then looks consistent, and the scale becomes design tokens that the developers reuse. A divider, a thin line between two blocks, is another way to separate things. Often, a larger gap does the same job more quietly.

The example below shows two project cards, twice. On the left, the space is padding. The coloured boxes are larger, and the text sits away from their edges, but the two cards touch. On the right, the same space is margin. The cards are apart, but the text touches their edges. Most designs need both. In the code on the right, try padding: 16px instead of padding: 0.

The eye groups what is close. This is called proximity. A caption right under a photo is read as part of it. A caption halfway between two photos could belong to either one. So the space must be small inside a group and larger between groups. Between a project's title and its picture, the gap is small. Between two projects, it's large. When every gap is the same size, nothing seems to belong to anything. Grouping can also use a shared background or a border, but space alone often does it.

Repetition is the use of the same styles for the same kinds of things: every project card with the same layout, every section title in the same size, every gap from the same scale. It brings consistency: the page behaves the same way everywhere, so visitors learn it once. Vertical rhythm is the regular spacing from the top of a page to the bottom, such as the same gap between all the sections. A long page with a clear rhythm still feels calm.

Density is how much a page shows on one screen. An airy page has large gaps and few items, like a museum's page for one exhibition. A compact page has small gaps and many items, like Vinted's search results or a train timetable. The right density depends on what visitors do. Cards in a grid give each item a picture and some text. A list puts one item on each line and shows more of them. A table puts items in rows and columns, which is best for comparing numbers, such as train times and prices. A very long list is often split into pages, with numbered links at the bottom. This is called pagination.

The example below shows the same two photos and captions, twice. On the left, all the gaps are equal, so each caption floats between two photos. On the right, each caption sits close to its photo, with a large gap before the next one. In the code on the right, change 6px to 24px, and watch the groups disappear.

A responsive page rearranges itself to fit the screen. Open Deezer on a laptop, then on a phone. The laptop shows a sidebar on the left and rows of albums. The phone shows the albums one under the other, and the sidebar becomes a bar of icons at the bottom. Both show the same content, arranged in a different way. The viewport is the part of the screen where the page shows: about 375 pixels wide on most phones, and 1,280 pixels or more on a laptop.

A breakpoint is a width at which the layout changes, such as "below 600 pixels, use one column". Between two breakpoints, the layout stretches or shrinks. On a phone, blocks that sat side by side usually stack, one under the other. Stacking also decides the order. If the photo comes before the text on a phone, it pushes the text further down. Mobile first is the method of designing the phone version first, then adding columns as the screen gets wider. Most visitors arrive on a phone, so that's where the layout matters most.

Pictures change too. The aspect ratio is the shape of a picture, written as width to height: 16:9 for a wide video, 1:1 for a square, 4:5 for a portrait photo on Instagram. When a wide photo has to fill a square box on a phone, it's cropped, which means its edges are cut off. Say which part of each photo must stay visible.

Some elements don't move when you scroll. A sticky header stays at the top of the screen once you reach it, like the header of many news sites. A fixed element stays in the same place all the time, such as a chat button in a corner. Both sit on a layer above the page. The order of the layers, called the z-order, decides what covers what. On a phone, a sticky header and a fixed button can hide a large part of a small screen.

The example below is the one from the lesson "Look and layout". Drag the "Width" slider to make the result narrower, as on a phone. At the mark, 480 pixels, you reach the breakpoint, and the three projects stack in one column.

Ask these questions whenever you receive a mockup from an AI tool, a designer or an agency, before anything is built. A mockup is a picture of the finished page, with its colours, type and pictures. It usually comes after the wireframe.

Ask to see the phone version first, and judge it on a real phone in your hand. Check what shows above the fold. On your portfolio, a recruiter should see your name, what you do and a way to reach your projects. A phone version that is only a smaller copy of the desktop page fails most visitors.

Ask the designer to describe the hierarchy: what should visitors see first, second and third? Then compare the answer with what you see when you squint. If they differ, you have your first remark. For example: "The project titles are the same size as the body text, so nothing stands out. After my name, a recruiter should see the projects."

Ask to see the layout with your real content: the longest project title, the project with no picture, the full "About" text. A grid that looks perfect with three short titles can break with one long one.

Ask for a clickable prototype: a mockup whose buttons and links work, so you can try the main user flow. A user flow is the path a visitor follows to reach a goal. On your portfolio, it could be: open the site, open a project, then download the CV. The UI is everything on screen that a person sees and uses. The UX, the user experience, is how it feels to use it, including how easy the flow is. A beautiful UI can hide a poor UX, such as a CV that takes four clicks to find.

More remarks, in the words of this lesson:

• "The gap between a title and its photo is the same as the gap between two projects, so I can't tell which title goes with which photo. Can each title sit closer to its photo?"
• "On a phone, the 'Contact me' button is below the fold, under a large photo. Can it come before the photo?"