Les Mesh Gradients débarquent dans iOS18 : la vague du dégradé va-t-elle nous emporter ?

Fonctionnalité historique d’Illustrator, le "mesh gradient" est une forme avancée de dégradé où les couleurs sont interpolées plus seulement le long d'une ligne (on parle dans ce cas de dégradé linéaire) mais à travers toute une grille sur laquelle on va venir disposer des points pour recouvrir une forme ou une surface. Cette technique permet donc de créer des dégradés plus contrôlés et détaillés grâce à ces fameux réseaux de points que l’on appelle "maillages". 

Avec iOS18, les Mesh Gradients prennent un nouvel essor. Il est désormais possible pour les développeurs de les intégrer plus facilement dans les apps iOS via SwiftUI et surtout… de les rendre dynamiques. Alors vraie tendance ou fausse bonne idée ? On fait le point.

Comment designer un Mesh Gradient ?

L’idée est plutôt simple : on commence par créer un maillage ou une grille de points sur une surface afin de la diviser en plusieurs zones. On assigne ensuite des couleurs à ces points ou à certaines zones du maillage. Les couleurs entre ces points sont interpolées de manière fluide, créant un dégradé complexe qui peut suivre la forme et les contours du maillage.

Sur Figma, un plugin permet de faire des mesh gradients. Il suffit de l’activer puis de sélectionner la forme pour laquelle on souhaite créer un mesh gradient. On y retrouve des options avancées pour ajuster la couleur ou le nombre de points mais aussi quelques options plus expérimentales comme "Randomize" pour générer des combinaisons de couleurs & points aléatoires, la possibilité d’enregistrer ses gradients, de réinitialiser les configurations ou de personnaliser avec précision la position, la courbure et la couleur des points.

Les designers face aux usages et défis des Mesh Gradients

“La technique de mesh gradient nous permet d’avoir un contrôle précis sur les dégradés de couleurs. Ils offrent une sensation de modernité, d’innovation et captent l’attention de l’utilisateur via des couleurs vives et des transitions subtiles.”

Anne-Sophie Gotteland, Head of Design. 

Les mesh gradients sont utilisés pour créer des effets visuels détaillés et réalistes notamment dans les illustrations vectorielles et pour produire des dégradés plus sophistiqués et nuancés difficiles à obtenir avec des dégradés linéaires ou radiaux simples. Ils ajoutent de la profondeur, de la texture et du mouvement aux interfaces, ce qui aide à rendre les expériences visuelles plus engageantes.

“Les Mesh Gradients rappellent les esthétiques “vaporwaves” et “rétrofuturistes” qui mettent en avant des couleurs saturées et des transitions abstraites. Ils s'inscrivent dans une vague de nostalgie des styles numériques du passé tout en étant modernisés pour s'adapter aux interfaces actuelles.”

Alex Gomes, Lead UI Designer

Attention toutefois, la mise en place et l'ajustement du maillage peuvent être plus complexes que pour les dégradés traditionnels. Une maîtrise technique avancée est nécessaire pour adopter le bon équilibre et éviter de surcharger l'interface.

Dans certaines applications, ils peuvent aussi affecter les performances, notamment dans les environnements en temps réel comme les jeux vidéo, d’où la nécessité d’une étroite collaboration entre designers et développeurs.

Mesh Gradient dans iOS18 : ça change quoi réellement pour les développeurs ?

Une chose est sûre, sur iOS18, les mesh gradients sont partout ! Apple tend à démocratiser depuis quelques années la tendance du dégradé et la pousse ici à son paroxysme avec sa dernière version d’OS. Depuis SwiftUI, le framework de création d’interfaces utilisateurs d’Apple, les développeurs n’ont qu’à spécifier la largeur et la hauteur du dégradé, les positions de chaque couleur puis les couleurs à afficher dans chaque zone. Une simplicité qui fait de l’initiative d’Apple ici un nouvel emblème du design to code.

“Ce n’est pas le premier outil disponible dans SwiftUI qui permet aux développeurs iOS de créer des éléments de design : il y a eu le blur, les gradients classiques et maintenant les mesh gradients. Ce qui change considérablement ici c’est qu’ils deviennent beaucoup plus simples à créer et intégrer bien qu’il s’agisse de la forme de dégradé la plus complexe.”

Prigent Roudaut, Head of mobile

Le gros plus ? À partir d’iOS18, les mesh gradients pourront être animés en faisant varier les valeurs indiquées. Un bon moyen d’inspirer les designers, comme si la créativité pouvait aussi être désormais pilotée par la technologie. 

“Auparavant, on avait plutôt tendance à intégrer les mesh gradients sous forme d’images. Désormais, on peut intégrer des mesh gradients dynamiques. C’est la grande nouveauté ! Mais les designers vont-ils réellement imaginer des interfaces avec ces dégradés animés ? Pas sûr car ils ne sont pour l’instant disponibles que pour les apps sous iOS18 et versions ultérieures et donc pas pour les anciennes versions ni pour les apps Android, pour qui cela resterait de l’image fixe. Pour des questions de cohérence, il est donc peut-être encore trop tôt pour les utiliser à grande échelle.”

 Cyrille Legrand - Lead Développeur iOS

Déjà au cœur des tendances design 2024, nul doute que les dégradés devraient continuer à se répandre dans les interfaces digitales dans les mois à venir. Si l’on prend en considération le pouvoir de prescription d’Apple, on peut légitimement se dire que les mesh gradients aussi, tant leurs perspectives de contrôle et de nuances sont puissantes. Reste à voir si les autres OS prendront le pli pour en faire une tendance plus globale et donc durable car pour l’instant, sur Android, si Material 3 fait la part belle aux couleurs vives en patchwork, les dégradés ne sont pas mis en avant.