« Les principes CRAP » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
Ligne 24 : Ligne 24 :
==Le principe de contraste==
==Le principe de contraste==
=== Définition ===
=== Définition ===
Le contraste entre éléments sur une page aide à distinguer facilement un objet du fond ou d'un autre élément.  
Le contraste entre éléments sur une page aide à distinguer facilement un objet du fond ou d'un autre élément. [[Fichier:Contrast1png.png|alt=Exemple d'un contraste de proportions et de luminosité|vignette|Exemple d'un contraste de proportions et de luminosité|494x300px|néant]]
 
=== Fonction ===
=== Fonction ===
Le contraste peut être utilisé pour attirer le regard à ce qui est plus important et pour créer des groupements entre éléments similaires (p.ex. titre de sections).  
Le contraste peut être utilisé pour attirer le regard à ce qui est plus important et pour créer des groupements entre éléments similaires (p.ex. titre de sections).  
Ligne 32 : Ligne 31 :
Il y a deux attributs utilisés pour atteindre un effet de contraste.  
Il y a deux attributs utilisés pour atteindre un effet de contraste.  
# Utiliser des couleurs contrastées en ton (rouge - vert), saturation (couleur pure ou grisée), ou de luminosité (plus ou moins de blanc ou de noir)
# Utiliser des couleurs contrastées en ton (rouge - vert), saturation (couleur pure ou grisée), ou de luminosité (plus ou moins de blanc ou de noir)
# Varier les proportions entre objets : grandes images - petite police de texte, texte gras - texte fin, grande police - petite police.
# Varier les proportions entre objets : grandes images - petite police de texte, texte gras - texte fin, grande police - petite police.[[Fichier:Screenlightch.png|vignette|Exemple de contraste de proportion et de couleur. <ref>https://www.screenlight.ch/de/ </ref>|alt=Exemple de contraste de proportion de couleur et de luminosité|454x454px|gauche]]
 
{|
|- style="vertical-align:top;"
|[[Fichier:Contrast1png.png|alt=Exemple d'un contraste de proportions et de luminosité|gauche|vignette|Exemple d'un contraste de proportions et de luminosité|494x300px]]
|[[Fichier:Screenlightch.png|vignette|Exemple de contraste de proportion et de couleur. <ref>https://www.screenlight.ch/de/ </ref>|alt=Exemple de contraste de proportion de couleur et de luminosité|centré|211x300px]]
|}


=== A éviter ===
=== A éviter ===

Version du 24 juillet 2020 à 16:40

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.



UniTICE
Module: Communiquer efficacement : principes et astuces en communication visuelle
Page d'entrée du module
Communication visuelle
◀▬▬▶
sous-construction débutant
2020/07/24 ⚒⚒ 2020/07/20
Objectifs
  • Reconnaître les caractéristiques des principes du design visuel
  • Identifier la fonction des grands principes dans un design visuel
  • Repérer quand les principes ne sont pas appliqués
Catégorie: Education au numérique

Introduction

CRAP[1] est un acronyme pour les quatre principes de base essentiel à une communication visuelle efficace et attractive. Ces principes on leur base dans les pratiques et les traditions des métiers liés aux arts graphiques et la communication visuelle.

  • Contraste
  • Répétition
  • Alignement
  • Proximité

Le principe de contraste

Définition

Le contraste entre éléments sur une page aide à distinguer facilement un objet du fond ou d'un autre élément.

Exemple d'un contraste de proportions et de luminosité
Exemple d'un contraste de proportions et de luminosité

Fonction

Le contraste peut être utilisé pour attirer le regard à ce qui est plus important et pour créer des groupements entre éléments similaires (p.ex. titre de sections).

Réalisation

Il y a deux attributs utilisés pour atteindre un effet de contraste.

  1. Utiliser des couleurs contrastées en ton (rouge - vert), saturation (couleur pure ou grisée), ou de luminosité (plus ou moins de blanc ou de noir)
  2. Varier les proportions entre objets : grandes images - petite police de texte, texte gras - texte fin, grande police - petite police.
    Exemple de contraste de proportion de couleur et de luminosité
    Exemple de contraste de proportion et de couleur. [2]

A éviter

Éviter d'avoir des éléments (blocs de texte ou images) qui sont presque similaires. Si ces éléments ne sont pas similaires dans leurs fonctions, donne-leur des caractéristiques visuelles suffisamment différentes.

Un bon contraste entre texte et fond est essentiel pour la lisibilité, pourtant pour la lisibilité de blocs de texte de plusieurs lignes, les contrastes de tons de couleurs avec une saturation ou luminosité similaire sont à éviter (voir contre exemples).

Exemple de base Contre-exemples de mauvaise lisibilité en raison d'un contraste de tons
Exemple de texte noir sur fond blanc avec un contraste de taille de texte
Texte noir sur fond blanc avec un contraste de taille de texte
Contre-exemple : texte vert saturé sur fond rouge saturé
Texte vert saturé sur fond rouge saturé
Contre-exemple : texte orange saturé sur fond bleu saturé
Texte orange saturé sur fond bleu saturé
saturation et luminosité trop similaire
Texte vert sur fond orange avec une saturation et une luminosité trop similaire
Exemples avec une lisibilité améliorée avec un ajustement du contraste de saturation et de luminosité

En augmentant le contraste entre la luminosité ou la saturation du fond et celle du texte, on peut améliorer la lisibilité du texte.

Vert de fond plus gris (désaturé), texte rouge plus foncé (moins de luminosité)
Vert de fond plus gris (désaturé), texte rouge plus foncé (moins de luminosité)
Texte orange éclairci (plus de luminosité)
Texte orange éclairci (plus de luminosité)
Texte vert plus foncé (moins de luminosité)
Texte vert plus foncé (moins de luminosité)

Le principe de répétition

Définition

La répétition réfère a l’utilisation de caractéristiques visuels pareilles de manière répétée dans un document.

Menu avec éléments répétés.
Ce menu utilise des icônes répétés pour indiqué les prix avantageux. Les titres en majuscules répétés définissent visuellement les diverses catégories d'offres. Source : Identitydesigned.com

Fonction

Répéter des éléments visuels dans un document pour développer l'organisation et créer une unité visuelle entre les parties autrement séparés.

Réalisation

Utilisez la répétition pour accentuer la similarité entre les parties séparées et guider le regard à trouver ces parties.

À éviter

Ne pas trop répéter le même élément. Cela peut fatiguer ou devenir un motif de fond peu repère.

Liste de puces décoratives trop répétitives
Liste de puces décoratives trop répétitives crée du bruit visuel qui distrait et réduit la lisibilité

Le principe d'alignement

Le positionnement de tout élément, bloc de texte, image, ou graphique doit connecter cet élément à un autre élément sur la page pour crér un sens d'unité.

Qu'il s'agit de texte ou des images, les éléments peut être alignés en fonction des limites de leurs contours ou bordures.

Un alignement de deux objets ou plus sur les axes verticaux peut être à gauche (A), à droite (B) ou central (C).

Options d'alignement sur un axe vertical

Un alignement de deux objets ou plus sur les axes horizontaux peut être en haut (D), en bas (E) ou encore central (F).

Options d'alignement sur un axe horizontal

Fonction

L'alignement unifie et organise les éléments en créant une relation visuelle entre les contours et les cadres des éléments.

Réalisation

À éviter

Le principe de proximité

Définition

Fonction

Réalisation

À éviter

Exercices

  1. Williams, R. (2015). The non-designer's design book : Design and typographic principles for the visual novice (4th ed.). San Francisco: Peachpit Press.
  2. https://www.screenlight.ch/de/