« Les principes CRAP » : différence entre les versions
| Ligne 26 : | Ligne 26 : | ||
=== Fonction === | === Fonction === | ||
Le contraste entre éléments sur une page aide à distinguer facilement un objet du fond ou d'un autre élément. 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 entre éléments sur une page aide à distinguer facilement un objet du fond ou d'un autre élément. 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 === | === Réalisation === | ||
| Ligne 32 : | Ligne 32 : | ||
# 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é|centré]] | |||
{| class="wikitable" | |||
|+ | |||
![[Fichier:Contrast1png.png|alt=Exemple d'un contraste de proportions et de luminosité|gauche|vignette|Exemple d'un contraste de proportions et de luminosité]] | |||
! | |||
|- | |||
| | |||
| | |||
|} | |||
=== A éviter === | === A éviter === | ||
Éviter d'avoir des éléments ( | É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 sont à éviter (voir contre exemples). | |||
== Le principe de répétition== | == Le principe de répétition== | ||
| Ligne 47 : | Ligne 54 : | ||
== Exercices == | == Exercices == | ||
<references /> | |||
Version du 22 juillet 2020 à 19:15
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/22 | ⚒⚒ 2020/07/20 |
| Objectifs | |
|
|
| Catégorie: Education au numérique | |
Introduction
CRAP est un acronyme pour les quatre principes de base essentiel à une communication visuelle efficace et attractive.
- Contraste
- Répétition
- Alignement
- Proximité
Le principe de contraste
Définition
Fonction
Le contraste entre éléments sur une page aide à distinguer facilement un objet du fond ou d'un autre élément. 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.
- 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.
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 sont à éviter (voir contre exemples).