Adobe dévoile Spectrum 2, le nouveau design system qui redéfinit l’expérience utilisateur des applications

Si vous avez déjà utilisé des outils Adobe, vous aurez sans doute remarqué qu’ils présentent des similitudes, notamment sur l’apparence, le design des icônes et les palettes de couleurs. Ces différents éléments constituent Spectrum, un design system lancé il y a plus de 10 ans et qui traduit l’expérience Adobe.

Ainsi, nous dévoilons Spectrum 2, la mise à jour la plus importante de notre design system. Alors que notre communauté ne cesse de croître et que l’IA générative de Adobe Firefly nous permet de toucher davantage de personnes, nous continuons de proposer des outils indispensables à la conception de campagnes créatives, marketing et autres projets. Spectrum 2 a été conçu pour rendre les outils Adobe encore plus intuitifs, inclusifs et agréables à utiliser sur l’ensemble des plateformes, et poursuivre notre mission qui consiste à encourager la créativité pour tous.

Nous allons vous expliquer la raison pour laquelle nous décidons aujourd’hui de repenser notre design system. Explorez ainsi, en avant-première, ce qui vous attend dans nos applications en 2024.

L’origine de Spectrum et les raisons de sa mise à jour

Spectrum a beaucoup évolué depuis sa première intégration dans les différentes solutions et expériences Adobe, en 2013. Adobe Creative Cloud est aujourd’hui une multi-plateforme pour le web, les ordinateurs, les appareils mobiles et la réalité mixte. Nous avons lancé l’application Adobe Express qui facilite la création de contenu pour tous, des enseignants aux créateurs de contenus à destination des réseaux sociaux. Par ailleurs, les solutions Adobe Document Cloud et Adobe Experience Cloud ont, elles aussi, radicalement changé et attirent une clientèle plus large.

Enfin la sortie de Firefly a permis de transformer les workflows de plusieurs applications Adobe grâce à de puissantes fonctionnalités d’IA générative. Autrement dit, nous nous adressons à un public plus vaste qu’il y a 10 ans. Adobe a évolué et notre design system devait, lui aussi, changer.

Spectrum 2 est une mise à jour complète de l’ensemble des éléments de design, notamment l’iconographie, la typographie, les couleurs, la marque, les illustrations, l’accessibilité, l’équité des produits, la personnalisation et la visualisation des données. Cette refonte apporte trois améliorations majeures à nos solutions :

• Plus d’inclusivité et d’accessibilité ;
• Davantage d’attractivité et d’expressivité ;
• Intégration plus étroite sur toutes les plateformes.

Le nouveau design system sera d’abord déployé dans les applications web début 2024.

Plus inclusif, plus accessible

Spectrum 2 devait être à la hauteur en termes d’accessibilité, afin de permettre au plus grand nombre d’utiliser les outils Adobe. D’après l’OMS, 2,2 milliards de personnes dans le monde souffrent d’une déficience visuelle. Pour rendre nos outils web plus inclusifs et accessibles avec Spectrum 2, il était impératif d’appliquer les directives pour l'accessibilité du contenu Web (Web Content Accessibility Guidelines – WCAG), auxquelles Adobe apporte déjà sa contribution.

Favoriser l’accessibilité repose sur plusieurs facteurs : des taux de contraste du texte satisfaisants et d’autres commandes et conteneurs spécifiques de l’arrière-plan, des balises d’accessibilité, des commandes clavier, des états focus et d’autres détails pratiques en matière d’exécution. Nous avons déjà franchi une première étape essentielle en répondant à des exigences d’accessibilité fondamentales, mais nous voulions aller plus loin. Chaque personne étant différente, nous souhaitons que les futurs solutions Adobe se plient et s’adaptent aux besoins et préférences de chacune d’elles.

Dans Spectrum 2, nous avons mis l’accent sur trois aspects :

• Contraste dynamique et luminosité :  l’usage de palettes adaptatives permet de générer des couleurs accessibles en temps réel et de donner aux utilisateurs la possibilité de choisir l’aspect de leur interface.
• Des couleurs plus accessibles, adaptées aux déficiences de perception des couleurs :  nous avons revu les couleurs que nous utilisons pour la visualisation des données, et éliminé les conflits de noms de couleurs lorsqu’une même teinte peut porter plusieurs appellations (pêche, orange et saumon, par exemple).
• Hiérarchie d’attention, pour donner la priorité à des éléments visuels spécifiques :  nous avons supprimé les couleurs de surlignage superflues dans les commandes courantes pour les réserver aux cas qui exigent le plus d’actions. Nous avons créé une séparation entre la navigation et les zones de contenu, ajoutant ainsi de la profondeur et de la hauteur.

Nos pratiques sont conformes à l’éthique produit développée par nos équipes Adobe Design, qui s’associe aux équipes de design, de produits et d’ingénierie pour que chaque personne, quelle que soit sa différence, puisse exploiter tout le potentiel de nos applications sans préjugé, sans risque et sans limitation.

Adapté à des préférences et besoins plus variés, Spectrum 2 offrira par exemple des options de densité et de contraste personnalisés (voir ci-dessus), qui rendront les applications Adobe plus accessibles et inclusives.

Plus attractif, plus expressif

La première version de Spectrum était minimaliste, avec une palette de gris conçue pour s’estomper. Avec Spectrum 2, nous avons repensé les icônes, la typographie et d’autres éléments afin de rendre l’expérience Adobe plus attractive et audacieuse.

L’équipe Spectrum a testé un design plus accueillant dans une première application : Adobe Express, notre outil de création tout-en-un destiné au grand public. En collaboration avec l’équipe design d’Express, nous avons créé un thème d’interface qui préfigurait les principaux composants de Spectrum 2.  Adobe Express est devenu plus léger, plus audacieux et plus rond. Les icônes et la typographie étaient plus chaleureuses, les contours légèrement plus épais, les couleurs plus lumineuses et, globalement, un ensemble plus accessible.

Le travail accompli pour Adobe Express est devenu notre point de départ de Spectrum 2.

Tous ces changements cumulés ont considérablement transformé l’apparence de l’application. Le travail accompli avec Express est devenu une base essentielle à l’élaboration des nouveaux principes de Spectrum 2. Après le déploiement du nouveau design system en 2024, ces éléments plus attractifs et expressifs se retrouveront dans l’ensemble des applications Adobe.

Intégration plus étroite sur toutes les plateformes

Spectrum 2 aura une apparence différente en fonction de la plateforme. Les applications Adobe sont utilisées sur différentes plateformes (OSX, Windows, iOS, Android et le web), nous devions ainsi trouver le juste équilibre pour créer une cohérence entre toutes les plateformes (possibilité d’apprendre à utiliser un outil sur une plateforme, puis d’exploiter cette connaissance sur une autre) et le respect des conventions de chacune d’entre elles. Si Adobe Lightroom ne s’utilise pas de la même manière sur un MacBook professionnel et sur un téléphone Android personnel, l’univers Lightroom reste néanmoins reconnaissable.

À l’époque de la première version de Spectrum, les plateformes mobiles évoluaient rapidement et l’expérience utilisateur était différente d’une application à l’autre, selon le système d’exploitation. Nous avions donc décidé dès le départ que Spectrum serait aussi homogène que possible sur l’ensemble des plateformes. Spectrum 2 proposera différentes variantes afin que les outils Adobe s’intègrent parfaitement sur chaque appareil, peu importe la plateforme.

Spectrum 2 respectera les conventions de chaque plateforme, des appareils mobiles (à gauche) à la réalité mixte (à droite).

De nouvelles icônes, couleurs, illustrations et formes

Afin d’aligner Spectrum 2 sur notre vision, notre équipe a modifié plusieurs composantes du design system. Nous avons notamment retravaillé les icônes pour qu’elles soient plus nettes, chaleureuses, adaptables, ludiques et familières.

Détail des anciennes icônes (à gauche) et des nouvelles (à droite)

Nous avons modifié notre système de gris pour augmenter le contraste et repensé notre modèle chromatique pour utiliser les couleurs d’Adobe. Cette approche nous a permis d’intégrer notre marque à l’expérience de nos solutions de manière plus naturelle. En alignant le modèle chromatique de Spectrum 2 sur les couleurs de la marque, il est plus facile d’harmoniser les interfaces des différentes applications.

Le nouveau modèle chromatique de Spectrum 2 reprend les couleurs de la marque Adobe.

Les illustrations prennent de nombreuses formes dans les expériences Adobe. Elles vont du simple dessin au trait à des styles éditoriaux plus aboutis dont les teintes sont basées sur la couleur de l’application qu’elles accompagnent. L’équipe en charge de la conception de la marque a développé un nouveau kit de formes géométriques pouvant être combinées à l’infini pour créer des illustrations, des bannières et autres éléments.

L’équipe design Adobe a recréé un modèle d’illustrations pour Spectrum 2.

Ce qui vous attend avec Spectrum 2

Au cours de l’année à l’avenir, Spectrum 2 sera progressivement déployé dans les outils et expériences Adobe, à commencer par nos applications web. La route a été longue entre la vision initiale de Spectrum 2 et sa réalisation, mais ce n’est qu’un début : comme tous les design system, Spectrum évolue constamment. Nous nous efforçons actuellement de définir l’orientation future de nos applications pour ordinateurs et appareils mobiles, qui intégreront chacune une version spécifique de Spectrum.

Consultez le site de Spectrum 2 pour en savoir plus sur le design system et les actualités à venir. Voici en avant-première quelques modifications qui concerneront des outils familiers :

Avec Spectrum 2, l‘onglet « Vos fichiers » de Creative Cloud propose une hiérarchie visuelle plus claire, et une apparence plus légère, lumineuse, expressive et accessible.

Dans Adobe Photoshop sur le web, les angles arrondis des panneaux et des barres d’outils côtoient des icônes aux formes également arrondies et plus ludiques, qui restent nettes, précises et facilement reconnaissables. Les touches de couleurs représentatives de l’application aident les utilisateurs à se repérer d’une application à l’autre.

Ces dernières années, nous avons ajouté de nombreuses fonctionnalités dans l’éditeur de documents Adobe Acrobat sur le web. Le design visuel de Spectrum 2 améliore le contraste et la lisibilité des icônes, du texte et des autres composants (comme les boutons et les entrées de texte).

La page d’accueil d’Adobe Acrobat sur le web reprend un modèle souple et adaptable pour les icônes, les illustrations et les bannières. Spectrum 2 regroupe les différentes parties de l’interface de façon modulaire et apporte de la profondeur grâce aux couches de couleurs et à un jeu d’ombres subtil.

Dans le design system Spectrum 2 pour Adobe Journey Optimizer, un contraste renforcé et une navigation plus simple font ressortir les paramètres les plus importants, et facilitent ainsi des interactions complexes.