Arrière-plan abstrait : formes, aplats et fluidité

Un arrière-plan abstrait est fait de couleur, de forme et de texture plutôt que d’une scène reconnaissable. Presque tous appartiennent à l’une de trois familles : les fonds géométriques, construits avec des arêtes nettes, des rayures et des motifs ; les fonds fluides, faits de dégradés doux et de champs en mouvement ; et les fonds texturés, faits de grain, de bruit et de matière. Choisissez la famille qui correspond à l’émotion voulue, puis gardez une zone calme là où viendront les mots.

Ce guide passe en revue chaque famille avec des exemples en direct et leurs codes, explique quand utiliser laquelle, et comment éviter qu’un arrière-plan abstrait n’écrase le contenu. Pour les types de dégradés qui se cachent derrière beaucoup d’entre eux, voyez les types de dégradés.

Trois types d’arrière-plans abstraits

Arrière-plans abstraits géométriques

Les fonds géométriques utilisent des arêtes nettes : coupes, rayures, anneaux, secteurs et grilles. Ils paraissent réfléchis et structurés, et s’associent naturellement à des mises en page typographiques fortes comme le style suisse. En CSS, ce sont les arrêts de couleur francs (deux couleurs à la même position) qui créent les arêtes.

L’astuce des fonds géométriques, c’est le ton. Des rayures ou des damiers très contrastés vibrent et rendent le texte posé dessus presque illisible. Gardez des couleurs de motif proches en luminosité, comme les rayures et les anneaux tonals ci-dessus, et réservez le fort contraste aux zones sans mots. Les motifs CSS en proposent beaucoup d’autres.

Arrière-plans abstraits fluides

Les fonds fluides n’ont aucune arête : la couleur s’y accumule, dérive et se plie comme la lumière sur l’eau ou la soie. On y trouve les dégradés maillés, les halos d’aurore et les rubans qui ondulent. Ils paraissent plus calmes et plus haut de gamme que les fonds géométriques, et ce sont les plus faciles à couvrir de texte, car un champ doux offre de larges zones homogènes.

.fluid {
  background-color: #2b1055;
  background-image:
    radial-gradient(40% 50% at 20% 30%, #ff7a59cc, transparent 70%),
    radial-gradient(45% 55% at 80% 25%, #c43d7acc, transparent 70%),
    radial-gradient(50% 60% at 60% 85%, #5b3cc4cc, transparent 70%);
}

Les fonds fluides existent en styles nommés : les dégradés maillés mêlent plusieurs points de couleur sur une surface, et les dégradés aurore font flotter des nappes lumineuses sur un fond sombre. Les deux gagnent à recevoir un peu de grain par-dessus.

Arrière-plans abstraits texturés

La texture transforme un aplat en une surface que l’on croirait toucher. Un grain fin évoque la pellicule, un grain plus marqué le papier, des fibres douces le tissu, un flou dépoli le verre. La texture peut faire tout l’arrière-plan, comme un champ couleur papier, ou former une couche sur un dégradé, ce qui est la façon dont sont faits la plupart des arrière-plans dégradés à l’air haut de gamme.

Gardez la texture discrète quand du texte se pose dessus : assez pour se sentir à bout de bras, pas assez pour que les lettres paraissent sales. Le guide sur la texture d’arrière-plan détaille le grain, le papier, le tissu et le verre, et les dégradés granuleux expliquent pourquoi un peu de bruit donne l’air précieux à la couleur.

Créer un arrière-plan abstrait avec les couleurs de sa marque

Les meilleurs arrière-plans abstraits ont l’air abstraits mais appartiennent à quelqu’un. Partir de vos propres couleurs et formes, plutôt que d’un pack de stock, est ce qui y mène.

1. 1

   Prenez deux ou trois couleurs de marque

   Ajoutez un ton plus profond de la même famille pour la profondeur. Le guide comment choisir les couleurs de sa marque vous aide si vous n’en avez pas encore.

2. 2

   Choisissez une famille

   Géométrique si votre marque est précise ou énergique, fluide si elle est calme ou haut de gamme, texturée si elle est artisanale ou chaleureuse.

3. 3

   Empruntez une forme à la marque

   Une courbe du logo, l’angle d’une lettre, un cercle tiré d’une icône. La reprendre dans l’arrière-plan lie l’un à l’autre.

4. 4

   Prévoyez la zone calme

   Décidez où ira le texte dans chaque format et gardez cette zone homogène en luminosité.

5. 5

   Ajoutez la texture en dernier

   Un grain léger sur l’ensemble, puis vérifiez-le à la taille d’un téléphone avec de vrais mots par-dessus.

Choisir un arrière-plan abstrait selon l’usage

Accordez l’abstraction au contenu. Une diapositive chargée de données veut un champ fluide ou tonal, tranquille. Un post de lancement peut supporter une coupe géométrique audacieuse. Un menu ou un produit artisanal appelle de la texture. Et quel que soit votre choix, testez-le à la taille réelle avec les vrais mots dessus : les arrière-plans abstraits magnifiques à vide se battent souvent avec le texte dès qu’il arrive.

Les Marks de Gradiently sont à la fois des abstractions fluides et texturées : couleurs, jusqu’à trois matières superposées, lumière, grain et mouvement, rendus en direct derrière votre design, avec leur zone la plus calme placée derrière les mots. Vous pouvez les parcourir dans le Marché ou en créer un dans la Forge.