Grain, flou et dégradés : donner de la matière à une interface
Un peu de texture suffit à sortir d’une interface trop plate. Comment doser le grain, les dégradés et le flou sans nuire à la lisibilité ni aux performances.
Les interfaces plates ont gagné en clarté, mais beaucoup se ressemblent. Un peu de matière (un grain, un flou, un dégradé) suffit à donner une personnalité, à condition de la doser.
Le grain contre l’effet plastique
Un léger bruit sur un grand aplat évite l’aspect trop numérique et masque les bandes dans les dégradés. Je l’applique en surcouche, avec une opacité très faible.
Des dégradés qui ont une source
Un dégradé crédible imite une lumière : il part d’un point, il s’adoucit. Les dégradés linéaires à deux couleurs vives fatiguent vite ; je préfère des teintes proches, mêlées en plusieurs points.
.surface {
background:
radial-gradient(60% 80% at 20% 10%, #ffd9c2, transparent),
radial-gradient(50% 70% at 80% 30%, #f7b6c8, transparent),
#fdf3ea;
}
Le flou pour la profondeur
Flouter l’arrière-plan met le premier plan en valeur, comme en photographie. Dans une interface, je le réserve aux couches qui passent au-dessus du contenu : menus, barres, fenêtres.
Doser
- opacité d’un grain discret
- 2–6 %
- texture dominante par page
- 1
- texture derrière du texte long
- 0
En résumé
- Un grain léger pour casser l’effet plastique.
- Des dégradés doux, qui imitent une lumière.
- Le flou réservé aux couches superposées.
- Une seule texture dominante, jamais sous un texte long.
