Visual hierarchy: the words of web design

Click ▶ to hear the words, and say them out loud.Clique sur ▶ pour entendre les mots, et répète-les.

Next: layout →

Layout and composition: drag each English word next to its French translation.La mise en page et la composition : fais glisser chaque mot anglais en face de sa traduction.

1. la hiérarchie visuelle
2. l'équilibre
3. la règle des tiers
4. l'alignement
5. une mise en page
6. le schéma de lecture en F
7. une grille
8. un point focal, de mire
9. la proximité

Next: the web page →

On a web page: drag each English word next to its French translation.Sur une page web : fais glisser chaque mot anglais en face de sa traduction.

1. un titre (accrocheur)
2. le coin supérieur gauche
3. la formulation, le texte
4. une icône
5. une diapositive
6. le côté gauche
7. une légende
8. faire défiler vers le bas
9. les images, l'iconographie

Next: type →

Type and text: drag each English word next to its French translation.La typographie et le texte : fais glisser chaque mot anglais en face de sa traduction.

1. facile à assimiler
2. l'accent, la mise en valeur
3. en gras
4. être mis en page, disposé
5. condenser, resserrer
6. mettre en valeur
7. une police (de caractères)
8. les courbes, les arrondis
9. la hiérarchie typographique

Next: colour →

Colour and images: drag each English word next to its French translation.La couleur et l'image : fais glisser chaque mot anglais en face de sa traduction.

1. une couleur qui claque
2. assombrir, atténuer
3. un arrière-plan flou
4. l'échelle, la taille
5. la perspective
6. l'effet bokeh (flou d'arrière-plan)
7. la profondeur de champ
8. le contraste
9. la profondeur

Next: the eye →

Guiding the eye: drag each English word next to its French translation.Guider le regard : fais glisser chaque mot anglais en face de sa traduction.

1. retourner (en miroir)
2. un regard
3. l'espace vide, l'aération
4. attirer l'attention sur
5. capter l'attention
6. les lignes directrices
7. le fouillis, l'encombrement
8. ressortir, se démarquer
9. cohérent, homogène

Next: find the word →

Find the right word.Trouve le bon mot.

• What do you call the small text under a picture? a gazea grida captiona headline
• What do you do with your mouse wheel to see the rest of a web page? flipcondensescroll downdim
• Which one is the empty space around the elements of a page? clutterimagerydepth of fieldnegative space
• Which word describes slides that clearly belong together? cohesiveblurredpoppingodd
• Where do our eyes usually start reading a web page? the top left-hand cornerthe footerthe bottom right-hand cornerthe centre
• Which one means « to make something less bright »? to emphasizeto dimto flipto scroll
• Which one is too many things on a page, in a messy way? proximityclutteralignmentbalance
• What do you call the place where the eye goes first? the gridthe leading linethe captionthe focal point
• Text written with thicker letters is… in boldin proximityin depthin scale
• Which principle tells you to divide an image into nine equal parts? the rule of oddsthe rule of thirdsrepetitionthe F pattern