Im heutigen wettbewerbsintensiven Markt versuchen Unternehmen, so viele digitale Kanäle wie möglich zu nutzen, um ihre Produkte zu bewerben. Und es scheint eine vernünftige Strategie zu sein. Aber es klappt nicht immer so. Je mehr Online-Plattformen ein Unternehmen nutzt, desto größer sind die Schwierigkeiten und die Verwirrung für seine Kunden. Zum Glück für beide Seiten ist dies durch die Einführung von Designsystemen weniger problematisch geworden.
Aber was ist mit der anderen, internen Seite des Prozesses, d. hDesignICHEntwicklung? Reicht das Designsystem aus, um alle beteiligten Kanäle optimal zu nutzen? NEIN. Der Einsatz eines Entwicklungssystems ist nur die halbe Miete, denn er birgt seine Tücken, die sich insbesondere bei der Frontend-Entwicklung bemerkbar machen können. Wie kann dieses Missverhältnis vermieden werden? Die Antwort ist Token-Design.
Was sind Projekt-Tokens?
Sie haben wahrscheinlich schon von nicht fungiblen Token (NFTs) gehört, die den digitalen Raum schnell erobern. Wir möchten Sie nicht mit den Details langweilen und sagen einfach, dass hinter allem die Tokenisierung steckt. So entstand das Konzept der Design-Token.
Was sind Projekt-Tokens? Design-Tokens sind im Wesentlichen die Grundwerte für Abstände, Auffüllungen, Farben, Animationen usw., die zum Erstellen und Verwalten eines Designsystems erforderlich sind. Sie werden anstelle von fest codierten Werten verwendet und können in jedes beliebige Format konvertiert werden – sei es eine Website, eine Web-App oder eine iOS-App. Wie funktioniert es?
Jeder Token erhält einen Namen, der sich auf eine bestimmte Designentscheidung und einen bestimmten Wert bezieht. Nehmen wir an, die Grundfarbe Ihrer Marke ist Ultimate Grey #939597 (Pantone-Farbe des Jahres 2021). Das Projekt-Token lautet dann „primary.color = #939597“, wobei „primary.color“ der Name und „#939597“ der Wert ist. Und wenn man sich ein digitales Produkt genauer anschaut, erkennt man folgendes Muster: Funktion – Schnittstelle – Komponente – Design-Token. Die Quintessenz ist, dass Design-Tokens dynamische und keine statischen Werte sind. Wenn Sie also Ihre Farbe in „Very Peri #6667AB“ ändern möchten, weil sich Trends geändert haben und Sie sie in anderen Umgebungen verwenden, können Sie dies tun, indem Sie einfach den Wert in „#6667AB“ ändern. Daher kann es überall dort, wo es verwendet wird, leicht nach dem umgekehrten Schema umgewandelt werden: Designlösung – Design-Token – Komponente – Schnittstelle – Funktion (auf allen Plattformen und Frameworks). Es sieht beeindruckend aus, aber warum von hartcodierten Werten auf Designer-Token umsteigen?
Design-Token vs. einfache Variablen
Um diese Frage zu beantworten, müssen wir zunächst den Unterschied zwischen regulären Variablen und Projekt-Tokens identifizieren. Die Farbeigenschaft in regulären Variablen sieht wie folgt aus: $gray = #939597 (bei Verwendung in einem CSS-Präprozessor wie SaaS). Während dieser Ansatz im Gegensatz zu Design-Tokens bei der Organisation von Designparametern hilft, sagt er nichts über die Verwendung von Farbe aus (primary.colour = #939597, d. h. Grau wird in Ihren Anwendungen als Primärfarbe verwendet). Dies bedeutet, dass Projektsystemvariablen im Gegensatz zu Projekttokens die Lücke zwischen Benennung und Verwendung von Projekteigenschaften nicht schließen.
Außerdem sind Projekt-Tokens plattformunabhängig, was bedeutet, dass sie hinsichtlich der Projektskalierbarkeit wesentlich flexibler sind. Anstatt die Werte in einer CSS-Datei zu speichern und in jede Anwendung oder Website zu kopieren (die normalerweise in einer separaten Datei wie JSON gespeichert werden), können Design-Tokens in jeder Codebasis gelesen werden. Auf diese Weise können Sie sie gleichzeitig auf Ihrer Website, Android- oder iOS-App verwenden.
Ester Digital bietet Dienstleistungen wieUI/UX-Design,Entwicklung des Logos,Unternehmensprojekt,Erstellen von WebsitesICHFull-Stack-Entwicklung,Neustart der Websiteund mehr darüber.Hier können Sie uns kontaktieren!
Wie sich Design-Tokens auf den Designprozess auswirken
Es dauert nicht lange, einen einzelnen Wert zu aktualisieren. Aber bei wirklich großen Projekten mit Dutzenden von Designkomponenten ist das manuelle Anpassen oder Ändern von Werten zeitaufwändig. Was ist, wenn Sie einige davon verpassen? Schließlich machen wir alle Fehler. Aus diesem Grund haben Designer-Token viele Vorteile gegenüber fest codierten Werten. Und wenn Sie immer noch Zweifel haben, schauen Sie sich an, wie Design-Tokens den Designprozess verbessern können:
▪ Sie erhöhen die Flexibilität und automatisieren den Designprozess
Typischerweise umfasst jedes Designsystem eine Reihe wiederverwendbarer Komponenten, die als flexibel angesehen werden können. Schließlich können sie modifiziert und an unterschiedliche Bedingungen angepasst werden. Mit Designer-Tokens wurde diese Flexibilität jedoch auf ein neues Niveau gehoben. Was bedeutet das? Beispielsweise müssen Sie die Sichtbarkeit auf allen Seiten Ihrer Website verbessern und den Kontrast erhöhen, ohne das Farbschema vollständig zu ändern. Wenn Sie Token entwerfen, müssen Sie lediglich deren Werte ändern. Die vorgenommenen Änderungen werden auf alle Webseiten und sogar Ressourcen (Website, Anwendung usw.) übertragen. Mit anderen Worten: Das Aktualisieren von Werten an einer Stelle wird automatisch an alle Proben weitergegeben. Diese Flexibilität erleichtert die Automatisierung, was die Vorteile von Designer-Tokens noch einmal hervorhebt.
▪ Sie beschleunigen die Datenübertragung
Da das Ändern vieler Elemente weniger Aufwand und Zeit erfordert, können Sie mit Projekt-Tokens schneller vom Projekt zur Entwicklung übergehen. Und das kann ein entscheidender Faktor sein, da viele Projekte Dringlichkeit erfordern.
▪ Sie vereinfachen den Entwicklungsprozess
Nehmen wir an, Sie müssen die Schriftgröße aktualisieren. Dazu sollten Designer Anpassungen im Design-Tool vornehmen und diese dann an Entwickler übergeben. Andererseits müssen Programmierer einen Wert im Code ändern. Dank der im System eingebetteten Token können sie bereits aktualisierte Dateien herunterladen und im Projekt verwenden. Auf diese Weise erhalten Entwickler Updates, ohne den Code ändern zu müssen.
▪ Sie sorgen für Konsistenz
Projekt-Tokens funktionieren, sodass Sie einen Wert an einer Stelle aktualisieren und die neue Änderung automatisch auf alle Projekte auf jeder Plattform angewendet wird. Dies reduziert nicht nur das Risiko versehentlicher Fehler bei manuellen Änderungen, sondern gibt Ihnen auch die volle Kontrolle über die Werte. Auf diese Weise helfen Projekttoken dabei, die Werte Ihres Projektsystems projektübergreifend zu synchronisieren. Und Sie können sie entsprechend den Anforderungen jeder Plattform formatieren.
▪ Sie bieten eine einzige Quelle der Wahrheit
Design-Tokens ermöglichen Design- und Entwicklungsteams eine einzige Quelle der Wahrheit. Es handelt sich um eine Art Ablage aller Parameter und Stiländerungen, auf die die Verantwortlichen bei Bedarf zurückgreifen können. Dadurch wird die Kommunikation zwischen den beiden Teams erheblich verbessert, was zu einem reibungsloseren Arbeitsablauf führt.
So verwalten Sie Projekttokens
Sobald Sie die Vor- und Nachteile von Designer-Token verstanden haben, ist es an der Zeit zu erkunden, wie Sie diese Token wirklich zu Ihrem Vorteil nutzen können.
▪ Entscheiden Sie, ob Design-Tokens das Richtige für Sie sind
Obwohl Designer-Token viele Vorteile haben und im Design- und Entwicklungsprozess unverzichtbar zu sein scheinen, ist es wichtig zu entscheiden, ob Sie sie wirklich benötigen. In einigen Fällen kann ihre Anwendung eher zu Unverhältnismäßigkeit als zu Konsistenz führen. Wann lohnt sich der Einsatz von Designer-Tokens?
–wenn Ihre Website bzwAnwendungsdesignSie möchten mit einem Designsystem schnell und effizient aktualisieren;
– wenn Ihr System mehr als ein Produkt oder eine Webplattform und -anwendung umfasst;
– wenn Sie zukünftige Updates vereinfachen möchten.
Token sind möglicherweise weniger nützlich:
– wenn Sie kein Designsystem haben;
– wenn Ihr Design- und Entwicklungsteam hartcodierte Werte verwendet und sich das so schnell nicht ändern wird.
Wenn Sie all diese Fragen im Voraus bedenken, können Sie die Probleme vermeiden, die bei einer spontanen Entscheidung entstehen würden.
▪ Erstellen Sie eine Liste der Schnittstellen
Wenn Sie sich für die Verwendung von Design-Tokens entscheiden, müssen Sie Ihr Produkt zunächst in einzelne Komponenten (Farbe, Typografie usw.) zerlegen und kategorisieren. Auf diese Weise können Sie jedes Element Ihres Designs sehen, das dann einfach angepasst werden kann.
▪ Definieren Sie Kriterien für die Erstellung von Designer-Tokens
Konsistenz kann nur durch die Festlegung klarer Kriterien zur Bestimmung stilistischer Parameter erreicht werden. Wenn ein Parameter beispielsweise nur an einer Stelle verwendet wird, macht es keinen Sinn, ein Token zu erstellen. Schließlich besteht der Zweck der Tokenisierung darin, viele Parameter von einem Ort aus steuern zu können.
▪ Benennungskonventionen definieren
Effektive Token-Namen helfen dem Team, den visuellen Stil des Projekts besser zu verstehen. Daher ist es wichtig, klare Namenskonventionen festzulegen und zu wissen, wie man sie im Kontext richtig verwendet.
Mit dem Category/Type/Element (CTI)-Ansatz (einer Namenskonvention) können Sie die Verwendung von Design-Tokens vereinfachen und Designentscheidungen klarer und präziser umsetzen. Um diese Methode verwenden zu können, müssen Sie jedoch wissen, dass sie zwei Arten von Token verwendet: globale Token, die alle Anwendungsfälle eines bestimmten Stilparameters abdecken, und Alias-Token, die spezifischere Anwendungsfälle der Parameter abdecken.
Beispiel: Primary.color = #939597 ist ein globales Token, das alle Verwendungen dieses Parameters abdeckt. Ändern Sie den Wert in #6667AB und er wird überall dort angewendet, wo die Primärfarbe erscheint, einschließlich Symbolen, Schaltflächen oder Textüberschriften. Wenn Sie bestimmte Elemente ändern möchten, müssen Sie das Alias-Token aktivieren, das wie folgt aussehen würde: background.icon.primary.color = #6667AB, wobei primäre.farbe die Kategorie, Hintergrund der Typ und Symbol das ist Elementtyp. Die Unterscheidung zwischen globalen Token und Aliasnamen trägt dazu bei, eine ordnungsgemäße Zustellung sicherzustellen.
▪ Respektieren Sie das JSON-Format
JSON kann eine effiziente Methode zum Kodieren von Werten sein und die Anpassung von Entwurfsparametern für verschiedene Präprozessoren, einschließlich SaaS, erleichtern. Das Format wird hauptsächlich für den Datenaustausch zwischen einer Webanwendung und einem Server verwendet. Daher ist ein Token in einer JSON-Datei eine praktikable Lösung für diejenigen, die eine schnelle, aber qualifizierte Datenübertragung benötigen.
▪ Wählen Sie eine verantwortliche Person
Was passiert, wenn sich das Team nicht auf eine Namenskonvention einigen kann oder einfach nicht weiß, was für sein gesamtes Designsystem angemessen ist? Das ist hier sehr wichtigFinden Sie die richtige AgenturOder benennen Sie eine verantwortliche Person in Ihrem Unternehmen, die alle Vorschläge bewertet und entscheidet, ob sie geeignet sind, und die Token in allen Phasen des Prozesses verwaltet. Natürlich können Teams gemeinsam Entscheidungen treffen, aber letztendlich brauchen wir alle eine Außenperspektive, um rationale Entscheidungen zu treffen.
▪ Verfügbarkeit sicherstellen
Ohne Zweifel sollte das Theme für alle Benutzer verfügbar sein. Dies gilt auch für zugehörige Projekt-Tokens. Daher sollten Sie sie auf Barrierefreiheit testen und Ihr Designsystem regelmäßig überprüfen. Auf diese Weise entsprechen sowohl das System als auch die Designer-Token den neuesten Standards.
Beispiele für Token-Systeme
Die Erstellung eines tokenisierten Designsystems ist keine leichte Aufgabe. Es gibt jedoch einige Beispiele, die Sie und Ihre Teams dazu ermutigen werden, sich für die Tokenisierung zu entscheiden.
Salesforce-Lightning-Design-System
Salesforce war eines der ersten Unternehmen, das Designer-Tokens in seinem Lightning-Designsystem verwendete. Hier werden Token als Atome visueller Gestaltung gesehen. Mit anderen Worten, es handelt sich um Einheiten, die visuelle Designattribute enthalten. Salesforce verwendet Token anstelle von hartcodierten Werten, um die Skalierbarkeit und Konsistenz des Designsystems sicherzustellen.
Spektrum
Eines der besten Beispiele für ein Designsystem ist das Spectrum-System von Adobe. Es stellt die notwendigen Komponenten und Tools bereit, die Teams dabei helfen, effizienter und kohärenter an einem Projekt zu arbeiten. Bei Adobe werden Design-Tokens als visuelle Daten dargestellt, die ein ganzheitliches Produkterlebnis bieten.
Amerikanisches Webdesign-System
Schließlich hat auch die US-Regierung die Macht der Tokenisierung erkannt. Es verwendet Designer-Tokens in seinem US-amerikanischen Webdesign-System, um die Designeffizienz zu steigern. Auf diese Weise ermöglichen Designer-Tokens der US-Regierung, Prozesskonsistenz auf allen von ihr verwalteten Plattformen zu erreichen.
Zu guter Letzt
Obwohl es Projekt-Tokens erst seit ein paar Jahren gibt, haben sie bereits einen wichtigen Platz in Projektsystemen eingenommen, da Technologieführer sie aktiv nutzen.Design-Tokens sind leistungsstarke Tools, die nicht nur den Design- und Entwicklungsprozess erleichtern, sondern auch die Teamkommunikation auf eine ganz neue Ebene heben und es Ihnen ermöglichen, ein unvergessliches Produkt zu schaffen, das den Moment festhalten wirdWebdesign-Trendsist gleichwertig.Darüber hinaus erhöhen Design-Tokens die Skalierbarkeit und Flexibilität des Designsystems, sodass Änderungen vorgenommen werden können, ohne vorherige Fortschritte zu zerstören.
Wenn Sie immer noch Zweifel an den Vorteilen des Token-Designs haben oder nicht wissen, wo Sie anfangen sollen, wenden Sie sich bitte an unser TeamWebdesign-Agentur. Wir können Ihnen die benötigten Informationen geben und Ihnen bei der Lösung des Problems helfen.