Définir la hiérarchie visuelle

De EduTech Wiki
Aller à la navigation Aller à la recherche

Cet article est en construction: un auteur est en train de le modifier.

En principe, le ou les auteurs en question devraient bientôt présenter une meilleure version.



Digital skills @ FPSE
Module: Communiquer efficacement : principes et astuces en communication visuelle
Page d'entrée de la section
La mise en page d'un poster avec Powerpoint
⏏︎
◀︎
débutant
2021/04/07 ⚒⚒ 2020/07/20
Objectifs
  • Appliquer les principes du design visuel pour rendre l'organisation et l'hiérarchie des informations visible
  • Réaliser la mise en page d'un poster en respectant les principes du design visuel
Contenu de la section
Activité(s)
  • Schéma de conception
Catégorie: Education au numérique

Objectifs

  • Appliquer les principes du design visuel pour rendre l'organisation et l'hiérarchie des informations visible
  • Réaliser la mise en page d'un poster en respectant les principes du design visuel

Activité(s)

  • Schéma de conception


  • Difficulté: débutant


Introduction

HierVis2.svg

Donner une hiérarchie visuelle consiste à organiser les éléments (texte et graphiques) sur une page, et leur attribuer des caractéristiques perceptibles pour attirer l'attention en fonction de leur importance par rapport au message principale à communiquer. C'est de communiquer visuellement la priorité d'importance des contenus et les relations entre les eux en utilisant les principes du design visuelle : le contraste (de couleur, taille, positionnement), la répétition, l'alignement, le groupement, la proximité, etc.

La mise en page avec des formes génériques pour définir les espaces réservés aux différents contenus est la première étape dans la définition d'une hiérarchie visuelle.

La prochaine est la dernière étape de choisir les polices et couleurs et définir les conventions visuelles qui vont être utilisées pour chaque type de contenu identifié lors de la structuration et la hiérarchisation des informations : titre, sous-titres, cadres d'images, légendes, références, etc.

Texte

Choix de police

Type de police caractèristiques exemples de familles
Types de polices
Oldstyle : Empattement (petites "pattes" aux bouts), Accentué sur l’angle, une uniformité entre traits épais et fins Georgia, Times New Roman, Goudy, Palatino, Garamond, Cochin, Century Schoolbook
Modern : Empattement, Accentué en vertical, épaisseur de traits varié Bodoni, Times Bold, Onyx
Slab Serif : Empattement, les traits ont le même épaisseur Memphis,
Sans serif : Sans empattement, avec ou sans accent (“slab”) Arial, Helvetica, Calibri, Optima, Century Gothic, VAG Round, Futura, Franklin Gothic
Monospace : Chaque caractère occupe l'espace d'un "m")(”m”) Courier, Anadale, Lucida Console, Menlo
Script : Caractères sont attachés  are “attached” Brushscript
Décorative : Caractéristiques exaggérés Comic Sans, Trattello, Bauhaus

Optez pour une ou deux (maximum) familles de polices "Oldstyle" (style vieux) ou moderne pour les titres ou le corps du texte.

Réservez l'utlisation des polices Slab Serif pour des titres de quelques mots, une numérotation, ou des chiffres sur un graphique, mais pas pour les titres longs ou des textes de plusieurs lignes.

Les polices décoratives, script sont attrayantes mais peu lisibles, surtout pour des lignes de texte longues.

Les polices monospace (chaque caractère occupe l'espace d'un "m") sont par convention réservées pour indiquer du code informatique.

Taille

Couleurs

CMJN (CMYK)

Choisir une palette

Autres astuces

Éviter les images de fond. C'est trop distrayant. Opter pour une couleur unique et une teinte claire prise de votre palette de couleurs.

Pratique

Ressources

Références