BTSA - Le design

Le design

Les règles d'or de la composition

Pasd'anamorphose

Lisibilité

Typographie

Effet de style

Structure

Quiz

Chemin visuel

Lisibilité

Lorsque vous contruisez un document ou un visuel contenant du texte, le plus pratique reste le texte noir sur fond blanc ou l'inverse.

Pasd'anamorphose

Lisibilité

Typographie

Effet de style

Structure

Chemin visuel

Des études ont prouvé que l'oeil nu reconnait mieux les textes lorsqu'ils sont contrastés (exemple : le noir sur fond jaune des panneaux de signalisation temporaires ou de travaux).

Contraste idéal pour les dyslexiques

Lisibilité

Utilisez donc des couleurs est possible à condition de toujours garder un contraste suffisamment élevé avec le fond.Si vous avez une partie de votre public potentiellement daltonien, méfiez vous des associations de vert avec du rouge/orange/jaune.

Pasd'anamorphose

Lisibilité

Typographie

Effet de style

Structure

Chemin visuel

Lisibilité

Pasd'anamorphose

Lisibilité

Typographie

Effet de style

Structure

Chemin visuel

Textes contrastés

Privilégiez une police blanche sur arrière plan foncé et une police noire sur arrière plan clair. Autant que possible, évitez d'utiliser une police de couleur sur fond coloré.

Lisibilité

Pasd'anamorphose

Le daltonisme est une anomalie qui empêche de distinguer la lumière rouge (protanopie), verte (deutéranopie) et plus rarement bleue (tritanopie). Par conséquent, certaines combinaisons de couleurs sont à absolument éviter :

Lisibilité

Typographie

Effet de style

Structure

Chemin visuel

Typographie

La typographie est l’art visuel des mots, disait le designer Dylan Todd, lorsque la typographie fait partie de votre design, la police que vous choisissez raconte une histoire. La police de caractères joue un rôle visuel déterminant.

Pasd'anamorphose

Lisibilité

Typographie

Effet de style

Structure

Chemin visuel

Typographie

• Restez cohérents pour conserver une harmonie et créer des repères.

• Restez sur des standards et évitez d'utiliser des polices trop fantaisistes ou farfelues qui peuvent devenir illisibles aux yeux des autres.
• Utilisez une taille de police confortable, qui ne fatigue pas les yeux.
• N'utilisez pas plus de 2 polices d'écritures différentes à la fois par page. Les titres peuvent être conçus avec un peu plus d'originalité, mais préférez une police simple et sans empattement pour les corps de textes.

C'est quoi un empattement

Pour en savoir +

Pasd'anamorphose

Lisibilité

Typographie

Effet de style

Structure

Chemin visuel

Typographie

L'empattement

Le Sérif (ou empattement) est une ligne ajoutée à chaque extrémité des caractères.

Utilisation des polices Sérif. Les polices Sérif peuvent exprimer l’autorité, le professionnalisme, ou suggérer le poids de l’histoire et de l’expérience. Une police de caractères Sérif, comme Times New Roman, évoque le style des anciennes machines à écrire.

Pasd'anamorphose

Lisibilité

Typographie

Effet de style

Structure

Chemin visuel

Typographie

L'empattement

Si vous construisez une application ou concevez un site internet, les polices Sans Sérif sont généralement préférées, car la lisibilité est un problème sur les écrans de petite taille ou de faible résolution.

Pasd'anamorphose

Lisibilité

Typographie

Effet de style

Structure

Chemin visuel

Typographie

L'empattement

Si vous concevez des supports pédagogiques, la lisibilité est aussi à prendre en compte pour tous pour une meilleur accessibilité des "dys". Les caractères sans empattements répondent mieux à toutes ces exigences.

Pasd'anamorphose

Lisibilité

Typographie

Effet de style

Structure

Chemin visuel

Cliquez sur l'image pour zoomer

Effets de style

Pasd'anamorphose

Lisibilité

Typographie

Effet de style

Structure

Chemin visuel

Ne soulignez jamais le texte sur le Web, un mot ou une expression soulignée est un lien, n’utilisez jamais le soulignement pour une autre raison. Si vous souhaitez faire ressortir du texte, vous pouvez utiliser une couleur différente, une taille de police supérieure ou encore le gras et l’italique (à petite dose).

Texte souligné

Pasd'anamorphose

Lisibilité

Typographie

Effet de style

Structure

Effets de style

Chemin visuel

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.

Texte 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.

Je n'aide pasles dyslexiques

Effets de style

Pasd'anamorphose

Lisibilité

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.

Typographie

En général, un document ne devrait pas comporter plus de 2 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.

Effet de style

TEXTE EN CAPITALES

Structure

Ca

Chemin visuel

rac

tères

Effets de style

Pasd'anamorphose

Lisibilité

L’interlignage des titres et des textes doit être ni trop serré, ni trop espacé. L'interlignage 1,5 sera le mieux adapté aux dys.

Typographie

Effet de style

Interlignage

Structure

Chemin visuel

Effets de style

Pasd'anamorphose

Lisibilité

Le texte centré est plus difficile à lire car le point de départ de chaque ligne est différent, ce qui nécessite plus d’efforts chaque fois que les apprenants passent à la ligne suivante. Le texte justifié peut sembler agréable, car les côtés gauche et droit sont bien droits, mais il est également plus difficile à lire, car l’espacement entre les mots est inégal. Pour ces raisons, il est préférable de s’en tenir au texte aligné à gauche.

TEXTE Centré Le texte centré est plus difficile à lire, car le point de départ de chaque ligne est différent, ce qui nécessite plus d’efforts chaque fois que les apprenants passent à la ligne suivante. Le texte justifié peut sembler agréable, car les côtés gauche et droit sont bien droits...

Le texte centré ou justifié

Typographie

Effet de style

Structure

Chemin visuel

Pour en savoir +

Texte centré Le texte centré plus difficile à lire car le point de départ de chaque ligne est différent, ce qui nécessite plus d’efforts chaque fois que les apprenants passent à la ligne suivante. Le texte justifié peut sembler agréable, car les côtés gauche et droit sont bien droits, mais il est également plus difficile à lire...

Pasd'anamorphose

Lisibilité

Pas d'anamorphose !

Typographie

Ne transformez jamais un visuel, une photo ou image d'origine sans respecter l'homothétie de l'image d'origine. Lors d'un agrandissement ou à une réduction respectez tout simplement les proportions de l'image ! Il faut alors utiliser une diagonale de l'image (pas l'horitale ou la verticale). Une anamorphose se voit comme le nez au milieur de la figure et c'est moche ! (Sauf si l'effet voulu pour de la 3D !) Cette règle s'applique aussi à la typographie !

Effet de style

Structure

Chemin visuel

Pasd'anamorphose

Structure

Chaque document, visuel, vidéo est perçu dans son ensemble, comme une image. Utiliser la règle des tiers, la règle d’or du cadrage photographique, permet de balancer cette image. La règle des tiers divise une image en trois parties égales. Plusieurs variantes sont possibles.

Lisibilité

Typographie

Effet de style

Structure

Chemin visuel

Le principe s’applique autant aux images qu’aux documents et s’applique à la verticale et à l’horizontale.

Pasd'anamorphose

Structure

Quand cette règle est suivie et vérifiée, elle assure à une réalisation graphique l’équilibre qui va concentrer l’attention. Si vous utilisez des colonnes, n'en mettez pas plus que 3. Notre œil se fatigue s’il doit parcourir des kilomètres pour suivre le texte dans des colonnes étroites.

Lisibilité

Typographie

Effet de style

Structure

Chemin visuel

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.

Le chemin visuel

Les yeux ont tendance à regarder davantage le quadrant supérieur gauche d’une image. Les yeux des utilisateurs suivent des chemins de lecture prévisibles, influencés par la culture. Les utilisateurs occidentaux qui lisent de gauche à droite utilisent un motif F et un motif Z.

Pasd'anamorphose

Lisibilité

Typographie

Effet de style

Structure

Chemin visuel

Pasd'anamorphose

Lisibilité

Le chemin visuel

L'espaceUne autre façon d'attirer l'attention sur le contenu est de lui donner suffisamment d'espace. Si un important espace négatif est laissé autour d'un bouton, d'une image ou si les lignes d'un bloc de texte sont bien espacées, ces éléments deviendront plus lisibles pour le lecteur.

Typographie

Effet de style

Structure

Chemin visuel

Espacez vos éléments de composition du bord du document.Aérez votre document.

Le chemin visuel

Pasd'anamorphose

Lisibilité

Typographie

Les formes et les symboles sont également un excellent moyen d’attirer l'attention de l’utilisateur. Nous pouvons par exemple utiliser des flèches pour guider l'utilisateur vers des éléments importants. Nous pouvons également recourir à des formes pour créer une séparation dans une page, diviser un texte, et ainsi faciliter le traitement du contenu.

Utilisation des formes

Effet de style

Structure

Chemin visuel

Exemple de document pédagogique

QUIZ

Répondez aux questions suivantes pour vérifier que vous avez tout compris.10 questions

C'est parti !