Auf dem heutigen wettbewerbsintensiven Markt versuchen die Unternehmen, so viele digitale Kanäle wie möglich zu nutzen, um ihre Produkte zu bewerben. Und das scheint eine vernünftige Strategie zu sein. Aber das funktioniert nicht immer so. Je mehr Webplattformen ein Unternehmen nutzt, desto mehr Schwierigkeiten und Verwirrung gibt es für seine Kunden. Zum Glück für beide Seiten wurde diese Frage mit dem Aufkommen des Design-Systems weniger problematisch.
Aber was ist mit der anderen, internen Seite des Prozesses, nämlich Design und Entwicklung? Reicht das Design-System aus, um alle beteiligten Kanäle voll auszuschöpfen? Nein. Der Einsatz eines Design-Systems ist nur die halbe Miete, denn es hat seine Tücken, die sich besonders bei der Frontend-Entwicklung bemerkbar machen können. Wie kann man dieser Diskrepanz entgehen? Die Antwort lautet: Design Tokens.
Was sind Design Tokens?
Wahrscheinlich haben Sie schon von den Non-Fungible Tokens (NFT) gehört, die den digitalen Raum schnell erobern. Wir wollen Sie nicht mit den Details langweilen und sagen einfach, dass die Tokenisierung hinter allem steckt. Damit war das Konzept des Design Tokens geboren.
Was sind also Design Tokens? Im Wesentlichen handelt es sich bei Design Tokens um Basiswerte für Abstände, Abrundungen, Farben, Animationen usw., die für das Erstellen und Pflegen eines Design-Systems benötigt werden. Sie werden anstelle von hartkodierten Werten verwendet und können in jedes beliebige Format konvertiert werden – sei es eine Website, eine Webanwendung oder eine iOS-App. Wie funktioniert das?
Jedes Token erhält einen Namen, der sich auf eine bestimmte Designentscheidung und den gewissen Wert bezieht. Angenommen, die Grundfarbe Ihrer Marke ist Ultimate Gray #939597 (Die Pantone Farbe des Jahres 2021). Das Design Token lautet dann primary.color = #939597, wobei „primary.color“ für den Namen und „#939597“ für den Wert steht. Und wenn man sich das digitale Produkt genauer ansieht, kann man das folgende Muster erkennen: Funktion – Schnittstelle – Komponente – Design Token. Das Wichtigste dabei ist, dass es sich bei den Design Tokens um dynamische und nicht um statische Werte handelt. Wenn Sie also Ihre Farbe in Very Peri #6667AB ändern möchten, da sich die Trends geändert haben, und sie in verschiedenen Umgebungen einsetzen möchten, können Sie das tun, indem Sie einfach den Wert in #6667AB ändern. Daher lässt sie sich überall, wo sie verwendet wird, leicht umwandeln, und zwar nach dem umgekehrten Schema: Designlösung – Design Token – Komponente – Schnittstelle – Funktion (auf allen Plattformen und Frameworks). Sieht beeindruckend aus, warum sollte man aber von hartkodierten Werten zu Design Tokens wechseln?
Design Tokens vs. Reguläre Variablen
Um diese Frage zu beantworten, muss man zunächst den Unterschied zwischen den regulären Variablen und einem Design Token feststellen. Die Farbeigenschaft in den regulären Variablen wird wie $gray = #939597 aussehen (bei Verwendung in einem CSS-Präprozessor wie SaaS). Dieser Ansatz hilft Ihnen zwar, Ihre Designparameter zu strukturieren, sagt aber im Gegensatz zum Design Token nichts über die Verwendung der Farbe aus (primary.colour = #939597, d. h. Grau wird als Primärfarbe für Ihre Anwendungen verwendet). Das bedeutet, dass Variablen des Design-Systems die Lücke zwischen der Benennung und der Verwendung von Designeigenschaften nicht schließen, während Design Tokens das tun.
Darüber hinaus sind Design Tokens plattformunabhängig, was bedeutet, dass sie viel flexibler sind, wenn es um die Skalierbarkeit des Designs geht. Anstatt den Wert in einer CSS-Datei zu speichern und ihn in jede Anwendung oder Website (die normalerweise in einer separaten Datei wie JSON aufbewahrt wird) zu kopieren, können Design Tokens in jede Codebasis eingelesen werden. Auf diese Weise können sie gleichzeitig auf Ihrer Website, in Ihrer Android- oder iOS-App verwenden werden.
Ester Digital bietet Dienstleistungen wie UI/UX Design, Logo-Entwicklung, Corporate Design, Webentwicklung & Full Stack Development, Website Relaunch und mehr an. Sie können uns hier kontaktieren!
Wie Design Tokens den Designprozess beeinflussen
Die Aktualisierung eines einzelnen Wertes erfordert nicht viel Zeit. Aber bei wirklich umfangreichen Projekten mit Dutzenden von Designkomponenten ist es sehr zeitaufwändig, Werte manuell anzupassen oder zu ändern. Und was ist, wenn Sie versehentlich einige von ihnen übersehen? Schließlich machen wir alle Fehler. Aus diesem Grund haben Design Tokens eine Reihe von Vorteilen gegenüber hartkodierten 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
In der Regel enthält jedes Design-System eine Reihe von wiederverwendbaren Elementen, die als flexibel angesehen werden können. Schließlich können sie verändert und an unterschiedliche Bedingungen angepasst werden. Mit den Design Tokens wird diese Flexibilität jedoch auf eine neue Ebene gehoben. Was bedeutet das? Zum Beispiel müssen Sie die Sichtbarkeit auf allen Seiten Ihrer Website verbessern und den Kontrast erhöhen, ohne das Farbschema komplett zu ändern. Wenn es um Design Tokens geht, müssen Sie nur deren Werte ändern. Und die vorgenommenen Änderungen werden auf eine ganze Reihe von Webseiten und sogar Assets (Website, App usw.) ausgeweitet. Mit anderen Worten: Die Aktualisierung von Werten an einer Stelle wird automatisch auf alle Muster übertragen. Diese Flexibilität erleichtert die Automatisierung, was einmal mehr die Vorzüge von Design Tokens unterstreicht.
▪ Sie beschleunigen die Datenübertragung
Da es weniger Aufwand und Zeit kostet, zahlreiche Elemente zu ändern, können Sie mit Design Tokens schneller von der Entwurfs- zur Entwicklungsphase übergehen. Und das kann ein entscheidender Faktor sein, da viele Projekte Dringlichkeit erfordern.
▪ Sie vereinfachen den Entwicklungsprozess
Nehmen wir an, eine Schriftgröße muss aktualisiert werden. Dazu sollten die Designer eine Anpassung im Design-Tool vornehmen und diese dann an die Entwickler weitergeben. Die Entwickler wiederum müssen den Wert im Code ändern. Mit in das System integrierten Tokens können sie bereits aktualisierte Dateien abrufen und im Projekt verwenden. So erhalten die Entwickler Updates, ohne den Code ändern zu müssen.
▪ Sie sorgen für Konsistenz
Design Tokens funktionieren so, dass man den Wert an einer Stelle aktualisiert und die neue Änderung automatisch auf alle Projekte auf jeder Plattform angewendet wird. Dadurch wird nicht nur das Risiko versehentlicher Fehler bei manuellen Änderungen minimiert, sondern auch die volle Kontrolle über die Werte gewährleistet. Auf diese Weise helfen Design Tokens, die Werte Ihres Design-Systems projektübergreifend zu synchronisieren. Und Sie können sie je nach den Anforderungen der jeweiligen Plattform formatieren.
▪ Sie bieten eine einzige Quelle der Wahrheit
Design Tokens ermöglichen es Design- und Entwicklungsteams, eine einzige Quelle der Wahrheit zu haben. Es handelt sich um eine Art Aufbewahrungsort für alle Stilparameter und Änderungen, auf den 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.
Wie man die Design Tokens verwaltet
Sobald Sie die Vor- und Nachteile von Design Tokens kennen, ist es an der Zeit zu erforschen, wie Sie diese Tokens einsetzen können, damit sie wirklich zu Ihrem Vorteil wirken.
▪ Entscheiden Sie, ob Design Token das Richtige für Sie sind
Obwohl Design Tokens viele Vorteile haben und für Design- und Entwicklungsprozesse notwendig zu sein scheinen, ist es wichtig zu entscheiden, ob man sie wirklich braucht. In einigen Fällen kann ihre Verwendung eher zu Unverhältnismäßigkeit als zu Kohärenz führen. Wann sollten Sie also Design Tokens verwenden?
– wenn Sie Ihr Website- oder App Design schnell und effizient mit einem Designsystem aktualisieren möchten;
– wenn Ihr System mehr als ein Produkt oder eine Webplattform und -anwendung umfasst;
– wenn Sie zukünftige Aktualisierungen rationalisieren möchten.
Tokens können weniger hilfreich sein:
– wenn Sie kein Design-System haben;
– wenn Ihr Design- und Entwicklungsteam hartkodierte Werte verwendet, und das wird sich auch in nächster Zeit nicht ändern.
Wenn Sie alle diese Fragen im Voraus bedenken, können Sie die Probleme vermeiden, die sich aus einer spontanen Entscheidung ergeben würden.
▪ Führen Sie eine Schnittstelleninventur durch
Wenn Sie sich für die Verwendung von Design Tokens entscheiden, müssen Sie Ihr Produkt zunächst in einzelne Komponenten (Farbe, Typografie usw.) aufteilen und sie kategorisieren. Auf diese Weise können Sie jedes Atom Ihres Designs sehen, der dann leicht optimiert werden kann.
▪ Definieren Sie die Kriterien für die Erstellung von Design Tokens
Nur durch die Festlegung klarer Kriterien für die Tokenisierung von Stilparametern lässt sich Konsistenz erreichen. Wenn ein Parameter zum Beispiel nur an einer Stelle verwendet wird, ist es sinnlos, ein Token zu erstellen. Schließlich besteht der Zweck der Tokenisierung darin, mehrere Parameter von einer einzigen Stelle aus kontrollieren zu können.
▪ Legen Sie die Namenskonventionen fest
Wirksame 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 anwendet.
Mit dem Kategorie/Typ/Element (CTI)-Ansatz (Namenskonventionen) können Sie die Verwendung von Design Tokens vereinfachen und Designentscheidungen klarer und präziser umsetzen. Um diese Methode zu verwenden, sollten Sie jedoch wissen, dass sie zwei Arten von Tokens verwendet: globale Tokens, die alle Verwendungsfälle eines bestimmten Stilparameters abdecken, und Alias-Tokens, die spezifischere Verwendungsfälle von Parametern abdecken.
Beispiel: primary.color = #939597 ist ein globales Token, das alle Fälle abdeckt, wenn dieser Parameter verwendet wird. Ändern Sie den Wert in #6667AB und er gilt für alle Stellen, an denen diese Primärfarbe erscheint, einschließlich Symbole, Schaltflächen oder Textüberschriften. Wenn Sie bestimmte Elemente ändern möchten, müssen Sie ein Alias-Token aktivieren, das folgendermaßen aussehen würde: background.icon.primary.color = #6667AB, wobei primary.color die Kategorie, background der Typ und icon ein Element ist. Die Unterscheidung zwischen globalen und Alias-Tokens trägt zu einer reaktionsschnellen Bereitstellung bei.
▪ Halten Sie das JSON-Format ein
JSON kann ein effektives Mittel zur Codierung von Werten sein, das die Anpassung von Designparametern für eine Vielzahl von Präprozessoren, einschließlich SaaS, erleichtert. Das Format wird hauptsächlich für den Datenaustausch zwischen einer Webanwendung und einem Server verwendet, so dass ein Token in einer JSON-Datei eine sinnvolle Lösung für diejenigen ist, die eine schnelle und dennoch qualifizierte Datenübertragung benötigen.
▪ Wählen Sie einen Verantwortlichen aus
Was ist, wenn sich das Team nicht auf Namenskonventionen einigen kann oder einfach nicht weiß, was für sein Design-System insgesamt angemessen ist? Hier ist es sehr wichtig, die richtige Agentur zu finden oder eine verantwortliche Person in Ihrem Unternehmen zu benennen, die alle Vorschläge bewertet und entscheidet, ob sie angemessen sind sowie die Tokens in allen Phasen des Prozesses verwaltet. Natürlich können Teams gemeinsam Entscheidungen treffen, aber letztendlich brauchen wir alle die Perspektive eines Außenstehenden, um rationale Entscheidungen zu treffen.
▪ Sorgen Sie für die Zugänglichkeit
Zweifellos sollte das Design allen Nutzern zur Verfügung stehen. Das gilt auch für die dazugehörigen Design Tokens. Deshalb müssen Sie sie auf die Zugänglichkeit testen sowie Ihr Design-System regelmäßig überprüfen. Auf diese Weise werden sowohl das System als auch die Design Tokens den neuesten Standards entsprechen.
Beispiele für Token-Systeme
Die Schaffung eines tokenisierten Design-Systems ist keine leichte Aufgabe. Es gibt jedoch einige Beispiele, die Sie und Ihre Teams ermutigen, sich für die Tokenisierung zu entscheiden.
Salesforce-Lightning-Design-System
Salesforce war eines der ersten Unternehmen, das Design Tokens in seinem Lightning-Design-System verwendet hat. Hier werden die Tokens als visuelle Design-Atome betrachtet. Mit anderen Worten, es handelt sich um Entitäten, die visuelle Design-Attribute speichern. Salesforce verwendet Tokens anstelle von hartkodierten Werten, um Skalierbarkeit und Konsistenz des Design-Systems zu gewährleisten.
Spectrum
Eines der besten Beispiele für ein Design-System ist das Spectrum-System von Adobe. Es bietet notwendige Komponenten und Tools, mit denen Teams effektiver und kohärenter an einem Projekt arbeiten können. Bei Adobe werden die Design Tokens in Form von visuellen Daten präsentiert, die ein ganzheitliches Produkterlebnis bieten.
US-Webdesign-System
Schließlich hat auch die Regierung von Vereinigten Staaten die Leistungsfähigkeit der Tokenisierung erkannt. Sie verwendet Design Tokens in ihrem US-Webdesign-System, um die Effizienz des Designs zu maximieren. Auf diese Weise ermöglichen Design Tokens der Regierung von Vereinigten Staaten, eine Prozesskonsistenz für alle von ihr verwalteten Plattformen zu erreichen.
Zum Schluss
Obwohl es Design Tokens erst seit ein paar Jahren gibt, haben sie bereits einen wichtigen Platz in Design-Systemen eingenommen, seit Technologieführer sie aktiv nutzen. Design Tokens sind leistungsstarke Werkzeuge, die nicht nur den Design- und Entwicklungsprozess erleichtern, sondern auch die Kommunikation im Team auf eine ganz andere Ebene heben und es Ihnen ermöglichen, ein einprägsames Produkt zu schaffen, das den aktuellen Webdesign Trends entspricht. Darüber hinaus sorgen Design Tokens für die Skalierbarkeit und Flexibilität Ihres Design-Systems und ermöglichen es Ihnen, Änderungen vorzunehmen, ohne den bisherigen Fortschritt zu zerstören.
Wenn Sie immer noch Zweifel an den Vorteilen von Design Tokens haben oder nicht wissen, wo Sie anfangen sollen, kontaktieren Sie das Team unserer Webdesign-Agentur. Wir können Ihnen die benötigten Informationen geben und Ihnen bei der Lösung von Problemen helfen.
Copied!
