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

De EduTech Wiki
Aller à la navigation Aller à la recherche
Aucun résumé des modifications
Ligne 1 : Ligne 1 :
{{En construction}}
{{tutoriel
|fait_partie_du_cours=UniTICE
|fait_partie_du_module=Communiquer efficacement : principes et astuces en communication visuelle
|est_module_de=Communication visuelle
|page_parente=Communiquer efficacement : principes et astuces en communication visuelle
|pas_afficher_sous-page=Non
|page_precedente=Communiquer efficacement : principes et astuces en communication visuelle
|page_suivante=Plus de principes du design visuel
|statut=sous-construction
|editeur=Utilisateur:Kalli
|dernière_modif=2020/07/20
|objectif=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
|difficulté=débutant
|cat tutoriels=Education au numérique
}}
==Introduction==
CRAP est un acronyme pour les quatre principes de base essentiel à une communication visuelle efficace et attractive.
* '''C'''ontraste
* '''R'''épétition
* '''A'''lignement
* '''P'''roximité
==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.
{|
|[[Fichier:Contrast1png.png|alt=Exemple d'un contraste de proportions et de luminosité|gauche|vignette|Exemple d'un contraste de proportions et de luminosité]]
|[[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é]]
|}
=== A éviter ===
=== 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.  
É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.  
Ligne 43 : Ligne 4 :
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).
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).


{|
{|  
|- style="vertical-align:top;"
|Exemple de base
|Exemple de base
| colspan="3" |Contre-exemples de mauvaise lisibilité en raison d'un contraste de tons  
| colspan="3" |Contre-exemples de mauvaise lisibilité en raison d'un contraste de tons  
|-
|- style="vertical-align:top;"
|  
|  
[[Fichier:Txtbw.png|vignette|alt=Exemple de texte noir sur fond blanc avec un contraste de taille de texte|centré|286x286px|Texte noir sur fond blanc avec un contraste de taille de texte]]
[[Fichier:Txtbw.png|vignette|alt=Exemple de texte noir sur fond blanc avec un contraste de taille de texte|centré|286x286px|Texte noir sur fond blanc avec un contraste de taille de texte]]
Ligne 54 : Ligne 16 :
|
|
[[Fichier:Txtogsat.png|vignette|alt=saturation et luminosité trop similaire|centré|279x279px|Texte vert sur fond orange avec une saturation et une luminosité trop similaire]]
[[Fichier:Txtogsat.png|vignette|alt=saturation et luminosité trop similaire|centré|279x279px|Texte vert sur fond orange avec une saturation et une luminosité trop similaire]]
|-
|- style="vertical-align:top;"
| colspan="4" |Exemples avec une lisibilité améliorée avec un ajustement du contraste de saturation et de luminosité
| colspan="4" |Exemples avec une lisibilité améliorée avec un ajustement du contraste de saturation et de luminosité
|-
|- style="vertical-align:top;"
| En ajustant le contraste entre la luminosité ou la saturation du fond et celle du texte on peut améliorer la lisibilité du texte.
|  
En ajustant le contraste entre la luminosité ou la saturation du fond et celle du texte on peut améliorer la lisibilité du texte.
|  
|  
[[Fichier:TxtrgContraste.png|vignette|alt=Vert de fond plus gris (désaturé), texte rouge plus foncé (moins de luminosité)|centré|282x282px|Vert de fond plus gris (désaturé), texte rouge plus foncé (moins de luminosité)]]
[[Fichier:TxtrgContraste.png|vignette|alt=Vert de fond plus gris (désaturé), texte rouge plus foncé (moins de luminosité)|centré|282x282px|Vert de fond plus gris (désaturé), texte rouge plus foncé (moins de luminosité)]]
Ligne 64 : Ligne 27 :
|[[Fichier:TxtogsatContraste.png|alt=Texte vert plus foncé (moins de luminosité)|centré|vignette|282x282px|Texte vert plus foncé (moins de luminosité)]]
|[[Fichier:TxtogsatContraste.png|alt=Texte vert plus foncé (moins de luminosité)|centré|vignette|282x282px|Texte vert plus foncé (moins de luminosité)]]
|}
|}
== Le principe de répétition==
== Le principe d'alignement==
==Le principe de proximité==
== Exercices ==
<references />

Version du 22 juillet 2020 à 21:22

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 ajustant 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é)
Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=Les_principes_CRAP&oldid=135551 »