Menu
Le motion design est la discipline qui consiste à appliquer le mouvement – ou l’animation – à la conception graphique. Il s’ensuit que vos principes de conception préférés feraient leur chemin dans les principes essentiels de conception de mouvement qui englobent toutes les façons subtiles et dramatiques dont nous donnons vie aux personnages, aux mouvements et aux scènes.
Alors que de nombreux principes de conception sont largement connus, comme la répétition ou le rythme par exemple, la manière dont ils s’appliquent aux animations graphiques est moins rigoureusement explorée. Ci-dessous, nous décomposerons nos principes de conception préférés et comment nous pouvons y penser lorsque vous superposez un mouvement dynamique dans la conception.
Le motion design en tant que domaine existe depuis plus d’un siècle, avec des origines remontant à l’Europe. À ses débuts, seuls les artisans les plus qualifiés étaient connus pour le motion design. Après l’avènement des ordinateurs entre le milieu et la fin du 20e siècle, le motion design a connu un boom qui n’a cessé de croître à mesure que les ordinateurs personnels et les logiciels de support comme la suite Adobe ont rendu le motion design plus accessible aux concepteurs et aux novices.
Tracer l’histoire du design – ou plus précisément du design graphique – devient un peu plus trouble, car techniquement, cela peut commencer à l’aube des temps. L’origine la plus largement acceptée de la conception graphique remonte à l’invention de l’imprimerie au XVe siècle. C’est à peu près à l’époque où nous avons vu les premiers logos, suivis peu de temps après par toutes nos applications de conception graphique les plus courantes – les publicités au 17e siècle, la première agence de design créée au début du 20e siècle et, bien sûr, le passage au numérique au milieu du XXe siècle.
La conception graphique a établi bon nombre des principes fondateurs sur lesquels reposent nos graphiques animés les plus réussis. Ici, nous décomposons huit principes de base de la conception graphique à appliquer à votre prochaine animation, pour les concepteurs de mouvement et les débutants en mouvement.
Principes de conception
La répétition est exactement ce que cela donne – réutiliser (ou répéter) les mêmes éléments ou facettes d’un design tout au long de votre création. Il est facile de considérer cela comme un modèle, mais ce n’est techniquement pas la même chose. La répétition est basée sur les éléments, tandis que le motif indique généralement un style ou une esthétique particulière.
Ce principe est l’un des plus fondamentaux, mais essentiel à la façon dont nous concevons. Nous nous attendons à ce qu’un logo s’anime de la même manière lorsque nous le voyons. Dans l’expérience utilisateur (UX), la répétition permet aux concepteurs de mouvement de créer des cadres plus intuitifs qui rendent les sites Web, les applications et les plates-formes plus faciles et plus agréables à naviguer.
La répétition n’a pas toujours besoin de signifier exactement la même chose à chaque fois. Ce principe de conception peut nous aider à créer un thème unificateur ou une apparence à une pièce. Et tandis que dans la conception graphique la répétition n’existe que dans l’espace, l’une des facettes étonnantes de la répétition pour le motion design est qu’elle peut s’appliquer à la fois au temps et à l’espace. Une boucle infinie est une répétition appliquée comme principe de conception de mouvement – répétant le même mouvement encore et encore.
Le rythme s’appuie sur ce que nous avons appris avec la répétition, mais applique une couche supplémentaire importante – les intervalles. Alors que la répétition est simplement un élément répété encore et encore dans la conception, le rythme utilise un sens du rythme, essentiellement comment et quand nous voyons quoi et où. Si cela semble déroutant, il est utile de penser au rythme au sens traditionnel – vos oreilles captent les rythmes sonores, tout comme vos yeux peuvent suivre un rythme qu’ils voient devant eux.
Il existe plusieurs types de rythmes différents – réguliers, progressifs, aléatoires, fluides – dont chacun détermine l’espace de ces intervalles et la manière dont nous les voyons. L’aléatoire, comme vous pouvez le deviner, signifie que le rythme n’est pas du tout ordonné, alors que le régulier crée un motif à partir d’un rythme régulier.
En motion design, nous pouvons utiliser le rythme pour définir un rythme et un sens de progression pour le mouvement. Si vous voulez voir un exemple très littéral de rythme dans le motion design, regardez le clip vidéo ci-dessus d’Arctic Monkeys pour « Do I Wanna Know? » dans lequel le motion designer utilise le rythme parallèlement à la répétition pour créer une histoire minimale, mais visuellement riche.
L’espace blanc est un terme couramment utilisé dans les équipes ; les stratèges de produits peuvent considérer les espaces blancs comme des zones inexplorées du marché, par exemple. Pour les concepteurs, les espaces blancs désignent toutes les zones de votre conception qui ne contiennent aucun élément et sont donc vides. Sur ce billet de blog, vous remarquerez des zones dans la marge, car le texte ne remonte pas jusqu’à la fin de la fenêtre du navigateur. C’est un espace blanc (aussi parfois appelé « espace négatif »).
Les graphistes, les concepteurs UX et les concepteurs de mouvement utilisent tous les espaces blancs de manière stratégique et réfléchie pour créer de beaux designs. Chaque grand design a des zones d’espace négatif, des marges comme nous en avons discuté ci-dessus, au crénage dans la typographie, aux macro- et micro-utilisations de ce principe de conception en mouvement, afin que nous puissions réellement comprendre et apprécier le mouvement que nous avons créé.
Prenez cette animation par exemple. On commence par des ronds orange sur fond pêche. Ce fond de pêche sert d’espace blanc. Parce que cet espace négatif existe, nous voyons beaucoup plus le caractère de ces cercles lorsqu’ils interagissent les uns avec les autres et se repèrent dans nos prochaines images sur fond violet.
Curieusement, bien que le principe de conception soit appelé espace blanc, l’espace n’a pas du tout besoin d’être blanc. Dans cet exemple, notre espace blanc est une teinte pêche, mais il existe des millions d’exemples en mouvement et de conceptions d’espace blanc dans toutes les couleurs du spectre.
Les espaces blancs ont également une connotation particulière pour les motion designers. Ce n’est pas simplement entre l’espace où il y a des éléments et où il n’y en a pas, mais cela peut aussi s’appliquer au temps. Les espaces blancs sont les moments dans le temps et l’espace où il n’y a pas de mouvement, contrairement à l’endroit et au moment où les choses sont animées.
Vous avez peut-être entendu le dicton classique selon lequel « la variété est le piment de la vie ». Bien que nous n’échangerons pas d’idiomes de sitôt, ce dicton touche à une vérité essentielle de la conception de mouvement et explique pourquoi la variété est un principe de conception si fréquemment utilisé.
La variété dans le design signifie que les designers (ou motion designers, UX designers, graphistes, voire architectes d’intérieur) utilisent plusieurs éléments pour créer plus d’intérêt visuel dans leur travail. La variété nous permet de captiver un public ainsi que d’attirer l’attention sur des domaines spécifiques d’une pièce. Nous pouvons y penser dans presque tous les domaines de notre vie orientés et non orientés vers le design. Si vous allez dans un restaurant et qu’un menu comporte deux plats, vous passerez beaucoup moins de temps à déterminer ce que vous voulez pour le dîner que si le restaurant en propose 200. Ce deuxième restaurant offre plus de variété.
En motion design, la variété signifie que nous utilisons plus d’éléments (variés) pour susciter l’intérêt tout au long de notre pièce. Comme la répétition, cela signifie dans le temps et dans l’espace, en utilisant divers éléments que vous voyez actuellement à l’écran ou en offrant une variété dans ce que vous pourriez voir ensuite.
Dans l’exemple ci-dessus, il y a une sensation kaléidoscopique dans le mouvement qui nous maintient totalement immergés dans ce que nous voyons. Nos yeux peuvent attirer le centre du graphique animé vers son point focal, ou se diriger vers n’importe quel côté, car de nombreux éléments visuels sont utilisés alors que le mograph passe des verts aux bleus, des oranges rougeâtres au jaune. Des points bonus si vous reprenez également nos principes de conception discutés précédemment dans cette animation !
Le mouvement peut sembler être le principe de conception le plus intuitif pour les motion designers – après tout, que signifie « mouvement » de toute façon ?
Le principe de mouvement du design fait référence à la façon dont l’œil du spectateur est capturé tout au long de la composition. Le mouvement peut garder un spectateur engagé, et peut certainement être réalisé uniquement dans la conception graphique, mais occupe une place centrale lorsque nous considérons les applications aux graphiques animés.
Les éléments, les lignes, la couleur et les espaces peuvent tous être utilisés pour montrer le mouvement. Dans une animation de texte comme celle ci-dessus, nous transmettons le mouvement dans les lignes elles-mêmes, les points nous emmenant à travers le voyage, la couleur et l’espace blanc (dans ce cas, notre vert). Vous pouvez simplement fixer votre œil sur n’importe quel point ou endroit de la composition, mais combien plus intéressant est-il lorsque vous suivez l’intention de l’artiste – exactement ce qu’il a capturé en appliquant le principe du mouvement.
Vous pourriez penser à la hiérarchie dans un certain nombre de contextes – vous à votre patron, une hiérarchie royale, même la hiérarchie dans une partie d’échecs. Dans la conception, la hiérarchie s’applique à l’ordre dans lequel nous montrons les éléments et à la manière dont cet ordre informe sur l’importance.
La hiérarchie aide les concepteurs à obtenir une composition approfondie et réfléchie en ajoutant une structure, une emphase et une file d’attente facile pour que le spectateur comprenne ce qu’il voit. Lorsque nous utilisons la hiérarchie, nous utilisons généralement des éléments visuels tels que la couleur, la taille, l’alignement ou l’échelle pour contraster et déterminer ce qui est le plus important à comprendre pour notre spectateur.
L’un des moyens les plus simples de comprendre la hiérarchie consiste à consulter un site Web. Les concepteurs UX utilisent la hiérarchie tout le temps pour déterminer quelle est l’action la plus importante qu’ils souhaitent qu’un utilisateur entreprenne. Un site Web peut avoir une copie principale en gras avec un sous-texte dans une police plus petite ou différente. Nous pouvons supposer que les informations primaires en gras sont nos plus importantes. De même, l’endroit où les choses tombent sur la page est important, de nombreux concepteurs de sites Web adoptant une approche consistant à placer les informations les plus importantes « au-dessus du pli » – un terme de journal traditionnel qui signifie simplement « avant que vous n’ayez besoin de faire défiler ».
Dans l’exemple du site Web, nous parlons à la fois de la hiérarchie des informations et des choix de conception qui aident à transmettre cela. Dans la conception et la conception de mouvement, la hiérarchie peut être utilisée dans la couleur, l’alignement, la profondeur et le mouvement. Si nous regardons l’exemple ci-dessus, l’alignement de la fusée au premier plan nous permet de savoir qu’elle est la plus élevée de notre hiérarchie.
Il y a une raison pour laquelle nous parlons d’unité vers la fin, et c’est parce que l’unité englobe tellement de nos autres éléments qu’il est impossible de la considérer comme un principe de conception autonome.
Pour les concepteurs, l’unité peut souvent être considérée comme l’ambiance générale – l’harmonie de tous les éléments de votre conception. Comment s’unissent-ils tous ? En tant qu’éléments séparés, ils peuvent dire une chose, mais à quoi ressemble notre composition lorsque nous rassemblons tous ces beaux principes de conception ? Certes, nous n’utiliserons pas tous les principes de conception à chaque occasion, mais l’unité fait référence à la manière dont les éléments fonctionnent ensemble. Pour les designers, il s’agit de maximiser l’impact et l’intérêt visuel de ces éléments, pas simplement de les avoir tous en un seul morceau.
En motion design, l’unité fonctionne exactement de la même manière, nous l’envisageons simplement dans le monde d’un graphique animé. Lorsque nous ajoutons du mouvement à ces compositions, nous devons nous assurer que dans chaque image, nous avons l’unité de nos éléments, pas simplement dans une image statique.
Dans l’exemple ci-dessus du voyage d’un jelly bean vers un corps d’été, il y a beaucoup d’éléments en cours – voyez si vous pouvez les nommer. Il y a du mouvement, des espaces blancs, de la répétition, de la hiérarchie, du rythme et beaucoup de variété. Mais l’unité est ce qui donne l’impression que cette pièce est réunie et n’est pas un mélange chaotique d’éléments, mais plutôt une histoire réfléchie et bien exécutée. Nous pouvons considérer un puzzle comme une métaphore utile ; chaque principe de conception individuel est une pièce de puzzle, mais cette image finie quand tout est réuni – c’est l’unité.
Vous avez peut-être entendu le terme «gestalt» dans un cours de psychologie. Pour les psychologues, la gestalt signifie simplement que le tout est compris comme plus que la somme de chacune de ses parties.
Mais qu’est-ce que cela signifie pour les designers ? Ce n’est pas si différent; nous prenons simplement ce même principe de perception et l’appliquons à notre composition. Dans un sens, les théories gestalt du design et les principes de design associés affirment que notre cerveau veut organiser et simplifier ce qu’il voit. Nous voulons donner un sens à ce que nous voyons par nature, et notre cerveau fera le travail nécessaire pour organiser et voir des modèles.
Le nombre exact de principes de conception de la gestalt, parfois appelés principes de perception visuelle, fait l’objet d’un débat, car il n’y a pas un seul auteur de la théorie de la gestalt appliquée au design. Voici quelques-uns des éléments essentiels que de nombreux motion designers utilisent dans leurs animations quotidiennes :
N’oubliez pas que les principes de la Gestalt concernent la façon dont nous percevons les éléments. Pour la similarité, ce principe signifie simplement que lorsque des éléments semblent se ressembler, notre cerveau les regroupe.
Dans l’exemple ci-dessus, nous utilisons la similarité avec la couleur pour montrer que nos bleus royaux sont en arrière-plan. Notre objet de premier plan utilise une palette de couleurs différente afin que nous ne l’associons pas, par le principe de similarité, à nos arrière-plans plus bleus. (Si cela vous rappelle la hiérarchie, bon travail !)
Le principe gestalt de proximité stipule que lorsque les choses sont proches les unes des autres, nos esprits vont penser qu’elles sont liées, par opposition à lorsqu’elles sont plus éloignées. Notre cerveau regroupera intuitivement ce qui est proche comme semblable, et s’il y a un espace blanc entre la chose suivante, nous la verrons comme différente.
Les graphistes l’utilisent tout le temps pour les visualisations de données afin de présenter de grands concepts de manière assez simple. Dans ce travail de Giorgia Lupi de Pentagram, le designer utilise le principe de proximité pour aider à délimiter les activités au cours de cette année dans la vie de la pandémie de COVID-19.
Parlons maintenant du motion design. Dans l’exemple ci-dessus, même si les carrés sont de couleurs différentes, leur proximité les uns des autres, d’autant plus que nous sommes amenés à voir plus que les deux, nous montre que nous devrions les percevoir de la même manière ou de manières similaires (en plus de leur rythme et leur similitude !).
La figure/fond, parfois appelée « figure et fond », concerne la façon dont nos éléments sont liés les uns aux autres dans l’espace – en particulier les éléments positifs et l’espace blanc.
Nos esprits veulent trouver les éléments qu’ils devraient regarder dans une composition et détermineront rapidement ce qu’est l’espace négatif, mais la relation entre la figure et le fond est essentielle pour faciliter ce processus. Cette relation est soit stable soit instable en fonction de la façon dont les concepteurs choisissent de construire leurs compositions.
Dans un test de Rorschach, par exemple, conçu pour défier ce que nous voyons, il existe une relation instable entre la figure et le sol, alors que, dans le graphique animé ci-dessus, la relation est stable, car nous savons ce que nous sommes censés regarder – notre délicieux poisson. Dans ces deux exemples, vous pouvez voir que le principe fonctionne exactement de la même manière, que vous regardiez une image statique ou un graphique animé ; il s’agit de fournir de la clarté (ou de choisir consciemment de ne pas le faire) entre les éléments positifs et l’espace blanc.
La fermeture est un principe de gestalt particulièrement intéressant, car il aborde certaines des manières vraiment uniques dont notre cerveau fonctionne. La fermeture indique simplement que notre cerveau remplira les parties manquantes d’un design pour imaginer ce que nous essayons de transmettre dans son ensemble.
Les concepteurs emploient cette idée tout le temps, que ce soit dans la conception UX où ils peuvent estomper un élément pour indiquer la nécessité de faire défiler, ou dans un logo. Pensez au logo NBC par exemple. Le principe de fermeture nous permet de déterminer que ces formes qui se rejoignent sont en fait un paon.
Pour les motion designers, cela fonctionne de la même manière. Dans cet exemple, il n’y a pas de moment où le cercle complet est transmis sur nos écrans, mais notre cerveau travaille pour combler ce vide, sachant que le cercle est un élément clé en jeu. Bien que nous ne voyions peut-être qu’une petite fraction de cette courbe à une milliseconde donnée, notre cerveau utilise le principe de fermeture pour comprendre ce que le concepteur de mouvement vise à transmettre dans ce graphique animé.
Le principe de continuité, parfois appelé continuation, nous dit que notre esprit veut suivre le chemin le plus simple tracé pour nous. S’il y a une ligne droite, nous voulons la suivre jusqu’au bout. S’il y a des éléments placés dans un ordre, nous voulons suivre cet ordre, ne pas en dévier notre perception.
En conception graphique, nous utilisons la loi de la continuité pour créer un sentiment de progression, ou dans le cas de l’UX, pour nous assurer que nos utilisateurs sont attirés par la prochaine chose que nous voulons qu’ils voient. La continuité peut entrer en jeu lorsque nous plaçons des éléments dans un carrousel ou lorsque nous amenons les utilisateurs à travers n’importe quel type de diagramme étagé.
La continuité dans la pièce ci-dessus nous montre comment la continuité entre en jeu pour le motion design. Nos yeux suivent ces lignes lorsqu’elles se déplacent vers l’intérieur vers le centre et vers l’extérieur, plutôt que de rester le long des bordures ou même de traîner vers l’espace blanc le long des bordures. C’est la continuité en jeu, et nous le regarderons en boucle tant qu’il nous captivera.
Chez Wapiyeah, nos animateurs et graphistes sont qualifiés et réalisent d’excellentes vidéos. Contactez-nous pour en savoir plus.
