Comme mentionné plus haut, les « variable fonts » se basent sur la technologie des formats de fichiers typographiques OpenType. Cette dernière permet d’avoir plusieurs axes de variation (graisse, taille, inclinaison, largeur, optique…) au sein d’un seul et même fichier.

Les données de variation sont stockées dans un format compact, permettant un rendu efficace par les navigateurs et systèmes d’exploitation modernes.

Il reste, cependant, encore aujourd’hui quelques points d’améliorations possibles. Que ce soit sur la prise en charge par les navigateurs des polices variables pour garantir la compatibilité, ou encore sur la taille du fichier OpenType variable pouvant être optimisé et réduit.

La tendance actuelles nous propose des typographies avec beaucoup de caractères, plutôt de type display, possédant des formes, des courbes et beaucoup de fioritures. Certes, très intéressantes graphiquement, ces polices de caractères ne sont, cependant, pas très accessibles. Il faut donc les utiliser en connaissance de cause.

Afin d’être inclusif.ve.s et accessibles, les typographies avec des caractères simples et lisibles sont à privilégier. Couplées à une taille de police, un interligne et un interlettrage suffisamment grands, vous vous assurez déjà une lisibilité pour le plus grand nombre.

Si vous souhaitez aller plus loin, il existe même des typographies spécialement conçues pour être accessibles. Nous pouvons citer l’OpenDyslexic pour dyslexique et la Luciole pour les malvoyants par exemple.

Voici un panel représentatif des choix qui s’offrent à vous en matière de polices de caractères et des sens qui leur sont communément associés.

Les polices avec empattements (Serif) :

• Exemples : Times New Roman, Georgia, Baskerville.
• Signification : Souvent perçues comme classiques, traditionnelles et formelles. Elles sont largement utilisées dans le milieu de l’impression, pour les livres et les journaux, ainsi que dans les situations où une esthétique élégante est recherchée.

Les polices sans empattement (Sans-serif) :

• Exemples : Helvetica, Arial, Futura.
• Signification : Nous leur prêtons une apparence moderne, propre et minimaliste. Elles sont souvent associées à la simplicité, à la clarté et à la fonctionnalité. Les polices sans empattements sont largement utilisées dans les interfaces numériques, la signalisation et d’autres contextes où une lisibilité optimale est primordiale. Elles prennent également de plus en plus de place dans le milieu du luxe.

Les polices avec empattements carrés (Slab Serif) :

• Exemples : Rockwell, Courier, Clarendon.
• Signification : Elles ont une apparence robuste, solide et souvent rétro. Elles sont associées à la force, à la stabilité et à l’autorité. Ces polices sont souvent utilisées dans les titres, les logos et les annonces pour leur impact visuel. 

Les polices scriptes et manuscrites (Script) :

• Exemples : Brush Script, Pacifico, Snell Roundhand.
• Signification : Elles imitent l’écriture manuscrite et sont souvent perçues comme élégantes, créatives et personnelles. Elles ajoutent une touche de chaleur et d’authenticité aux designs et sont populaires pour les invitations, les logos et d’autres applications où une touche de personnalité est recherchée. Attention tout de même, elles peuvent vite être mal conçues, illisibles, ou tout simplement… pas très jolies.

Les polices décoratives (Display) :

• Exemples : Comic Sans, Papyrus, Curlz MT.
• Signification : Elles sont audacieuses, expressives et non conventionnelles. Elles peuvent évoquer des thèmes spécifiques, des époques ou des émotions, mais doivent être utilisées avec prudence en raison de leur impact visuel fort et de leur lisibilité réduite dans de nombreux cas. Leur utilité réside dans leurs caractères uniques, nous permettant d’être très précis dans ce que nous souhaitons faire passer comme idée.
•  

Un bon équilibre, c’est une bonne répartition du poids visuel. L’équilibre permet de garantir la cohérence visuelle. Que vous créiez un design symétrique ou asymétrique, de bonnes proportions et placements sont la clé pour un bon équilibre.

Sauf volonté forte de sens, ne mettez pas tous vos éléments dans un seul coin les uns sur les autres. Préférez une meilleure distribution de vos éléments dans l’espace.

Votre logo, cette image qui vous représente et qui porte l’ADN de votre entreprise aux yeux de toustes. Ce dernier est indispensable à toute charte graphique. Et pour en tirer la meilleure utilisation possible, quelques éléments sont nécessaires.

Le logo principal : version principale de votre logo, celle que vous utiliserez par défaut, en RVB, en CMJN et en Noir & Blanc.

L’espace de sécurité, les placements et tailles minimales : indispensables pour garder une lisibilité optimale et laisser votre logo respirer en toutes circonstances.

Utilisation sur fond : Comment doit être utilisé le logo sur fond blanc et noir, couleur claire et sombre.

Les déclinaisons : regroupe les différents formats de votre logo, avec ou sans votre baseline, en format vertical, carré ou encore horizontal, en RVB, etc.

Les interdits : nous retrouvons généralement les interdits suivants ; déformer, changer de couleur, modifier le ratio des éléments, modifier la typographie, ne pas mettre d’effets, de rotation, etc.

L’endossement : votre logo peut parfois être associé à un autre logo, vous pouvez prévoir des règles d’affichages pour ce dernier lorsqu’il est endossé avec un second.

Si vous souhaitez découvrir cette partie en détail, l’article «  Logo : règles d’utilisations et déclinaisons, ça marche comment ? » est fait pour vous.

Pour garder une lisibilité optimale et laisse votre logo respirer en toutes circonstances vous devrez mettre en place quelques règles. Premièrement, votre logo doit avoir une taille minimale en dessous de laquelle il est tout simplement interdit de l’utiliser. Vous aurez, pour des questions d’adaptation à l’usage, une taille minimale sur écran (en px donc) et une pour les supports imprimés (en mm donc).

À ces tailles minimales s’ajoute un espace de sécurité autour de votre logo. Ce dernier est proportionnel à la taille de votre logo, il convient donc souvent d’utiliser une lettre ou un élément de ce dernier afin de garder un espace de sécurité proportionnel facile à calculer.

Vous pouvez également, contraindre le placement de votre logo sur certains supports. Par exemple, toujours en bas à droite à 10% du bord. Le calcul des 10% s’effectuant sur la longueur du plus court côté.

Tant que le contenu y est, vous êtes plus libre dans la forme que vous souhaitez donner à votre storyboard. Vous pouvez décider d’avoir un écran par page et de faire un storyboard slide par slide, ou bien, des mettre plusieurs écrans sur la même page pour avoir un storyboard plus compact.

Par convention, le storyboard représente plusieurs cases par pages. Avec mes années d’expérience, je vous recommande six cases par page afin d’avoir une page harmonieuse et lisible tout en n’ayant pas de cases trop petites pour être visibles. 

Une fois que vous avez coché toutes les cases de l’étape précédente, vous pouvez maintenant commencer à rédiger votre script… Mais comment faire ? Comment structurer son récit ? Des fondations qui supportent la maison, ça ne se construit pas d’un coup de baguette magique.

Il existe plusieurs structures sur lesquelles vous baser pour rédiger un script. Lorsque nous parlons vidéo motion design et pour être sûr de viser juste, une structure sort du lot.

» Contexte > Problème > Solution > Preuve > Call-to-action

 Contexte :
Les premières secondes de votre vidéo sont cruciales. C’est dans ce court laps de temps que la personne regardant votre vidéo va choisir, ou non, de continuer. Une bonne accroche pour « ferrer » votre spectateur.ice est donc indispensable. Trouvez une intrigue, questionnez, surprenez… Bref, attisez la curiosité, donnez envie d’en savoir plus.

 Problème :
Le problème c’est avant tout le besoin de votre cible que vous avez identifié. Vous exposez ce que vous proposez de résoudre. Le spectateur.ice doit donc se reconnaître comme sujet.e à ce problème. Si vous n’avez rien à résoudre, vous n’apportez aucune plus-value.

 Solution :
C’est votre grand moment. Le moment où vous arrivez en sauveur. Le moment où vous apportez la solution au problème de votre cible. Le moment où cette dernière devient à l’écoute de votre proposition de valeur/commerciale.

 Preuve :
Avancer c’est bien, prouver c’est mieux. Pour convaincre, vous allez donner vos arguments pour prouver vos dires. Vous allez offrir sur un plateau vos avantages, vos bénéfices et tout ce qui pourra convaincre que vous êtes la bonne personne pour résoudre leur problème. Vous et pas une autre.

 Call-To-Action :
Maintenant, vous n’avez plus qu’à les inciter à agir. Et pour cela, quoi de mieux que de leur mâcher le travail en leur disant ce qu’ils/elles doivent faire ? Un bouton, une URL, un texte, bref, une action claire et simple à faire pour transformer l’essai.

Un moyen très simple de composer est d’utiliser la règle des tiers. Découpez votre format en trois sur la hauteur et en trois sur la largeur. Aux croisements de ces lignes se trouvent les 4 points de forces sur lesquels vous pouvez venir placer vos éléments importants. Utilisez également les espaces créés pour composer en 2/3, un ratio qui fonctionne très bien. 2/3 de ville et 1/3 de ciel sur une photo par exemple.

Pour la règle des demis c’est pareil, vous avez juste à diviser le format en 2 et non en 3.

La transition la plus simple qu’il soit. On coupe le plan pour passer directement au plan suivant. Ni plus, ni moins. C’est la transition sans transition.

Il permet d’enchaîner rapidement et sans fioriture pour garder du dynamisme dans le montage. Le cut peut-être utilisé pour les champs/contre-champs pour un dialogue par exemple ou encore pour un raccord entre deux plans, l’un large et l’autre rapproché.

Le match cut ajoute une dimension supplémentaire au cut, celle d’apporter la dimension du mouvement ou de la forme. Un homme qui court sur la plage. cut. Une femme qui court dans les bois. Tous deux dans la même direction, à vitesse équivalente. La coupure s’effectue au climax du mouvement.