Chaque année, dès que la keynote d'Apple se termine, les réseaux sociaux s'embrasent. En plus de parler des nouveaux iPhone et iPad, les designers ne sont pas les plus occupés à regarder les spécifications techniques, mais plutôt à décortiquer les détails de design du site d'Apple. Pourquoi ? Parce qu'à chaque refonte, les couleurs, les dégradés, le traitement des ombres et de la lumière, tout cela est à la fois admirable et frustrant. Admirable parce que c'est vraiment beau, frustrant parce qu'on n'arrive pas à reproduire cet effet exactement.
Avant, pour obtenir un dégradé style Apple, il fallait ajuster les curseurs dans Photoshop ou écrire manuellement les valeurs de couleur dans le code. Après des heures de galère, on avait les yeux fatigués. Mais cette année, c'est différent. J'ai remarqué que beaucoup de designers autour de moi, y compris moi-même, utilisent secrètement un outil appelé « Générateur de dégradés CSS ». Ne sous-estimez pas cet outil, c'est comme une triche pour le design style Apple.
Qu'est-ce qui le rend si génial ? D'abord, la rapidité. Vous voulez un dégradé doux et sophistiqué ? Pas besoin de chercher sur des sites de palettes de couleurs. Il suffit de sélectionner quelques couleurs similaires dans l'outil, de faire glisser la direction, d'ajuster la transparence, et le tour est joué. Le plus important, c'est qu'il génère du code CSS que vous pouvez copier-coller directement dans votre projet, ce qui évite de faire des captures d'écran et de mesurer manuellement les valeurs de couleur. L'efficacité est décuplée.
Ensuite, il y a les préréglages. Les fonds d'écran et les pages promotionnelles des keynotes Apple utilisent souvent de grands blocs de couleur avec un effet de lumière dynamique. Les préréglages intégrés à cet outil sont souvent conçus dans ce style. Vous en choisissez un qui s'en approche, puis vous modifiez légèrement l'angle ou déplacez la position de la couleur centrale, et le résultat est bien meilleur que ce que vous pourriez obtenir en tâtonnant dans Photoshop. Pendant ces jours-là, pour créer des arrière-plans de projet, je m'appuyais sur cet outil. Mon client m'a dit : « Ah, cette sensation est juste, c'est très sophistiqué », et je souriais intérieurement, car je savais que je m'inspirais d'Apple.
Certains pourraient se demander si cet outil ne convient qu'aux styles technologiques très flashy. Pas du tout. Il peut aussi créer des dégradés très doux et simples, comme une transition du gris clair au blanc cassé, parfaite pour les interfaces d'administration ou les pages de documents, propres et nettes. Le sélecteur de couleurs est très intuitif : vous choisissez selon votre ressenti, sans hésiter, et ce que vous voyez est ce que vous obtenez.
De plus, pour les développeurs front-end, cet outil est une véritable mine d'or. Avant, pour écrire un dégradé d'arrière-plan, il fallait se souvenir d'ajouter les préfixes ou de gérer la compatibilité navigateur. Maintenant, il génère tout en une seule fois, avec la syntaxe standard et la compatibilité déjà prise en compte. Copiez, collez, actualisez le navigateur, et l'effet correspond exactement à ce que vous aviez imaginé. Le temps gagné peut être utilisé pour se détendre ou pour peaufiner d'autres détails. N'est-ce pas génial ?
Donc, même si la keynote d'Apple est passée, l'esprit de cette esthétique de design perdure. Le petit secret qui circule entre designers n'est pas une technologie complexe, mais souvent un outil pratique comme celui-ci. Si vous aussi vous cherchez comment créer un arrière-plan de page, une texture de carte ou un effet de lumière sur un bouton, ne vous forcez plus. Essayez ce générateur de dégradés CSS. Vous découvrirez peut-être que la « distance » avec Apple ne tient qu'à un petit outil.
Voilà, ne le criez pas sur tous les toits, utilisez-le discrètement. Si tout le monde l'apprend, vous n'aurez plus d'avantage. Allez vite le mettre dans vos favoris. La prochaine fois que vous ferez du design, vous ressentirez ce plaisir de « c'était si simple ».