Gestaltung der visuellen Identität für die Config 2024
Figma's Brand Studio verrät uns, wie es ein immersives und dynamisches Konferenzerlebnis gestaltet hat – alles in einer Figma-Datei.
Gestaltung der visuellen Identität für die Config 2024 teilen
Die Config findet im Moscone Center in San Francisco statt, einem riesigen Verantsltungsort. Wir haben auf jeder Oberfläche mit Größenverhältnissen gespielt, einschließlich der Ummantelung der Außenfassade des Gebäudes mit Vinylgrafiken.
Kastendrachen: One Hat One Hand
Eventproduktion: Sparks und Encore
Bewegung: Relay und Jordan Scott
Fotografie: Ross Mantle und Preston Gannaway
Sound: Sounds Like These
Website-Gestaltung: Big Marker
Jedes Jahr steht unser Brand Studio Team vor einer spannenden Herausforderung: die Entwicklung einer visuellen Sprache für Config, die jährliche Benutzerkonferenz von Figma. Das Ziel? Eine visuelle Identität zu entwickeln, die sich wie ein unverwechselbares, eigenständiges Erlebnis anfühlt und gleichzeitig der Gesamtmarke von Figma treu bleibt. Diese Erfahrung muss ein Publikum von Tausenden von Designer*innen, Entwickler*innen und Produktteams ansprechen, die persönlich an der Konferenz teilnehmen oder virtuell zuschalten. Dabei geht es nicht nur um die großen Momente wie die Eröffnungs-Keynote oder die Schilder im Moscone Center in San Francisco, sondern auch um die Details, die die digitalen Oberflächen, die Beuteltaschen und die Kontaktpunkte vor Ort ausmachen. Wir möchten, dass sich jede Interaktion wie eine immersive Erweiterung dessen anfühlt, was Figma Figma ausmacht. Hier ist ein Einblick, wie wir die Config 2024 zum Leben erweckt haben.
Die Balance zwischen Form und Funktion
In der Brainstorming-Phase lassen wir uns von den Funktionen von Figma leiten. In diesem Jahr waren wir besonders vom neu gestalteten Figma und den neuen Figma Slides begeistert, die Nutzer*innen ein flüssigeres und effizienteres Arbeiten ermöglichen. Die Möglichkeit, zwischen verschiedenen Modi zu wechseln – von der Erstellung bis zum Teilen der Arbeit, zum Beispiel – fühlte sich wie ein großer Durchbruch an. Wir wurden von dieser neuen Betrachtungsweise der Figma-Leinwand inspiriert, und von einer ganz neuen Leinwand in Figma Slides.
Also begannen wir, eine formbasierte Sprache zu skizzieren, die verstärkt, verschiebt und transformiert, jedes Mal eine unerwartete Perspektive zeigend.
Durch diese Betrachtungsweise begannen wir, Themen für unsere Arbeit zu identifizieren. Besonders angesprochen hat uns dabei:
- die Idee der Bewegung, insbesondere durch verschiedene Aufgaben oder Kontexte
- die kreative Verstärkung, durch Löschen aller Inhalte auf der Arbeitsfläche oder die Präsentieren der Arbeit
- verschiedene Perspektiven, die durch Zusammenarbeit zusammenkommen
- die Anwendung mehrerer Arten der Erstellung
Diese Themen gaben uns einen Ausgangspunkt, um verschiedene Ideen zu skizzieren. Herausgekommen ist eine formbasierte Sprache, die sich verschiebt, transformiert, verstärkt und aktiviert – – und jedes Mal eine unerwartete Perspektive zeigt.
Ähnlich wie im UX-Design geht es beim Konferenzdesign nicht nur um Ästhetik. Bei über 12.000 Teilnehmer*innen vor Ort und 65.000 virtuellen Teilnehmer*innen mussten wir komplexe Aspekte bei der Benutzerzufriedenheit berücksichtigen. Von der Registrierung bis zur Sitzplatzreservierung für Vorträge benötigten wir ein Designsystem, das viele verschiedene Szenarien abdecken kann. Unsere visuelle Sprache führte die Teilnehmer*innen durch das Erlebnis und und verband dabei Raffinesse mit Kohärenz.
Wir haben grundlegende einfache Formen als Bausteine für komplexere Supergrafiken verwendet.
Design im großen Maßstab
Eine der größten Herausforderungen bei einem Event wie Config ist die schiere Menge an Assets, die wir erstellen müssen. Unser Ziel war es, ein modulares System zu schaffen, das variabel und ansprechend ist – bei dem alles kohärent wirkt, aber nie repetitiv.
Formen sind seit Langem ein zentrales Motiv der Config-Marke. Wir haben daher zunächst eine Bibliothek mit einfachen geometrischen Formen oder Grundformen erstellt, die direkt aus der Figma-Symbolleiste stammen – ein Rechteck, ein Kreis und ein Vieleck. Diese einfachen Formen sind der Ausgangspunkt für alle, die mit Figma designen. Wir wollten, dass dies auch in der Marke der Config zum Ausdruck kommt, wo sie zu den Bausteinen für komplexere Supergrafiken werden, bei denen sich jede Form zu einer neuen Konfiguration erweitert. Um Vielfalt an allen Berührungspunkten zu gewährleisten, haben wir in Figma eine umfassende Komponentenbibliothek dieser Supergrafiken erstellt. Mit drei Varianten pro Supergrafik konnten wir jede Form aus verschiedenen Blickwinkeln präsentieren.
Wir haben uns von der Kunst- und Designgeschichte inspirieren lassen – von den markanten Wandzeichnungen von Sol LeWitt bis hin zu den beeindruckenden Umwelt-Supergrafiken von Barbara Stauffacher Solomon – und diese Grundformen in Grafiken umgesetzt, die in einer Vielzahl von Medien und Kontexten funktionieren. Unsere Vor-Ort-Veranstaltung findet im weitläufigen Moscone Center in San Francisco statt, wo wir auf jeder Oberfläche mit den Größenverhältnissen spielen können, von der Umkleidung des Gebäudes mit Vinyl bis hin zur Abdeckung ganzer Flure.
Bei der Übertragung unserer digitalen Sprache in eine physische Erfahrung haben wir uns darauf konzentriert, Dimension, Material und Kontrast hinzuzufügen. In unserem zentralen Makers' Space setzten wir unsere Formen in physische, großformatige Gebilde um. Die Teilnehmer*innen nutzten sie als Sitzgelegenheiten, Fotokulissen und als Treffpunkt. Einige Stockwerke höher erwartete die Teilnehmer*innen beim Betreten der Veranstaltung eine hängende Installation aus 14 mehrfarbigen Kastendrachen, von denen einige bis zu 5 Meter groß waren. Wir haben diese Drachen in Zusammenarbeit mit One Hat One Hand gefertigt und aus unseren flachen Supergrafiken einen Körper gestaltet. Jede Ebene des Moscone bot einen eigenen, einzigartigen Blickwinkel auf diese schwebenden Manifestationen unserer Marke. Ein weiterer angenehmer Effekt: Diese Strukturen spiegelten auch einige unserer Animationsbewegungen wider, bei denen sich Formen in unerwartete Profile verwandeln.
Entwicklung eines systematischen Ansatzes für Bewegung
Bei der Entwicklung unserer grafischen Sprache befassten wir uns gleichzeitig mit einer Sprache der Bewegung, die auf unseren vier Kernprinzipien beruht:
- Verschieben: Rotierende Positionen und Perspektivwechsel stehen für die Kraft, die entsteht, wenn unterschiedliche Sichtweisen zusammenkommen.
- Transformieren: Sich wandelnde Formen, die für ständige Veränderung und ständige Neuerfindung stehen.
- Verstärken: Kaskadierende Muster veranschaulichen, wie unsere Tools deine Vision in jedem Maßstab umsetzen.
- Aktivieren: Benachbarte Formen, die sich gegenseitig anregen und verändern, symbolisieren die Kraft der Zusammenarbeit.
Bei einer so großen Bandbreite an Modi war ein systematischer Ansatz für Bewegung unerlässlich. Individuelle Animationen für jede Oberfläche wären viel zu unrealistisch gewesen. Stattdessen erstellten wir eine Bibliothek mit austauschbaren Teilen, mit der wir verschiedene Kompositionen in unterschiedlichen Farbpaletten erstellen konnten. Diese vielseitige Bewegungsbibliothek erlaubte es uns, Animationen in jedes Erlebnis einzubringen.
Jedes von uns erstellte Video hatte einen individuellen Klang, der von Sounds Like These kreiert wurde. Das hat für ein abwechslungsreicheres, aber dennoch einheitliches Markenerleben gesorgt.
Diese Bibliothek war eine große Hilfe bei der Zusammenarbeit mit Anbietern wie Relay, die an unserem Eröffnungsfilm für die Keynote arbeiteten – eine einminütige Sequenz, die früh am Morgen ein großes Publikum motivieren sollte. Wir begannen die Zusammenarbeit, indem wir unsere Bewegungsbibliothek teilten und ihnen ein großes Toolkit zur Verfügung stellten. Sie haben unsere Markenwerte schnell verstanden und dann weiterentwickelt, indem sie neue Motive für die Animation der einzelnen Modi hinzufügten. Im Eröffnungsfilm haben wir all diese Modi miteinander kombiniert, was zu einer Sprache führte, die mutig, ansprechend und – wenn wir das so sagen dürfen – unerwartet ist.
Wir brachten sogar Bewegung in unsere Website. Wenn Nutzer*innen mit der Maus über das Config-Logo fahren, verwandeln sich einzelnen Buchstaben jeweils in eine Grundform. Es ist ein kleines Detail, aber wir glauben, dass es das Erlebnis aufwertet.
Eine flexible Palette mit Variablen
Sobald unsere Supergrafik-Bibliothek etabliert war, widmeten wir uns der Farbe. Wir wollten eine mutige und lebendige Palette, die verschiedene Kombinationen und Variationen ermöglichte. Um die Flexibilität des Systems zu maximieren, entwickelten wir sechs verschiedene Farbpaletten, jede mit unterschiedlichen Hintergrundfarben.
Bei einem so komplexen Farbsystem waren Variablen in Figma für die effiziente Verwaltung und Anwendung von Farben unerlässlich. Durch die Definition unserer Paletten als Variablen konnten wir alle Markenelemente problemlos aktualisieren und konsistent halten. Variablen ermöglichen es uns, bestimmte Werte, wie Farben oder Abstandseinheiten, zu speichern und wiederzuverwenden, um ein einheitliches Erscheinungsbild zu schaffen und gleichzeitig unseren Workflow zu optimieren. Anstatt für jedes Element individuelle Farbkombinationen auszuwählen, konnten wir schnell zwischen den definierten Paletten wechseln.
Wir arbeiteten mit mehreren internen Teams und externen Partnern zusammen, um die Config-Marke zum Leben zu erwecken. Deswegen musste unser Designsystem leicht zu nutzen sein. Variablen stellten sicher, dass alle Teams die Farben konsistent verwenden konnten und jede Anwendung sich einzigartig vielfältig und lebendig anfühlte.
Skalierung von ausdrucksstark zu funktional
Die Config-Website war die erste Oberfläche, auf der alles an einem Punkt zusammenkam. Um unsere Marke ins Internet zu bringen, spielten wir mit kontrastierenden Maßstäben und Farbblockierungen. Während des gesamten Projekts hielten wir ein Gleichgewicht zwischen funktionalem Informationsdesign und unserer ausdrucksstarken Markensprache. Wir verwendeten Aperçu Mono, eine kleine, strukturelle Monospace-Schrift, die einen Kontrast zu unseren animierten Supergrafiken und Schaltflächen bildet. Unsere lebendige Farbpalette führte die Nutzer*innen durch die Website, wobei die einzelnen Themenbereiche und das virtuelle Erlebnis farblich gekennzeichnet waren. Wir haben die Website in drei Phasen gelauncht: eine Ankündigungs-Microsite, die Agenda-Veröffentlichung und unsere virtuelle Übertragung am Veranstaltungstag. Mit jeder Iteration brachten wir weitere Elemente der Marke zum Vorschein.
Wir haben alles in Figma entworfen, einschließlich unserer physischen Supergrafiken, 3D-Drachen und Wegweiser, um schneller und mit mehr Sichtbarkeit arbeiten zu können.
Zusammenführung aller Elemente
Genau wie beim Design eines Produkts erfordert die Gestaltung einer Konferenzerfahrung ein tiefes Verständnis der Zielgruppe, eine klare Vision und ein System, das sich den Anforderungen jedes Berührungspunkts anpassen kann. Für uns bedeutete das, die Bedürfnisse unserer Teilnehmer*innen im Blick zu behalten und ein System zu entwerfen, das von digital bis physisch, von ausdrucksstark bis funktional erweiterbar und anpassbar bleibt. Durch einer klare Designsprache – bestehend aus Grundformen, Supergrafiken, Farbpaletten und Bewegungsprinzipien – haben wir eine Grundlage geschaffen, die sich an die Möglichkeiten und Einschränkungen jeder Oberfläche anpassen lässt.
Im gesamten Projekt arbeiteten wir in einer einzigen Figma-Datei, was Sichtbarkeit und Abstimmung zwischen unseren Web-, Marketing- und Kreativteams sicherstellte. Dieser integrierte Arbeitsablauf spiegelte Config selbst wider: ein Raum, um gemeinsam den Weg von der Fantasie zur Realität zu finden.
Ein großes Dankeschön an das gesamte Team von Figma Brand Studio für seine unermüdliche Arbeit an der Marke der Config 2024. Besonderer Dank gilt den Teams von Figma Events und Web Experience für ihr Vertrauen und ihre Zusammenarbeit.
Anmerkung der Redaktion: Dieser Beitrag wurde aktualisiert und nennt jetzt 10.000 Teilnehmer*innen vor Ort.
