23 Mar. 2015

Les 6 règles de base en communication visuelle

Les 6 règles de base en communication visuelle
23 Mars 2015,
 10

Que ce soit pour le design graphique d’une publicité, d’une couverture ou de la mise en pages d’un document, d’un site Web ou de tout autre visuel, il y a des règles à suivre pour s’assurer que l’image qui y sera reflétée dans son ensemble est équilibrée et donne l’impression que tous les éléments qui la composent sont positionnés aux bons endroits.

Pour parvenir à un résultat parfait, voici 6 règles de base en communication visuelle qui doivent être respectées :

1. Une mise en pages selon les règles de l’art

regledestiersChaque publicité, chaque page d’un document ou d’un site Web est perçue, dans son ensemble, comme une image. L’utilisation de la règle des tiers, la règle d’or du cadrage photographique, permet d’équilibrer cette image. Ce principe de proportion et d’équilibre tient ses origines de l’art pictural.

La règle des tiers divise une image en trois parties égales. Plusieurs variantes sont possibles. Le principe s’applique autant aux images qu’aux documents et s’applique à la verticale et à l’horizontale. L’emplacement des logos, des images, des textes ou de tout autre élément sera conditionné par le mode de division choisi par le créateur.

Lorsque cette règle est respectée et contrôlée, elle garantit à une conception graphique l’équilibre qui captera l’attention.

2. Le chemin visuel : un phénomène à ne pas négliger

Il est important de savoir comment notre œil se comporte lorsque nous regardons une image. Cela permet de positionner des éléments forts à des endroits stratégiques. Des études sur la perception ont permis de définir certains principes qui régissent la lecture des compositions visuelles :

Le chemin visuel : un phénomène à ne pas négliger

  • Les yeux ont tendance à explorer en particulier et successivement 4 points qui sont les intersections des droites parallèles aux côtés et tracées à un tiers et deux tiers des longueurs et des largeurs. On appelle ce balayage, la lecture en Z.
  • Les yeux ont tendance à bouger dans le sens des aiguilles d’une montre.
  • Les yeux ont tendance à regarder davantage le quadrant supérieur gauche d’une image.

Nous pouvons observer ces phénomènes, car nous avons été conditionnés à lire en commençant en haut de gauche à droite et ensuite descendre sur l’autre ligne et recommencer de gauche à droite. Donc, lorsqu’on regarde une image rapidement dans son ensemble ce mouvement de lecture en Z est accentué.

 

3. La personnalité des caractères typographiques

Avec ou sans empattements?

Avec ou sans empattementsLes caractères typographiques utilisés dans une composition peuvent diminuer ou renforcer le sens d’un texte. Les deux grandes familles de caractères sont les polices de caractère avec empattements (sérifs) et sans empattements (sans sérif). Les empattements sont les petites pointes présentes dans le dessin des caractères.

À chaque typographie sa personnalité

À chaque typographie sa personnalitéCertains caractères amènent un côté masculin, sérieux ou démontrent le prestige ou le modernisme. D’autres proposent un style plus artistique, technologique ou fantaisiste. Un caractère gras rend l’idée de force, de solidité. Des lettres italiques suggèrent le dynamisme, le mouvement. Un caractère maigre apporte une touche féminine et est recommandé pour exprimer la distinction et la délicatesse.

Principes de base

  • Italique : Il est déconseillé de mettre un texte continu en italique, car l’effet de mouvement qu’il génère rendra la lecture plus ardue en forçant l’œil à défiler plus vite sur le texte, ce qui crée un inconfort visuel qui ralentit la lecture.
  • Capitales : Un texte en capitales subira le même effet de ralentissement qu’un texte en italique. L’utilisation combinée de capitales et de bas-de-casse facilite la lecture en apportant des points d’attention lorsqu’elle est bien contrôlée.
  • Interlignage : L’interlignage des titres et des textes doit être ni trop serré, ni trop espacé.
  • Caractère : En général, un logo, une publicité ou un document ne devrait pas comporter plus de deux styles de caractère différents et certainement pas plus de trois. L’emploi de trop de caractères différents oblige l’œil à de nombreux ajustements qui poussent à abandonner la lecture.

 

4. Choisir le bon alignement

Choisir le bon alignement
L’alignement est la disposition du texte par rapport aux marges et aux colonnes d’une page. Les deux alignements les plus couramment employés sont l’alignement en drapeau à gauche et l’alignement justifié, ou en alinéa. Voici certains avantages et inconvénients liés à leur utilisation :

L’alignement en drapeau à gauche

  • Avantages : Aspect esthétique de densité homogène, sans césures de mots, espaces égales entre les mots.
  • Inconvénients : Inégalité entre les lignes, nécessite un bon contrôle.
  • Utilisation : Courts textes, textes en retrait, sous-titres.

L’alignement justifié (en alinéa)

  • Avantages : Largeur fixe des lignes, bonne visibilité, séparation franche du texte.
  • Inconvénients : Espaces variables entre les mots, séparation difficile des mots (césures).
  • Utilisation : Textes avec beaucoup de contenu, articles longs, lettres.

 

 

 5. Le symbolisme des couleurs

Chaque couleur a une signification cachée et exerce ses influences à un niveau inconscient :

  • 5.	Le symbolisme des couleursJaune : Synonyme de gaieté, de créativité et d’optimisme. Il donne une impression de chaleur et de lumière.
  • Orange : Évoque l’énergie et l’action. Il apporte une touche de dynamisme.
  • Rouge : Symbole d’amour, de sensualité et de passion. Il est aussi associé au danger, au sang. À utiliser avec un dosage bien contrôlé.
  • Violet : Associé à la délicatesse, à l’imaginaire et à la spiritualité. Il évoque aussi la prospérité et la solitude
  •  Vert : Invite au calme et à la détente. Symbole de croissance, de la nature et de chance. La couleur de l’espérance.
  • Bleu : Exprime la confiance, la fraîcheur et la fidélité. La couleur la plus aimée, il évoque le ciel, les voyages et le rêve.

Zone de repos

6. L’importance des zones de repos

Dans une conception graphique, les zones de blanc sont appelées « zones de repos » parce qu’elles permettent à l’œil de se reposer, afin qu’il puisse recevoir l’information tout en étant dans un état favorable pour poursuivre la lecture et la réception de nouvelles informations.

Par exemple, un document présentant une mise en pages claire et simple attirera notre attention tandis qu’il sera repoussant si la mise en pages est surchargée. Les mises en pages aérées permettent la mise en valeur des titres, des textes et des images tout en facilitant la lecture des contenus. Aussi, il est important de conserver une zone de dégagement sans image et sans texte autour des logos ou des signatures graphiques pour que ceux-ci soient toujours mis en valeur et facilement repérables.

Zone de repos

L’art de la communication visuelle à votre service!

Bien évidemment, l’art de concevoir des images ou une mise en pages de document équilibrées et efficaces comprend énormément de règles en plus de ces 6 principes de base, mais il comporte également de nombreux pièges. Souvent, quelques secondes suffisent pour créer un impact positif ou négatif envers votre organisation. Garantissez-vous un impact positif en confiant 
ce travail à un professionnel de la communication visuelle qui saura mettre son art au service de votre organisation!

 


Source
Luc Dupont, 1001 trucs publicitaires


 

Avec plus de 20 ans d'expérience en communication graphique et en gestion de projets, Mélanie est une passionnée de tout ce qui touche à la communication graphique, au monde du Web, au marketing et à l'art visuel.

10 réponses sur “Les 6 règles de base en communication visuelle

  1. lea rillou dit :

    Super article!

    Comme c’est expliqué, la communication visuelle c’est tout un art et on ne s’improvise pas web designer ou ux designer si facilement!

    Je pense à mon doux qui a dû suivre une formation pour se réorienter dans le milieu avec http://www.lidem.eu/, il a choisi d’étudier à Barcelone et c’est un vrai pro maintenant mais il faut du temps!

    En tout cas merci pour ces conseils :) Bonne continuation!

    • Mélanie Giroux dit :

      Mme Rillou, comme vous le dites si bien : on ne s’improvise pas Web Designer ou UX Designer, il faut avoir les connaissances et l’expérience pour concevoir des projets qui donnent des résultats!
      Merci beaucoup pour votre commentaire et bonne continuation aussi à « votre doux »!

  2. Doris Gagné dit :

    Bonjour Mme Giroux,

    Vos articles me mettent en appétit pour notre première rencontre de mercredi. J’ai autant besoin d’un regard d’expérience pour le développement de mon site que sur le plan de communication pour bien l’exploiter.

    Au plaisir de travailler ensemble,
    Doris

    • Mélanie Giroux dit :

      Merci beaucoup pour votre commentaire Mme Gagné! La communication visuelle est une passion pour moi aussi bien pour la mettre en pratique que pour partager mon savoir et mon expérience sur le sujet!

  3. Bobby Leblanc dit :

    Très bien merci !

  4. Karine Barthélémy dit :

    Très bon article qui m’apporte un premier éclairage bien utile ! Tout y est clair et bien structuré.
    Karine (ancienne journaliste de presse écrite en reconversion dans le graphisme print & web, et l’UX)

  5. Rivka dit :

    Mélanie bonjour,

    J’aimerais aller plus en détails de votre précieux article. À l’horizontal, la règle des tiers peut aussi donner 1/3 plein, 1/3 vide, 1/3 plein? Ou les 3 modèles présentés ci-dessus sont les seules options à adopter?

    Merci

    • Mélanie Giroux dit :

      Bonjour Rivka,

      Les modèles présentés le sont à titre indicatif pour démontrer le fonctionnement de la règle. L’exemple que vous apportez est aussi bon! Vous pouvez laisser allez votre créativité pourvu que vous respectiez le principe! Merci à vous!

  6. Benny luyeye dit :

    Merci Madame pour cet article si important dans notre carrière de communicateur visuel.

    Très sincèrement les règles essentielles ont été dégagées. Merci!

  7. wissal dit :

    J’ajouterai au chemin visuel le chemin en forme de F, qui est d’ailleurs très connu dans le milieu. C’est la façon de la visiteur regarde le site.
    En tout cas, très bon article et merci pour le partage des informations.

Répondre à Karine Barthélémy Annuler la réponse.

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>