Cheat sheet: Layout and space

The 53 terms of this lesson, part by part, with the French word a team in France would use.

1. What you see first

Visual hierarchyhiérarchie visuelle: the order in which the eye notices the parts of a page, set by size, weight, colour, position and space.
Focal pointpoint focal: the one place on a page or a screen where the eye goes first.
Squint testtest des yeux plissés: half closing your eyes in front of a page, to see which parts still stand out.
Scanninglecture en diagonale: looking quickly over a page for what interests you, without reading every line.
F-patternlecture en F: the path of the eye on a page full of text: across the first lines, then down the left edge.
Z-patternlecture en Z: the path of the eye on a simple page: across the top, diagonally down, then across the bottom.
Above the foldau-dessus de la ligne de flottaison: the part of a page that shows on the screen before anyone scrolls.
Scroll depthprofondeur de défilement: how far down a page visitors go before they leave it.
Wireframemaquette fil de fer, wireframe: a simple drawing of a page in grey boxes and lines, made to decide the layout before the look.

Layoutmise en page: the way the parts of a page are placed on the screen.
Gridgrille: a set of invisible columns that every block of a page is placed on.
Columncolonne: one of the vertical strips of a grid; a block can take one column or several.
Guttergouttière: the empty space between two columns of a grid.
Alignmentalignement: placing elements so that they share the same edges, often the same left edge.
Centred layoutmise en page centrée: a layout where each line and block is placed in the middle, good for short pages only.
Containerconteneur: an invisible box that holds the content of a page and keeps it to a maximum width.
Maximum widthlargeur maximale: the widest that a block or a text may become, even on a very wide screen.
Full-bleedpleine largeur, à fond perdu: describes a photo or a band of colour that fills the whole width of the screen.
Sectionsection: one band of a page with one subject, such as "Projects" or "Contact".

Blockbloc: any rectangular part of a page, such as a paragraph, a card or a whole section.
Paddingmarge intérieure: the space inside a box, between its edge and its content.
Marginmarge: the space outside a box, between it and its neighbours or the edge of the screen.
Borderbordure: the line around a box.
Border radiusarrondi: how rounded the corners of a box are, given in pixels.
Shadow or elevationombre portée, élévation: a shadow under a box that makes it look raised above the page.
White spaceespace blanc, espace négatif: all the empty space on a page, which rests the eye and groups things.
Spacing scaleéchelle d'espacement: a short list of gap sizes, such as 4, 8, 16, 24 and 32 pixels, used everywhere on a site.
Dividerséparateur: a thin line between two blocks or two items of a list.

Proximityproximité: the rule that things placed close together look as if they belong together.
Groupingregroupement: showing that several things belong together, with space, a shared background or a border.
Repetitionrépétition: using the same style for every element of the same kind, such as every project card.
Consistencycohérence: the same things look and behave the same way on every page, so visitors learn them once.
Vertical rhythmrythme vertical: the regular spacing from the top of a page to the bottom, such as the same gap between sections.
Densitydensité: how much a page shows on one screen, from airy, with few items, to compact, with many.
Cardcarte: a box that shows one item, such as a project, with a picture, a title and a short text.
Listliste: items shown one under the other, one on each line, which fits more on a screen than cards.
Tabletableau: items shown in rows and columns, the best way to compare numbers such as times and prices.
Paginationpagination: a long list split into pages, with numbered links to move from one page to the next.

Responsiveresponsive: describes a page that rearranges itself to fit every screen, from a small phone to a wide monitor.
Viewportfenêtre d'affichage, viewport: the part of the screen where the page shows, about 375 pixels wide on most phones.
Breakpointpoint de rupture: the width at which a layout changes, such as one column instead of three below 480 pixels.
Stackingempilement: placing blocks one under the other, as a phone does with blocks that sat side by side.
Mobile firstmobile first: the method of designing the phone version of a page first, then adding columns as the screen gets wider.
Aspect ratioformat, ratio: the shape of a picture, written as width to height, such as 16:9 for a wide video.
Croprecadrage: cutting off the edges of a picture so that it fits a box of another shape.
Sticky headeren-tête collant: a header that stays at the top of the screen once you scroll past it.
Fixed elementélément fixe: an element that stays in the same place on the screen while the page scrolls, such as a chat button.
Z-orderordre de superposition: the order of the layers on a page, which decides what covers what.

Mockupmaquette: a picture of what a page will look like, made before the site is built.
Clickable prototypeprototype cliquable: a mockup whose buttons and links work, so that you can try a path through the site.
User flowparcours utilisateur: the path a visitor follows through the screens to reach a goal, such as downloading a CV.
UIinterface utilisateur: the user interface, which is everything on screen that a person sees and uses.
UXexpérience utilisateur: the user experience, which is how easy and pleasant it is to use a site and reach a goal on it.

Web Technologies · Talking shop · wt.thomasjuldo.com/course/talking-shop/layout-and-space