Adobe stellt Spectrum 2 vor: Ein Designsystem, das die User Experience der Adobe Applikationen neugestaltet
Wenn ihr im Laufe der Jahre mehr als ein Adobe-Werkzeug verwendet habt, sind euch wahrscheinlich Ähnlichkeiten aufgefallen: Anwendungslayout, Symboldesign und Farbpaletten, um nur einige zu nennen. Dies sind alles Komponenten unseres Designsystems Spectrum, das vor über zehn Jahren eingeführt wurde. Dieses System sorgt dafür, dass sich alle Adobe-Produkte „wie Adobe“ anfühlen.
Heute stellen wir Spectrum 2 vor, das bisher bedeutendste Update unseres Designsystems. Adobes Kernzielgruppe wächst und mit generativer KI durch Adobe Firefly erreichen wir viele neue Nutzer*innen. Gleichzeitig stellt Adobe professionellen Anwender*innen weiterhin Werkzeuge zur Verfügung, die sie für ihre kreative Arbeit, ihre Marketingaktivitäten und darüber hinaus benötigen. Spectrum 2 soll die Werkzeuge von Adobe noch intuitiver, inklusiver und angenehmer in der Nutzung machen und das über alle Plattformen hinweg. Gleichzeitig unterstützen wir damit unsere Mission, Kreativität für alle zu ermöglichen.
Im Folgenden erfahrt ihr, warum wir unser Designsystem jetzt aktualisieren und was ihr im Jahr 2024 von der neuen Adobe Experience erwarten könnt.
Wo Spectrum begann und warum wir es jetzt aktualisieren
Seit der ersten Implementierung von Spectrum in allen Produkten und Experiences von Adobe im Jahr 2013 hat sich viel verändert. Adobe Creative Cloud ist jetzt plattformübergreifend für Web, Mobile, Desktop und Mixed Reality verfügbar. Wir haben Adobe Express auf den Markt gebracht, mit dem alle, von Pädagog*innen bis hin zu Social Media Influencer*innen, kreativ sein kann. Und sowohl Adobe Document Cloud als auch Adobe Experience Cloud haben ihre Produkte grundlegend verändert und ihre Kundenbasis vergrößert. Die Veröffentlichung von Firefly hat mit seinen leistungsstarken generativen KI-Funktionen zusätzlich die Arbeitsabläufe in mehreren Adobe Applikationen verändert.
Kurz gesagt, wir bedienen heute ein viel breiteres Publikum als noch vor zehn Jahren. Adobe hat sich weiterentwickelt und unser Designsystem musste sich ebenfalls anpassen.
Spectrum 2 ist ein umfassendes Update, das jedes Designelement abdeckt, einschließlich Ikonografie, Typografie, Farbe, Marke, Illustration, Barrierefreiheit, Produktwert, Personalisierung, Datenvisualisierung und mehr. Dieses Update bietet drei wesentliche Verbesserungen für unsere Nutzer*innen.
Es sorgt dafür, dass unsere Produkte…
- … barrierefreier und inklusiver sind.
- … leichter zugänglich und ausdrucksstärker erscheinen.
- … sich „wie Zuhause“ anfühlen und das über alle Plattformen hinweg.
Die ersten Updates werden ab Anfang 2024 auf allen Adobe-Webprodukten eingeführt.
Mehr Barrierefreiheit und Inklusion
Spectrum 2 sollte hohe Anforderungen an die Barrierefreiheit erfüllen, damit möglichst viele Menschen die Adobe-Werkzeuge nutzen können. Die Weltgesundheitsorganisation schätzt, dass weltweit 2,2 Milliarden Menschen an einer Form der Sehbehinderung leiden. Für Spectrum 2 sind die Zugänglichkeitsrichtlinien für Web-Inhalte (Web Content Accessibility Guidelines, WCAG) – an denen auch Adobe mitwirkt – der maßgebliche Ausgangspunkt, um unsere Web-Tools inklusiver und zugänglicher zu gestalten.
Erfolgreiche Barrierefreiheit bedeutet vieles: Angemessene Kontrastverhältnisse von Text und anderen Steuerelementen und Containern im Verhältnis zu ihren Hintergründen, Zugänglichkeits-Tags, Tastatursteuerungen, Fokuszustände und andere Detaillösungen. Die Erfüllung der grundlegenden Anforderungen an die Barrierefreiheit war ein guter erster Schritt, aber wir wollten noch weiter gehen. Jeder Mensch ist anders und wir möchten, dass sich künftige Adobe-Produkte flexibel an die persönlichen Bedürfnisse und Vorlieben anpassen.
In Spektrum 2 haben wir uns auf drei Hauptbereiche konzentriert:
- Dynamischer Kontrast und Helligkeit: Mithilfe von adaptiven Paletten werden zugängliche Farben in Echtzeit generiert, so dass die Anwender*innen selbst entscheiden können, wie ihre Benutzeroberfläche aussehen soll.
- Besser zugängliche Farben, die verschiedene Farbsehschwächen unterstützen: Dazu gehört die Überarbeitung der Farben, die wir für die Datenvisualisierung verwenden, und die Beseitigung von Farbnamenkonflikten, bei denen zwei oder mehr Farben als dieselben bezeichnet werden können (Pfirsich vs. Orange vs. Lachs).
- Hierarchie der Aufmerksamkeit, um bestimmte visuelle Elemente in den Vordergrund zu stellen: Wir haben überflüssige Hervorhebungen in den üblichen Bedienelementen entfernt und sie für die wichtigsten Momente reserviert. Außerdem haben wir eine Trennung zwischen der Navigation und den Inhaltsbereichen geschaffen, um ihnen mehr Tiefe und Höhe zu verleihen.
Unsere Bemühungen gehen Hand in Hand mit der Product Equity Practice von Adobe Design, die in Zusammenarbeit mit den Design-, Produkt- und Entwicklungsteams dafür sorgt, dass jeder Mensch, unabhängig der physischen Gegebenheiten, Zugang zu unseren Produkten hat und diese in vollem Umfang nutzen kann, ohne Vorurteile, Benachteiligungen oder Einschränkungen.
Spectrum 2 wird ein breiteres Feld an persönlichen Vorlieben und Bedürfnissen abdecken, z. B. durch anpassbare Dichte- und Kontrastoptionen (siehe oben), wodurch die Produkte von Adobe zugänglicher und integrativer werden.
Mehr Zugänglichkeit und Ausdrucksstärke
Die erste Version von Spectrum war minimalistisch, mit einer grauen Farbpalette, die sich zurücknehmen sollte. Spectrum 2 überarbeitet Symbole, Typografie und mehr, um die Adobe Experience zugänglicher und markanter im Design zu machen.
Das Spectrum-Team begann, in einem einzigen Produkt mit einem ansprechenderen Design zu experimentieren: Adobe Express, unser All-in-One-Kreativitätswerkzeug, das sich an ein breites Publikum richtet. In Zusammenarbeit mit dem Express-Designteam entwickelten wir ein neues UI-Thema, das einen Vorgeschmack auf die wichtigsten Komponenten von Spectrum 2 gibt: Adobe Express wurde heller, kräftiger und runder gestaltet. Die Symbole und die Typografie wurden freundlicher, die Striche etwas dicker, die Farben heller und im Allgemeinen viel zugänglicher.
Die Arbeit, die wir für Adobe Express geleistet hatten, war unser Ausgangspunkt für Spectrum 2.
Die Summe dieser Änderungen hatte einen großen Einfluss darauf, wie die Anwendung für die Verbraucher*innen aussah und sich anfühlte. Die Arbeit mit Express war ein wichtiger Ausgangspunkt für die neuen Gestaltungsprinzipien in Spectrum 2. Diese ausdrucksstarken und ansprechenden Designelemente werden bei der Einführung von Spectrum 2 im Jahr 2024 für alle Adobe-Anwendungen wegweisend sein.
Das Gefühl von „Zuhause“ über alle Plattformen hinweg
Das Erscheinungsbild von Spectrum 2 wird je nach Plattform variieren. Da Adobe seine Produkte für eine Vielzahl von Plattformen entwickelt (einschließlich OSX, Windows, iOS, Android und Web), mussten wir die richtige Balance zwischen plattformübergreifender Konsistenz (bei der die Benutzer*innen die Verwendung eines Werkzeugs auf einer Plattform erlernen und dieses Wissen dann auf eine andere übertragen können) und der Einhaltung der Konventionen jeder Plattform finden. Die Verwendung eines Tools wie Adobe Lightroom auf eurem Arbeits-MacBook unterscheidet sich von der Verwendung auf eurem privaten Android-Handy – aber es fühlt sich immer noch wie Lightroom an.
Als Spectrum entworfen wurde, entwickelten sich die mobilen Plattformen rasant weiter und die Benutzererfahrung variierte von App zu App und von Betriebssystem zu Betriebssystem, so dass wir uns zunächst darauf konzentrierten, Spectrum so konsistent wie möglich für alle Plattformen zu gestalten. Spectrum 2 bietet spezifische Varianten für jede Plattform, sodass sich die Adobe-Werkzeuge auf dem Gerät und der Plattform, auf der ihr sie nutzen wollt, wie zu Hause fühlen.
Spectrum 2 wird den Konventionen jeder Plattform folgen, von der mobilen (links) bis zur gemischten Realität (rechts).
Icons, Farben, Illustrationen und Formen neu denken
Um die Vision von Spectrum 2 zu unterstützen, hat unser Team Änderungen an mehreren grundlegenden Komponenten in unserem Designsystem vorgenommen. Dazu gehört auch die Überarbeitung der Icons, die nun sauberer, freundlicher, anpassungsfähiger, verspielter und vertrauter sind.
Ein genauerer Blick auf die Icons: vorher (links) und nachher (rechts).
Wir haben unser graues System angepasst, um mehr Kontrast zu schaffen, und ein neues Farbsystem entwickelt. Wir nutzten dazu die Markenfarben von Adobe und legten damit den Grundstein für eine organischere Integration unserer Marke in unsere Produkterlebnisse. Die Angleichung des Farbsystems von Spectrum 2 an die Markenfarben erleichtert die Harmonisierung von Oberflächen über alle Produkte hinweg.
Spectrum 2 enthält ein überarbeitetes Farbsystem, das auf den Markenfarben von Adobe basiert.
Illustrationen können in Adobe Experiences viele Formen annehmen. Sie reichen von einfachen Linien bis hin zu robusten, vollfarbigen redaktionellen Stilen mit Farben, die auf die Markenfarbe des Produkts abgestimmt sind, das sie unterstützen. Das Brand Designerteam hat ein neues Toolkit mit geometrischen Formen entwickelt, die auf unendlich viele Arten kombiniert werden können, um Illustrationen, Banner und andere Elemente zu erstellen.
Das Brand Design Team von Adobe hat ein aktualisiertes Illustrationssystem für Spectrum 2 entwickelt.
Was ihr von Spectrum 2 erwarten könnt
Im Laufe des nächsten Jahres wird Spectrum 2 in allen Tools und Applikationen von Adobe eingeführt, angefangen bei unseren Web-Produkten. Es war ein langer Weg, um Spectrum 2 von unserer ursprünglichen Vision zur Realität werden zu lassen, aber wir stehen erst am Anfang – wie jedes Design-System ist auch Spectrum ständig im Wandel. Zurzeit arbeiten wir hart an der Entwicklung der zukünftigen Richtung unserer Desktop- und Mobilprodukte, die jeweils ihre eigene spezielle Version von Spectrum erhalten werden.
Besucht die Spectrum 2-Website, um einen genaueren Überblick über das System und die kommenden Funktionen zu erhalten, und werft einen ersten Blick auf die Änderungen an bekannten Tools:
Das Spectrum 2-Design für die „Ihre Dateien“-Seite der Creative Cloud hat eine klarere visuelle Hierarchie und ein leichteres, helleres, ausdrucksstärkeres und zugänglicheres Erscheinungsbild.
In Adobe Photoshop im Web werden abgerundete Ecken in Bedienfeldern und Werkzeugleisten mit runderen und verspielteren Symbolen kombiniert, die dennoch klar, sauber und leicht erkennbar sind. Andeutungen der Markenfarbe helfen bei der Orientierung für Anwender*innen, die zwischen mehreren Applikationen wechseln.
Der Adobe Acrobat Document Editor im Web hat in den letzten Jahren eine Vielzahl neuer Funktionen eingeführt. Das visuelle Design von Spectrum 2 bietet mehr Kontrast und Lesbarkeit für Symbole, Text und andere Komponenten (wie Schaltflächen und Texteingaben).
Das Design von Spectrum 2 für die Webseite von Adobe Acrobat bietet ein flexibles und anpassungsfähiges Illustrationssystem für Icons, Spot-Illustrationen und Banner. Es verfolgt außerdem einen modularen Ansatz für die Gruppierung von Teilen der Benutzeroberfläche und vermittelt durch Farbschichten und subtile Schatten ein Gefühl von Tiefe.
Für den Adobe Journey Optimizer hat Spectrum 2 den Kontrast erhöht und die Navigation vereinfacht, um den Fokus auf das Wichtigste auf der Seite zu lenken und eine komplexe Benutzererfahrung zu erleichtern.
