Découvrez le nouveau design des icônes d’app

Bonjour, je m’appelle Marie et je suis designer chez Apple. Aujourd’hui, j’ai le plaisir de vous présenter un tout nouveau design pour les icônes d’app. Nous allons découvrir toutes les nouveautés à venir pour les icônes. Je vous donnerai même un aperçu des coulisses de la conception de ce nouveau langage visuel. Ensuite, nous examinerons le système de conception sous-jacent et je donnerai des conseils et astuces très utiles pour concevoir votre propre projet. À la fin de cette séance, vous aurez une vue d’ensemble qui vous aidera à mieux maîtriser nos nouveaux effets de matériaux et surtout à créer des icônes esthétiques et originales. Pour commencer, parlons de la vision créative qui se cache derrière ce design et de ce qui le rend si unique. Nous verrons aussi les innovations apportées aux modes d’apparence.

Cette année, dans le cadre de notre refonte, nous nous sommes inspirés des icônes superposées de visionOS et avons étudié les propriétés réelles du verre pour élaborer le matériau Liquid Glass pour les icônes d’app.

Ce matériau superpose des éléments comme des reflets sur les bords, un effet givré et la translucidité, pour donner un effet de profondeur et l’impression que les icônes sont éclairées de l’intérieur. Outre cet aspect physique, le matériau prend vie sur l’écran d’accueil de votre appareil iOS. Selon les données fournies par le gyro, une lumière se déplace sur le bord de l’icône, comme un reflet du monde qui vous entoure.

Ce nouveau traitement de matériau est superbe en mode clair et sombre, et nous introduisons aussi de nouveaux modes d’apparence translucide utilisant Liquid Glass. Un verre monochrome qui existe en version claire ou sombre, et nous avons créé deux modes de teinte : une teinte foncée qui rehausse le premier plan, et une teinte claire où la couleur imprègne directement le verre. Cela rend le choix des couleurs encore plus amusant, dynamique et expressif. Le nouveau verre teinté est magnifique lorsqu’il est associé à un écran de verrouillage teinté.

Tous les modes d’apparence sont disponibles sur iPhone, iPad et Mac. Même sur l’Apple Watch, vous verrez les icônes du mode clair dans leur nouveau design.

Bien entendu, vous verrez également la nouvelle version de votre icône sur la page produit de l’App Store. Examinons maintenant le système de conception sous-jacent.

Auparavant, chaque appareil nécessitait sa propre conception, ainsi certaines icônes variaient légèrement selon la plate-forme. Désormais, notre nouveau langage iconographique unifié simplifie la conception sur tous nos appareils, aux formats rectangle, arrondi ou cercle.

Commençons par le rectangle arrondi. Nous avons mis à jour la grille de design pour une structure plus simple et espacée. La nouvelle grille présente des coins plus arrondis, pour une plus grande concentricité des icônes avec notre interface et nos équipements.

Avec notre canevas de 1 024 pixels, les icônes arrondies disposent d’un cadre dédié dans la grille et de plus d’espace. La nouvelle grille simplifie la création d’images visuellement équilibrées, quelle que soit leur proportion.

Vous vous demandez peut-être comment ces nouveautés dans le design affecteront les icônes macOS. Voyons cela. Certaines icônes macOS présentaient des éléments secondaires pouvant créer une forme composée. Dans l’ancienne icône Contacts, les onglets dépassent de la forme du carnet. Pour éviter ces formes irrégulières, le canevas joue un rôle de masque appliqué sur le design. Vous pouvez voir ici comment nous avons repensé l’icône pour mieux utiliser le canevas et intégrer les onglets dans sa forme.

Les icônes Mac existantes qui utilisent notre forme de rectangle arrondi sont automatiquement ajustées ou étendues pour s’adapter au modèle. Elles bénéficient aussi des effets du nouveau matériau automatiquement.

Voici un autre exemple intéressant, où l’icône a une forme très particulière. Dans ce cas, le système supprime les ombres portées et redimensionne l’icône pour la placer dans le canevas aux coins arrondis.

Bien que cet ajustement automatique soit astucieux, il est préférable de redessiner votre icône pour utiliser pleinement l’espace disponible, comme pour Photo Booth.

Maintenant que nous avons abordé iOS et macOS, voyons à quoi ressemblent les icônes avec l’effet verre sur Watch.

Nous avons soigneusement aligné la grille circulaire watchOS sur la nouvelle grille en rectangle arrondi.

Le canevas de 1 088 pixels dépasse notre rectangle arrondi, ce qui simplifie les adaptations entre plates-formes et assure une cohérence visuelle.

Les icônes rondes ressemblent davantage à nos autres produits, même à l’échelle réduite de votre Apple Watch.

Nous avons aussi actualisé nos modèles selon le nouveau système de conception, ce qui peut s’avérer pratique durant la création de vos designs. Ils sont disponibles pour Figma, Sketch, Photoshop et Illustrator.

Tous les modèles sont disponibles sur la page des ressources Apple Design, sur developer.apple.com. Parlons des éléments à prendre en compte lors de la création d’icônes pour tirer le meilleur parti de nos nouveaux matériaux et modes d’apparence. Nous aborderons l’importance de la superposition, comment la translucidité et le flou peuvent rendre votre matériau plus esthétique, le rôle clé de la simplicité, et nous vous donnerons des conseils sur les arrière-plans. Commençons par la superposition, élément clé de notre nouveau langage de conception et essentiel lorsque vous travaillez avec des matériaux. Dans leur forme la plus simple, les icônes comportent une couche d’arrière-plan et de premier plan, comme l’icône Messages.

Même avec une seule couche de premier plan, les effets du matériau rendent l’icône beaucoup plus détaillée. La bulle de messages a une très belle translucidité et une ombre subtile lui apporte un peu plus de relief. Nous ne pouvons avoir qu’un seul arrière-plan, mais le premier plan peut être exprimé à travers plusieurs couches. C’est en empilant ces couches que cela devient vraiment intéressant. Prenons Podcasts. Auparavant, le design utilisait un style pochoir qui donnait déjà à l’icône un effet de superposition. L’espace autour de la figure donnait l’impression qu’elle se trouvait devant les lignes circulaires.

À présent, avec notre technique de superposition, nous empilons les formes pour créer un design réellement tridimensionnel.

Les icônes étant plus détaillées au niveau du système, nous constatons que certains styles d’illustration et certaines perspectives fonctionnent mieux que d’autres.

Les objets et perspectives 3D réalistes, comme dans l’icône Échecs précédente, peuvent rivaliser avec les qualités du matériau.

L’icône repensée utilise une vue frontale et une apparence plus plane.

Au lieu d’utiliser un style d’illustration complexe, nous laissons le matériau apporter de la nuance.

Les formes dimensionnelles doivent être utilisées de manière réfléchie et conçues pour parfaire les qualités du verre. Voyons comment améliorer cette icône Preview.

Ce nouveau design offre de meilleurs résultats avec les effets du matériau et la perspective choisie ici a un objectif clair, car elle met en valeur la zone de focalisation de la loupe.

Parlons maintenant de la translucidité.

L’utilisation de la translucidité dans le flou avec le nouveau matériau est très simple et esthétique. Elle permet d’apporter de jolies nuances, de la légèreté et encore plus de profondeur.

La translucidité est très esthétique en mode clair et sombre, et s’intègre à merveille dans nos modes transparents. Avec l’arrière-plan en verre, le fond d’écran reste visible à travers toutes les couches translucides. Nous connaissons tous l’expression « moins c’est mieux », et je vais vous montrer pourquoi c’est particulièrement vrai concernant nos matériaux. Photos en est un excellent exemple. L’ancien design utilisait déjà la transparence pour mettre en valeur les pétales qui se chevauchent et ajouter une certaine dimension à l’ensemble. En réduisant les chevauchements, les intersections et les bords réfléchissants de notre matériau sont davantage mis en valeur.

Nous avons également actualisé les couleurs pour qu’elles soient plus éclatantes et rappellent le verre teinté, tout en conservant la palette de couleurs propre à l’icône Photos.

Le nouveau design utilise également notre grille repensée, qui donne plus d’espace à l’icône, tandis que les ombres chromatiques ajoutent encore plus de profondeur au verre.

De nombreux effets dynamiques étant disponibles dans la recette du matériau, il est recommandé de réduire les effets statiques intégrés dans l’illustration source.

Vous pouvez observer divers effets intégrés dans l’ancienne icône Maison, comme les ombres portées ou les bords biseautés.

À l’instar de ce que nous venons de voir dans Photos, la nouvelle icône Maison est une version simplifiée du design précédent.

Nous avons réduit le nombre de couches, arrondi les formes et éliminé tous les effets de matériau superflus. Voici le résultat obtenu après application de notre effet verre. Vous voyez à quel point cet effet confère un style soigné et délicat à un design qui semble simple à première vue.

En effet, le nouveau design exploite les caractéristiques distinctives de nos matériaux :

la translucidité, les ombres par couche pour plus de profondeur et les reflets spéculaires qui sculptent les éléments. Faites également attention aux menus détails de votre icône quand vous la dessinez.

Dans l’idéal, il convient d’éviter les bords vifs et les lignes fines. Utilisez plutôt des coins arrondis afin que la lumière se reflète plus facilement sur les bords d’un élément, comme sur ces roues dentées arrondies de l’icône Réglages.

Bien sûr, il n’est pas nécessaire d’appliquer le matériau à tous les éléments, mais il est conseillé d’utiliser des traits plus épais pour conserver les détails à une échelle réduite.

Pour finir, parlons des arrière-plans et de leur impact sur l’apparence de votre icône.

Les effets d’éclairage étant essentiels à ce nouveau look, notez que les dégradés plus doux entre la lumière et l’obscurité s’harmonisent mieux avec la direction de la lumière.

Nous avons aussi créé un dégradé pour les modes Clair et Sombre, à utiliser à la place des arrière-plans entièrement blancs ou noirs. Ces dégradés garantissent un contraste optimal et constituent une toile de fond idéale pour nos effets de matériau.

Une dernière chose : compte tenu du succès du mode sombre, nous conseillons d’opter plutôt pour des arrière-plans colorés, offrant une distinction plus nette lors du passage d’un mode à l’autre.

Voilà donc un aperçu de notre nouveau langage de design pour les icônes d’app. Comme vous l’avez vu, il ne s’agit pas seulement d’une nouvelle esthétique, mais aussi d’élargir les perspectives pour la créativité. Ce système permet de concevoir une version personnalisée et optimale de chaque icône, qui reflète la qualité et l’innovation que vous apportez à vos apps. Cela marque selon nous le début d’une nouvelle ère pour les icônes, qui joueront un rôle majeur dans le storytelling et l’identité de marque. Je vous invite donc à découvrir ce nouveau chapitre, à explorer les possibilités, à innover et élargir les horizons d’une icône et à créer des expériences qui ravissent dès le premier regard. Maintenant que vous allez vous lancer dans la création, je vous conseille de regarder la présentation de mon collègue Lyam, « Create app icons with Icon Composer ». Il vous expliquera tout ce qu’il faut savoir sur ce nouvel outil et comment l’utiliser pour créer votre icône Liquid Glass. Merci de votre attention !