Revenir
Revenir

Stratégies du design digital

Dans le domaine du design graphique numérique, plusieurs disciplines se croisent et s’adaptent aux supports...

Sommaire

Introduction à la thématique : la complémentarité des supports numériquesDéfinir et distinguer les domaines du design graphique numériqueDécouvrir la transversalité d'un projet numériqueIdentifier les adaptions des supports fixes et animés
Mise en situation : le rôle du motion design dans la communication visuelleObjectifAnalyse de la collaboration Arte et H5Identification des principes du motion designSchématisation sous forme de story-boardVocabulaire spécifique
Activité : les spécificités de l'interactivité sur l'expérience de l'utilisateur
Créer une identité visuelle animée
Vocabulaire spécifique
Approfondissement et évalutionQuels sont les principes de l'animation numérique ?Comment créer une animation numérique ?Pour aller plus loin

Introduction à la thématique : la complémentarité des supports numériques

Définir et distinguer les domaines du design graphique numérique

Dans le domaine du design graphique numérique, plusieurs disciplines se croisent et s’adaptent aux supports numériques. On peut distinguer :
  • legraphisme : il concerne la création de visuels fixes destinés à la communication visuelle, comme les affiches, l'identité visuelle, la mise en page et les supports numériques statiques (web design, infographies, logos…) ;
  • lemotion design : il consiste à animer des éléments graphique (textes, icônes ou illustrations). Il est employé dans les génériques de films, les publicités animées, les interfaces web et les vidéos explicatives, sans nécessairement raconter une histoire ;
  • l’animation : elle vise à créer une illusion de mouvement, soit en dessinant image par image, soitviades modèles 3D ou des animations vectorielles. Elle est utilisée dans les dessins animés, les films d’animation et les jeux vidéo, et sert généralement à raconter une histoire avec des personnages ou objets animés ;
  • lavidéo : elle repose sur la capture d’images réelles (caméra, tournage). Elle est souvent utilisée pour des interviews, des reportages, du cinéma ou du contenu numérique interactif.
Questions
1.Pouvez-vous donner un exemple concret de création pour chacune des catégories du design graphique numérique, en vous appuyant sur vos connaissances personnelles ?
2.Qui sont les principaux commanditaires de ces créations ? Sur quels types de supports peut-on les retrouver ?

Découvrir la transversalité d'un projet numérique

H5 est un studio de création graphique français spécialisé dans le design graphique, le motion design et l’animation. Il est connu pour sa capacité à utiliser les codes du graphisme commercial (logos, typographies, icônes) afin de créer des récits visuels percutants.
Logoramaest un court-métrage d'animation réalisé par le studio H5 et sorti en 2009. Il présente une ville entièrement construite à partir de logos et de marques, qui servent à la fois de décor, de personnages et d'éléments narratifs. Le film interroge l'omniprésence des logos et de l’image des marques dans notre société. Cette approche innovante et critique lui a valu l’Oscar du meilleur court-métrage d’animation en 2010.
Visionnez l'extrait (1'17) sur le site du studio H5.

Identifier les adaptions des supports fixes et animés

Après avoir pris connaissance des définitions des différents domaines de la création numérique et visionné l'extrait de l'animationLogorama, répondez aux questions suivantes.
1.Quels logos reconnaissez-vous dansLogorama ? Quels rôles jouent-ils dans cette animation ? Sont-ils seulement décoratifs ou participent-ils à l’histoire ?
2.Comment le motion design permet-il de dynamiser et de donner du sens aux éléments graphiques dansLogorama ?
3.Comment le court métrage joue-t-il avec les codes du numérique et de la signalétique urbaine ?
4.Sur quels types de supports numériques pourrait être diffusée une œuvre commeLogoramaaujourd'hui ?
5.Finalement, quel impact les logos et les identités visuelles ont-ils dans notre environnement numérique et urbain ?

Mise en situation : le rôle du motion design dans la communication visuelle

Objectif

À partir des codes graphiques utilisés par le collectif H5 pour Arte, vous allez découvrir les bases du motion design et explorer comment le mouvement peut dynamiser un message visuel.
En équipe, vous concevrez une animation autour du message de votre choix. Vous appliquerez les principes graphiques étudiés pour donner plus d’impact à votre création et capter l’attention du spectateur.

Analyse de la collaboration Arte et H5

Consultez le site puis répondez aux questions suivantes.
Questions
1.Comment le mouvement dans les visuels d'H5 pour Arte Tracks influence-t-il votre perception du contenu ?
2.Quels éléments graphiques sont mis en avant par l'animation ? Pourquoi, à votre avis ?
3.Comment le rythme des animations contribue-t-il à l'ambiance générale de l'émission ?
4.Pouvez-vous identifier des principes de design spécifiques utilisés dans les visuels en mouvement ?

Identification des principes du motion design

Après avoir visionné l'animation pour Tracks du studio H5 pour Arte, vous pouvez à présent analyser les mouvements des images et la perception induite chez le spectateur, en suivant les étapes suivantes.
1. Les mouvements progressifs
Observez comment les images apparaissent et disparaissent. Voyez si elles se transforment en douceur (morphing), disparaissent progressivement (fondu), glissent lentement (glissement) ou changent de forme (déformation). À quel moment de l'animation pouvez-vous repérer ces transformations progressives d'images ?
2. Les rythmes qui nous captivent
Les animations sont-elles rapides, saccadées ou lentes ? Comment ces changements de vitesse nous font-ils ressentir des émotions ?
3. Quand les images nous invitent à jouer
Y a-t-il des boutons qui bougent, des effets qui apparaissent quand on passe la souris dessus, ou des changements de perspective ? Cette animation utilise-t-elle la notion d'interactivité ?

Schématisation sous forme de story-board

Pour illustrer les principes de mouvement dans le design numérique, on vous demande de créer un story-board en vous appuyant sur la création des H5 pour Arte.
Comment faire votre story-board ?
1. Divisez votre feuille en plusieurs cases (au moins 6) pour montrer les différentes étapes de l'animation.
2. Dessinez des formes géométriques simples pour représenter les éléments qui bougent.
3. Utilisez des flèches pour montrer les déplacements, des cercles pour les zooms et des courbes pour les rotations.
4. Notez les changements de rythme (accélération, pause).
Matériel : une feuille A4 ou un programme de dessin sur ordinateur. Crayons, feutres, papiers de couleurs découpés, ou ordinateur.
N'oubliez pas les grands principes du motion design :
  • morphing: transformation progressive d'une forme en une autre;
  • fondu: apparition/disparition en douceur;
  • glissement: déplacement progressif d'un élément;
  • déformation : étirement, rotation, changement d'échelle.

Vocabulaire spécifique

Morphing (nom) : transformation progressive d'une forme en une autre, comme un personnage qui se transforme en animal.
Fondu (nom) : apparition ou disparition progressive d'une image, comme une lumière qui s'éteint lentement.
Glissement (nom) : déplacement progressif d'un élément, comme un train qui avance sur les rails.
Déformation (nom) : étirement, rotation ou changement d'échelle d'une forme, comme un ballon qui se gonfle.
Story-board (nom) : dessin qui montre les différentes étapes d'une animation, comme un film dessiné.
Rédigez une phrase pour chaque terme. (Exemple pour "fondu" : "Le film a commencé avec un fondu au noir.")

Activité : les spécificités de l'interactivité sur l'expérience de l'utilisateur

Créer une identité visuelle animée

Vous devez créer une animation interactive à partir d'un logo et voir comment celle-ci peut changer l'expérience de l'utilisateur.
Thématique : animation de logo (sous format gif).
Matériel :outil numérique d'animation gratuit.
1.Sélectionnez un logo que vous appréciez pour créer une petite animation simple avec. Vous pouvez le faire apparaître progressivement, le transformer ou lui donner un effet de survol (effet spécial quand on passe la souris dessus).
Il vous faut répondre au cahier des charges suivant :
  • Pour qui est cette animation? (Quel en est le public?)
  • Pourquoi la créer? (Quel en est le but?)
  • Comment la diffuser? (Où la montrer?)
  • Pour quel événement est-elle conçue? (Quelle occasion?)
2. Expliquez vos choix graphiques : pourquoi avez-vous choisi ces couleurs, ces formes et ces mouvements ? Comment s'intègrent-ils à l'identité visuelle globale ?
3.Justifiez vos choix graphiques et le sens que ces derniers donnent à l'identité visuelle globale.

Vocabulaire spécifique

Interactivé (nom) : capacité d'un objet ou d'un système à réagir aux actions d'un utilisateur.
Animation (nom) : processus de création d'images en mouvement.
Utilisateur (nom) : personne qui utilise un ordinateur, un téléphone ou un autre appareil.
Identité (nom) : ensemble des caractéristiques qui définissent une personne ou une organisation.
Diffuser (verbe) : faire connaître quelque chose à un large public.
Rédigez une phrase pour chaque terme. (Exemple pour "utilisateur" : "L'utilisateur a cliqué sur le bouton pour ouvrir le site web.")

Approfondissement et évalution

Quels sont les principes de l'animation numérique ?

1. Quelles sont les trois manières par lesquelles des images peuvent bouger en douceur ?
2. Dans une animation, quel sont les trois types de changements de vitesse ?
3. Quels sont les trois éléments que vous pouvez utiliser pour montrer la façon dont votre animation bougera ?

Comment créer une animation numérique ?

1. Quel est le premier élément à choisir pour créer une animation ?
2. Donnez un exemple d'effet que l'on peut donner à un logo dans une animation.
3. Quelles sont les trois questions à se poser après avoir créé une animation ?

Pour aller plus loin

Vous venez de créer une animation interactive pour un logo. Vous devez à présent créer une animation pour votre propre logo : quel serait votre logo et quelle animation pourriez-vous créer ? Expliquez vos choix.