Revenir
Revenir

Variété des médias imprimés et numériques

L’identité visuelle d’une marque, d'une entreprise ou d’un projet doit être cohérente tout en s’adaptant...

Sommaire

Introduction à la thématique : distinguer les spécificités des médias imprimés et numériquesComparer supports print et supports numériquesQuestionner les principes de l'animationConnaître les principes de l'interactivité numérique
Mise en situation : repérer les grands principes graphiques dans les champs du design digitalRepérer les principes de déclinaisons graphiques du logoIdentifier la variété des supports de diffusionCompiler les principes graphiques de l’interactivité numériqueVocabulaire spécifique
Activités : développer une réflexion sur l’adaptabilité et la modularité du design graphique numérique
Objectif
Découvrir une typographie "flexible" open source
Comprendre l'identité visuelle d'un projet typographique
Expérimenter la modularité digitale
Vocabulaire spécifique
Approfondissement et évaluationPour préparer la suiteQuestions

Introduction à la thématique : distinguer les spécificités des médias imprimés et numériques

Comparer supports print et supports numériques

L’identité visuelle d’une marque, d'une entreprise ou d’un projet doit être cohérente tout en s’adaptant aux contraintes et possibilités des supports sur lesquels elle est déclinée.
Leprintimplique des contrainte de fixité, de résolution d'image et de format. Il s'applique par exemple aux affiches, aux cartes de visite, aux brochures, aux packagings, etc.
Lenumériqueimplique une dynamique, une interactivité et une adaptabilité aux différents écrans. Il s'applique aux sites Internet, aux applications, aux réseaux sociaux, etc.
1.Naviguez sur le site du Centre Pompidou et trouvez un exemple pour chacun des trois cas suivants :
  • un visuel avec éléments interactifs ;
  • un visuel avec éléments fixes ;
  • un visuel avec éléments animés.
Nommez ces éléments et proposez quelques relevés graphiques : dessinez les éléments visuels et symboles observés en précisant leur fonction (exemple : une flèche = navigation, un cadre = encart d’information, un cercle en mouvement = chargement vers une autre page).
2.Proposez une définition de la notion d'interactivité à partir de vos relevés.

Questionner les principes de l'animation

Objectif :prendre conscience de l’importance de l’interactivité et du dynamisme (mouvement) dans la communication visuelle numérique.
Thème : réalisation d'une maquette interactive.
Matériel : outil numérique (Canva, par exemple).
1.Définissez en binôme une maquette et un message à transmettreviacelle-ci.
2.Sélectionnez les différents éléments graphiques (typographie, couleurs, formes).
3.Ajoutez l'élément interactif ou l'animation, puis téléchargez le résultat au format gif.
4. Toujours en binôme, présentez votre projet et expliquez vos choix graphiques et interactifs. Discutez enfin des possibilités offertes par le numérique et des pistes d'amélioration de votre maquette.

Connaître les principes de l'interactivité numérique

L'interactivité numérique désigne la manière dont les utilisateurs interagissent avec les interfaces numériques, comme les sites web ou les applications. Elle repose sur plusieurs principes clés :
  • réactivité : les éléments interactifs doivent réagir immédiatement aux actions de l'utilisateur (clics et/ou mouvements de la souris) ;
  • feedback visuel : fournit un retour visuel clair (changement de couleur, animation) pour confirmer une action ;
  • accessibilité : interfaces accessibles à tous les utilisateurs, y compris ceux ayant des handicaps ;
  • cohérence : harmonisation du design graphique afin que les utilisateurs puissent facilement comprendre et prédire le comportement des éléments interactifs.

Mise en situation : repérer les grands principes graphiques dans les champs du design digital

Repérer les principes de déclinaisons graphiques du logo

Un logo peut être décliné sur plusieurs supports pour s’adapter aux usages et aux publics. Chaque support a ses spécificités techniques et fonctionnelles, influençant la mise en page, les couleurs et la lisibilité des informations.
Les principes à respecter dans une déclinaison numérique sont :
  • l'adaptation des tailles des typographies pour une meilleure lisibilité ;
  • la création de contrastes optimisés pour une bonne lisibilité ;
  • une hiérarchie des informations adaptée aux interactions et aux animations.
Questions
Consultez sur le site du Musée des Arts décoratifs le dossier "Le 8 janvier 2018, Les Arts Décoratifs deviennent MAD".
1.Nommez les différentes natures de supports des visuels issus de ce document : quels indices vous ont permis d'identifier précisément chaque support ?
2.Repérez le logo du MAD sur les différents supports. Est-il identique partout ? Pourquoi ?
3.En observant les déclinaisons du logo, indiquez les principes à respecter pour s'adapter à tous les supports tout en restant identifiable.

Identifier la variété des supports de diffusion

Un logo peut être adapté à différents supports pour répondre aux besoins des utilisateurs et des publics. Chaque support possède ses propres spécificités techniques et fonctionnelles, qui influencent la mise en page, les couleurs et la lisibilité des informations.
Questions
1. À partir de vos expériences, pourriez-vous lister les différentes natures de supports, selon deux catégories (supports imprimés et supports numériques) ? Vous vous appuierez sur des utilisations différentes du logo MAD que vous trouverez sur le site du musée.
2. Quelles sont les spécificités de chacune ?

Compiler les principes graphiques de l’interactivité numérique

Dans le cadre de votre exploration des stratégies de communication visuelle sur les supports digitaux, vous allez analyser l’interactivité numérique du site officiel du MAD.
En binôme, naviguez sur le site et identifiez les éléments graphiques qui facilitent l’interaction utilisateur. Pour chaque élément, réalisez des relevés graphiques et compilez vos observations sous la forme d’un tableau récapitulatif.
À l’issue de cette analyse, vous présenterez votre répertoire sous la forme d’un tableau synthétique, illustrant les principes graphiques retenus.
Éléments à observer et analyser :
  • boutons : repérez les éléments cliquables permettant d’effectuer une action (exemples : envoi d’un formulaire, accès à une autre page) ;
  • pictogrammes : identifiez les symboles graphiques utilisés pour représenter une action ou une information, visant à améliorer la compréhension et l’ergonomie du site ;
  • navigation intuitive : analysez l’organisation des éléments qui facilitent la navigation (menus, filtres, liens internes, etc.) ;
  • animations et transitions : observez les effets visuels destinés à guider l’utilisateur et à rendre l’expérience plus fluide et engageante.

Vocabulaire spécifique

Typographie (nom) : art de concevoir et d'arranger les caractères d'impression, en tenant compte de leur forme, de leur taille et de leur espacement.
Modulaire (adjectif) : qui est composé de modules, de parties distinctes qui peuvent être assemblées ou séparées. Exemple : le logo du MAD est présenté sous une forme modulaire, avec les lettres M, A et D disposées de manière dynamique.
Déclinaison (nom) : fait de varier un thème, un motif ou un concept de différentes manières.
Exemple : la déclinaison du logo du MAD sur différents supports permet de l'adapter à chaque contexte.
Interactivité (nom) : capacité d'un système ou d'un objet à réagir aux actions d'un utilisateur.
Exemple : l'interactivité numérique du site du MAD permet aux visiteurs de naviguer facilement et d'accéder aux informations.

Activités : développer une réflexion sur l’adaptabilité et la modularité du design graphique numérique

Objectif

Explorer une typographie open source et comprendre comment elle peut être utilisée dans les champs du design numérique.

Découvrir une typographie "flexible" open source

Le projet Infini est une commande publique du Centre national des arts plastiques (Cnap) dans le cadre de la manifestation "Graphisme en France 2014". Ce projet consiste en la création d'un caractère typographique contemporain, disponible en téléchargement libre pour le grand public. 
Le caractère "Infini" s'inspire de l'écriture épigraphique, intégrant des styles romains, italiques et gras. Il permet une utilisation créative et ludique des mots, pictogrammes et ligatures (fusions de lettres), offrant ainsi une grande flexibilité dans le design graphique.
Regardez la vidéo qui présente l'entretien avec Sandrine Nugue. Elle vous expliquera tout sur le projet "Infini" !
Questions
1. Pourquoi la typographie "Infini" est-elle appelée "open source" ? Quels sont les avantages de ce type de typographie ?
2. Quels éléments graphiques remarquez-vous dans la typographie "Infini" ? (Par exemple, les formes et la structure des lettres, les traits…)
3. Comment les pictogrammes sont-ils intégrés à la typographie ? Comment interagissent-ils avec les lettres ?
4. Quels choix esthétiques donnent à la typographie "Infini" son style unique ? (Par exemple, les formes, l'équilibre, le minimalisme, les couleurs…)
5. Dans quels contextes pensez-vous que la typographie "Infini" pourrait être utilisée ? (Par exemple, des affiches, des panneaux de signalisation, des sites web…)

Comprendre l'identité visuelle d'un projet typographique

1. Comment les pictogrammes s'harmonisent-ils avec les lettres de la typographie Infini ?
2. Quels sont les liens graphiques entre la typographie Infini et la signalétique ?
3. Comment peut-on garder un style visuel cohérent dans la totalité du projet Infini ?

Expérimenter la modularité digitale

À présent, utilisez vos observations pour créer des croquis ! Imaginez comment la typographie Infini pourrait être utilisée dans un design numérique, en vue d'accompagner une navigation interactive. Déterminez un contexte de création sur une interface numérique (site, application, écran interactif, etc.) avant de répondre au cahier des charges suivant.
1. Dessinez des boutons interactifs en utilisant les formes de la typographie Infini.
2. Créez des pictogrammes et des titres pour une signalétique numérique qui utilise le style graphique d'Infini.
3. Présentez vos croquis et expliquez comment la typographie Infini peut être utilisée dans le design numérique pour créer des interfaces interactives. Parlez de la cohérence graphique, de la lisibilité sur les écrans et des possibilités d'application de cette typographie.

Vocabulaire spécifique

Typographie (nom) : art de concevoir et d'arranger les lettres pour créer des textes lisibles et esthétiques.
Open source(adjectif) : désigne un logiciel ou un projet dont le code source est accessible à tous et peut être modifié librement.
Pictogramme(nom) : symbole graphique qui représente un objet ou un concept.
Cohérence (nom) : harmonie et unité entre les différentes parties d'un ensemble.
Rédiger une phrase pour chaque terme. (Exemple pour "pictogramme" : "Les pictogrammes sur les panneaux de signalisation sont faciles à comprendre.")

Approfondissement et évaluation

Pour préparer la suite

Rechercher en ligne le dossier de presse de la fondation Lafayette Anticipation sur l'ouverture du 10 mars 2018. Son analyse vous permettra de mieux comprendre les notions abordées dans la partie expérimentation, concernant la composition d'éléments avec des outils de conception numérique.
Le dossier de presse est un outil important pour communiquer avec les journalistes et les professionnels des médias. Pour une fondation culturelle, il joue un rôle clé dans la diffusion de l’information et la valorisation de ses activités.
Questions
1. Observez attentivement le logo de la fondation, la signalétique et la mise en page du dossier de presse. Quel lien pouvez-vous trouver entre ces éléments ? Quelles sont les caractéristiques graphiques qui renforcent l'image de la fondation ? (Par exemple, la typographie, les couleurs, la façon dont les informations sont organisées.)
2. Quels sont les articles les plus importants dans le dossier ? Comment sont-ils mis en avant ? Comment les images, titres et blocs de texte sont-ils organisés pour rendre la lecture aisée ?
3. Visitez à présent le site de la fondation Lafayette Anticipation. Quelles sont les similitudes entre la communication visuelle du site et celle du dossier de presse ? Quelles adaptations ont été faites pour le site ?
4. Imaginez que vous devez diffuser un nouveau visuel en utilisant l'identité visuelle de la fondation. Quelle serait sa fonction et quels éléments pourriez-vous adapter sur le nouveau support ? Réalisez une maquette dessinée ou numérique du visuel que vous souhaitez créer.

Questions

1. Qui a créé la typographie Infini ?
2. Quelles sont les principales caractéristiques graphiques de la typographie Infini ?
3. À quoi servent les pictogrammes dans la typographie Infini ?