# Marque vivante : des visuels animés et réactifs comme identité

[Canonical HTML page](https://gradiently.design/fr/guide/living-brand-identity)

La plupart des identités ont été conçues pour le papier puis collées sur des téléphones. Une marque vivante est conçue pour les écrans : elle bouge un peu, s’adapte à chaque format et fait de la place à ce qu’elle porte.

## The short version

- Une identité de marque vivante a des visuels qui bougent, s’adaptent à chaque format et réagissent au contenu posé dessus, au lieu de rester une image figée.
- Le mouvement aide sur les écrans, car un changement discret attire l’œil dans un fil, sans tournage vidéo.
- La lisibilité réactive signifie que le fond s’ajuste là où se trouvent les mots, pour que le texte reste lisible sur chaque image.
- Une identité vivante a toujours besoin de règles fixes : la même famille de couleurs, la même matière, la même typographie et le même type de mouvement à chaque fois.
- Les bonnes marques vivantes respectent les personnes qui préfèrent réduire les animations et proposent une version fixe.

Une **marque vivante** est une identité conçue pour les écrans plutôt que pour le papier : ses visuels bougent doucement, se recomposent pour chaque format et réagissent à ce qu’on pose dessus, si bien que les mots restent toujours lisibles. La plupart des identités de marque ont été dessinées comme des images fixes puis recadrées sur des téléphones, des bannières et des stories. Une marque vivante garde les mêmes couleurs, la même matière et la même typographie, mais se comporte davantage comme une surface que comme une image. C’est l’étape naturelle pour les marques qui vivent surtout dans les fils d’actualité.

## Ce qui rend une identité de marque vivante

Trois comportements distinguent une identité vivante d’une identité statique. Vous n’avez pas besoin des trois dès le premier jour, mais chacun rend la marque plus à l’aise là où on la voit vraiment.

| Comportement | Ce que cela signifie | Pourquoi cela aide |
| --- | --- | --- |
| Mouvement | Le fond dérive, respire ou déplace lentement sa lumière | Attire l’œil pendant le défilement sans crier |
| Adaptation | Il se recompose pour chaque taille au lieu d’être recadré | La meilleure partie du look tombe au bon endroit dans chaque format |
| Réaction | Il change là où se trouvent les mots pour qu’ils restent lisibles | Chaque titre se lit sans cadre, ombre ni flou |

Mouvement, adaptation et réaction. Ensemble, ils transforment une identité d’image en surface.

Une marque vivante est proche d’une [identité dynamique](https://gradiently.design/fr/guide/dynamic-brand-identity), mais l’accent diffère. Une identité dynamique fait varier sa forme d’un support à l’autre, volontairement. Une identité vivante peut paraître identique sur chaque support ; ce qui change, c’est son comportement à l’intérieur de chacun : elle bouge, s’ajuste et fait de la place au fil du temps.

## Le mouvement : petit, lent et toujours du même genre

Le mouvement est la partie la plus visible d’une marque vivante et la plus facile à exagérer. Le but est un fond qui semble vivant, pas un fond qui fait concurrence au message. Gardez les mots immobiles, laissez la surface bouger lentement, et utilisez un seul type de mouvement partout pour qu’il fasse partie du look. [Le mouvement pour les marques statiques](https://gradiently.design/fr/guide/motion-for-still-brands) et [les fonds dégradés animés](https://gradiently.design/fr/guide/animated-gradient-background) approfondissent le sujet.

### À éviter

- Des cycles de couleurs rapides
- Des mots qui rebondissent ou tournent
- Un style d’animation différent à chaque post
- Des boucles avec un saut visible à la fin

### À faire

- Une lente dérive de lumière sur la surface
- Des mots immobiles, ou une seule entrée calme
- Une signature de mouvement pour toute la marque
- Une boucle parfaite qui se raccorde sans qu’on le voie

## L’adaptation : un style, tous les formats

En une semaine, une marque peut avoir besoin d’une story, d’un post, d’une image de lien et d’une bannière LinkedIn. Une image fixe recadrée pour chacun perd sa meilleure partie sur au moins l’un d’eux. Une identité vivante est rendue pour chaque format : la lumière et les zones calmes tombent toujours au bon endroit. [Un style, toutes les tailles](https://gradiently.design/fr/guide/one-look-every-size) montre comment cela fonctionne en pratique.

- Story 1080×1920: 1080 × 1920
- Post Instagram 1080×1350: 1080 × 1350
- Aperçu de lien 1200×630: 1200 × 630
- Bannière LinkedIn 1584×396: 1584 × 396

Du très haut au très large. Une identité vivante se recompose pour chacun au lieu d’être découpée dans une seule image.

## La réaction : des fonds qui font de la place aux mots

Sur un dégradé ou une surface animée, le contraste varie dans le cadre et dans le temps. Un titre bien lisible à une seconde peut sombrer dans une zone claire la suivante. Les solutions habituelles, un cadre derrière le texte, une ombre portée ou un flou, se battent toutes contre le fond. Une identité réactive règle le problème à la source : la partie la plus calme de la surface se place derrière les mots et les couleurs proches des lettres s’assombrissent ou s’éclaircissent.

Un post d’école de danse où la zone claire du dégradé traverse le titre

Un fond figé : la zone la plus claire peut tomber juste derrière le titre.

Le même post d’école de danse avec une zone plus calme et plus sombre du dégradé derrière le titre

Un fond réactif : la zone calme se place derrière les mots et la typographie reste nette.

Pour les principes derrière tout cela, voir [du texte sur un dégradé](https://gradiently.design/fr/guide/text-on-gradient) et [contraste des couleurs et accessibilité](https://gradiently.design/fr/guide/color-contrast-accessibility).

## Respecter la réduction des animations

Certaines personnes activent la réduction des animations dans les réglages de leur appareil, parce que le mouvement les incommode ou les distrait. Une marque vivante sur le web doit respecter cette préférence et afficher une version fixe du même look. Cela tient en quelques lignes de CSS, documentées sur [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion).

```css
.brand-surface {
  background: linear-gradient(120deg, #0f172a, #1e3a8a, #0e7490, #0f172a);
  background-size: 300% 300%;
  animation: drift 24s ease-in-out infinite alternate;
}

@keyframes drift {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-surface {
    animation: none;
    background-position: 30% 50%; /* a calm, still frame of the same look */
  }
}
```

Une lente dérive sur une surface marine, bleue et sarcelle, avec une image fixe pour qui préfère réduire les animations. Plus de détails dans [la réduction des animations](https://gradiently.design/fr/guide/reduced-motion).

## Lancer une marque vivante sans tout reconstruire

1. **Gardez votre socle fixe** Les couleurs, la typographie et le logo restent exactement tels quels. Le vivant est un comportement ajouté par dessus, pas un changement d’identité.
2. **Faites du fond la partie mobile** Il occupe le plus d’espace et porte le moins d’information : le mouvement n’y coûte rien en clarté.
3. **Choisissez une signature de mouvement** Une dérive, une lente respiration de lumière ou un léger miroitement. Inscrivez-la dans votre [charte graphique](https://gradiently.design/fr/guide/brand-style-guide).
4. **Rendez chaque format** Créez chaque taille à partir de la même recette au lieu de recadrer un seul fichier maître.
5. **Vérifiez chaque ligne de texte** Sur chaque image et dans chaque format, les mots doivent se lire sans cadre derrière.

Gradiently est conçu exactement pour cela. Un Mark est un fond vivant, une recette de couleurs, de matières, de lumière, de grain, de mouvement et de voix typographique qui se rend en direct derrière chaque création. Il se compose pour chaque taille, sa zone la plus calme se place derrière vos mots, et l’**encre automatique** choisit une typographie claire ou foncée ligne par ligne dans la palette du Mark. Les mots peuvent entrer avec des animations simples comme la montée ou le balayage, et avec Pro vous pouvez exporter la création animée, en GIF, ou en MP4 ou WebM quand votre navigateur prend en charge l’enregistrement.

## FAQ

### Qu’est-ce qu’une identité de marque vivante ?

Une identité dont les visuels bougent doucement, s’adaptent à chaque format et réagissent aux mots posés dessus, tout en gardant les mêmes couleurs, la même matière et la même typographie.

### Le motion branding est-il réservé aux grandes entreprises ?

Non. Un fond qui bouge lentement derrière des mots immobiles suffit, sans tournage vidéo ni équipe d’animation.

### Un fond animé rendra-t-il mon texte plus difficile à lire ?

C’est possible, si les zones claires ou chargées passent derrière les mots. Gardez un mouvement lent et la partie la plus calme de la surface derrière le texte.

### Comment une marque vivante doit-elle gérer la réduction des animations ?

En affichant une image fixe du même look quand l’appareil demande moins d’animations. Sur le web, utilisez la media query prefers-reduced-motion.