Alle Referenzen
TrendArena

Eine App, in der das Tempo der Oberfläche die Zahl ist

Eine Telegram-Mini-App, in der ein Token schneller verbrennt, je mehr im Netz über ihn geredet wird — und in der diese Rate nirgends als Zahl steht, sondern als Farbe und Takt einer Kugel.

  • UX-Design
  • Design-System
  • Frontend-Entwicklung
  • Motion Design
  • Barrierefreiheit
Rolle
Produkt- und Designleitung: DeNitro (damals als NEXA)
Umfang
4 Bereiche, Telegram Mini App
Zugang
Öffentliche Vorschau gegen gemocktes Backend
[01] Ausgangslage

TrendArena ist eine Telegram-Mini-App mit einer ungewöhnlichen Mechanik: Wie schnell die Menge eines Tokens verbrennt, hängt davon ab, wie viel im Netz gerade über ihn geredet wird. Die Rate wird auf dem Server gerechnet und kommt nie als Zahl an, auf die ein Halter reagieren könnte.

Damit war die Designfrage nicht, wie man diese Zahl anzeigt, sondern eine härtere: Hat ein Leser, der die Mechanik vollständig verstanden hat, überhaupt einen Zug zu machen? Die erste Version beantwortete das mit Nein — sie wurde nicht nachgebessert, sondern komplett verworfen.

Dazu die Form: eine Mini-App läuft im Chat, auf einem Telefon, in einer Webansicht. Es gibt keine Einführungsstrecke, keine zweite Spalte und keinen Platz für Erklärtexte. Jeder Bildschirm beantwortet genau eine Frage, oder er beantwortet keine.

[02] Ansatz

Die Rate wird kein Etikett, sondern das Objekt: Die Farbe ist das Band, der Takt ist die Geschwindigkeit. Ein kaltes Token atmet alle 6,5 Sekunden, ein extremes alle 2 — die Temperatur ist gelesen, bevor irgendeine Zahl gelesen wurde. Vier Bänder, vier Multiplikatoren, und „Cold“ ist ein Boden und keine Mulde: Ein sehr kaltes Token hätte auch Menge erzeugen können, das wurde ausdrücklich verworfen.

Für alles außerhalb dieses Moduls gilt das Gegenteil: schwarze Fläche, genau vier Flächenwerte, keine Rahmen, keine Trenner, keine Schatten, keine Verläufe. Hierarchie kommt aus Typografie und Abstand — wer zur Linie greift, hat zu wenig Raum benutzt. Pro Bildschirm gibt es genau ein dominantes Objekt und genau eine helle Aktion.

Die Regel, die am meisten gekostet hat, heißt „sag es einmal“. Ein früher Stand las sich als Bildschirm gut und als flache Textliste katastrophal: derselbe Countdown fünfmal, dieselbe Verbrennungszahl dreimal, die Erwähnungszahl in zwei verschiedenen Formaten — ein Leser sah zwei Werte für eine Größe und musste raten, welcher gilt. Zwei ganze Abschnitte wurden gelöscht. Seitdem wird jeder Bildschirm vor dem Ausliefern als Textauszug gelesen: Dopplung ist im Entwurf unsichtbar und im Textauszug offensichtlich.

Die Chart-Grammatik wurde ausdiskutiert statt vorbelegt: Erwähnungen sind gezählte, diskrete Größen und gehören in Balken, die bei null beginnen; ein Preis ist kontinuierlich und gehört auf eine Linie. Aus demselben Grund wurde die Chart-Bibliothek ersetzt und nicht umgestylt — jeder ihrer Defekte saß an einer tragenden Stelle, und ein selbst gezeichnetes SVG ist rund 200 Zeilen mit voller Kontrolle. Eine Bibliothek nimmt man für ihr Verhalten, nicht für ihr Bild.

Und aus zwei Reglern wurde einer: Kerzenintervall und sichtbarer Zeitraum standen nebeneinander, mit einer Tabelle unverträglicher Kombinationen dazwischen. Heute leitet der Zeitraum das Intervall ab — und steuert zugleich die Statistikperiode und die Veränderung in der Kopfzeile. Ein Regler, ein Zeitraum, eine Erklärung weniger.

Drei Bildschirme der TrendArena-App nebeneinander: die nach Erwähnungen sortierte Liste, die Token-Seite mit glühender Kugel, und dieselbe Seite mit dem Hitze-Diagramm.
Links die Arena, nach Erwähnungen sortiert: jede Zeile trägt ihr Band, ihren Countdown bis zum nächsten Abbau und den Marktwert. In der Mitte, wozu das führt — die Kugel steht auf „Extreme“, Burn ×10, −7.320 in 03:55. Rechts derselbe Zeitstrahl als Hitze gelesen: Balken ab null, mit den Bandgrenzen darüber.
[03] Umsetzung

Vier Bereiche tragen die App. Das Portfolio zeigt Bestand, Verlauf und Barbestand mit sechs Zeiträumen. Die „Burn Arena“ ist nach Erwähnungen sortiert und nach Band filterbar; jede Zeile trägt ihr Band, ihren Countdown bis zum nächsten Abbau, Kurs und Marktwert. Die Token-Seite ist die Tiefe. Der Tausch ist die Handlung.

Das thermische Modul ist die sanktionierte Ausnahme vom Regelwerk und der einzige Ort mit Verlauf, Farbton und Dauerbewegung. Die Kugel besteht aus acht übereinanderliegenden Schichten, deren Perioden — 28, 22, 11 und 9 Sekunden plus der Herzschlag des Bandes — kein gemeinsames Vielfaches haben: Die Oberfläche wiederholt sich sichtbar nie. Sie wird einmal in voller Größe gezeichnet und heruntergeskaliert, ihr Inhalt gegenskaliert, damit die Schrift beim Zusammenklappen ihre physische Größe behält.

Der obere Bildschirmrand glimmt in der Intensität der aktuellen Rate — und unterhalb von 0,1 wird er gar nicht erst gezeichnet. Das ist dieselbe Haltung wie an drei anderen Stellen: Fehlt der Einstandskurs, entfällt der Halbsatz, statt „NaN“ zu drucken; fehlt der Halteranteil, steht ein Gedankenstrich. Eine leere Stelle ist eine Information, eine kaputte ist eine Fehlersuche für den Leser.

Derselbe Zeitstrahl ist dreimal lesbar: als Preis, als Hitze und als Verbrennung. Darunter liegen Menge, Kennzahlen und ein Handelsband, in dem eine Verbrennung eine Zeile wie jede andere ist — sie steht zwischen Käufen und Verkäufen, weil sie im Bestand genau das ist.

Gesten mussten geschlichtet werden, weil sich hier drei überlagern: Die Seite scrollt senkrecht, der Chart schwenkt waagerecht, das Panel darum lässt sich zum Umsortieren ziehen. Nichts übernimmt eine Geste, bevor der Finger acht Pixel gelaufen ist und die Richtung eindeutig ist; das äußere Ziehen bekommt einen eigenen Griff und sonst nichts, die innere Fläche behält das senkrechte Scrollen. So gibt es keinen umkämpften Bereich.

Bedienbarkeit ist im selben Dokument festgeschrieben wie die Optik: 44 Pixel Mindestfläche für jeden Tipp, ein Label an jeder Icon-Schaltfläche, Zustände über aria-pressed und aria-expanded, Messwerte als „meter“ mit Minimum und Maximum. Richtung wird nie allein über Farbe getragen — ein Vorzeichen steht immer da. Und ein verborgener Zustand verlässt den Zugänglichkeitsbaum wirklich, statt nur durchsichtig zu werden: Sonst liest ein Screenreader die eingeklappte und die ausgeklappte Fassung nacheinander vor.

Drei weitere Bildschirme: verbrannte Menge mit Kennzahlen, das Handelsband mit Käufen, Verkäufen und Verbrennungen, und der Tausch mit eingesetztem Betrag.
Links, was von der Menge übrig ist: 14,07 % verbrannt, dazu Marktwert, Rang und Halter. In der Mitte das Handelsband — „burning“ steht dort als eigene Zeile zwischen Käufen und Verkäufen, weil es im Bestand genau das ist. Rechts der Tausch mit gesetztem Betrag, Kurs und Gebühr; erst damit wird aus „Betrag eingeben“ eine Aktion.
Einblicke

Weitere Bildschirme

Aufnahmen der ausgelieferten Oberfläche — TrendArena, drei Bildschirme je Bild.

Portfolio mit Bestand und Verlauf, die Token-Seite von oben mit Preis und vier Zeiträumen, und der leere Tausch-Bildschirm.
Und die ruhigen Bildschirme derselben App: links Bestand, Verlauf und Barbestand; in der Mitte der Kopf der Token-Seite mit vier Zeiträumen und dem Preisverlauf als Linie; rechts der Tausch im Ausgangszustand, dessen Aktion sichtbar gesperrt bleibt, solange kein Betrag dasteht.
Leistungsumfang

Was entstanden ist

Alles, was in TrendArena steckt — konzipiert, gestaltet und gebaut von DeNitro.

  • Vier Bereiche: Portfolio, Burn Arena, Token-Seite, Tausch
  • Gestaltungsgesetz als Dokument: sieben Regeln, Farb-, Typo-, Raum-, Radius- und Bewegungs-Token
  • Thermisches Modul: vier Bänder mit eigener Palette, Herzschlag und Randglühen
  • Kugel aus acht Schichten mit teilerfremden Perioden, einmal gezeichnet und skaliert
  • Ranking nach Erwähnungen mit Bandfiltern und Countdown je Zeile
  • Drei Lesarten eines Zeitstrahls: Preis, Hitze, Verbrennung
  • Selbst gezeichnete SVG-Charts statt Bibliothek
  • Ein Zeitraum-Regler, der Intervall, Statistikperiode und Kopfzeilen-Delta steuert
  • Handelsband mit Verbrennungen als eigener Zeilentyp
  • Tausch mit Kursvorschau, Gebührenausweis und gesperrter Aktion ohne Betrag
  • Gestenschlichtung zwischen Seiten-Scroll, Chart-Schwenk und Panel-Ziehen
  • Zugänglichkeitsregeln: Labels, Zustände, „meter“-Rollen, Vorzeichen statt Farbe
  • Zentrale Zahlenformate inkl. laufbreitenfester Countdowns
  • Entscheidungsprotokoll: was verworfen wurde und warum

Was das ausmacht

Sechs Punkte, an denen sich die Arbeit im Interface ablesen lässt. Zahlen zu Anfragen, Umsatz oder Rankings stehen hier bewusst nicht — Geschäftszahlen unserer Kunden veröffentlichen wir nicht.

Die Rate ist das Objekt

Farbe ist das Band, der Takt die Geschwindigkeit — 6,5 Sekunden bei kalt, 2 bei extrem. Die Temperatur ist gelesen, bevor eine Zahl gelesen ist.

Jede Zahl steht genau einmal

Ein früher Stand zeigte denselben Countdown fünfmal und eine Größe in zwei Formaten. Seitdem wird jeder Bildschirm vor dem Ausliefern als Textauszug gegengelesen.

Ein Regler statt zweier

Zeitraum und Kerzenintervall hatten eine Unverträglichkeitstabelle zwischen sich. Heute leitet der Zeitraum alles Weitere ab — samt Statistikperiode und Kopfzeilen-Delta.

Ehrliche Abwesenheit

Ohne Einstandskurs entfällt der Halbsatz, ohne Halteranteil steht ein Gedankenstrich, und unter 0,1 Intensität wird das Randglühen gar nicht gezeichnet — statt „NaN“ oder eines leeren Klammerpaars.

Keine umkämpfte Fläche

Seiten-Scroll, Chart-Schwenk und Panel-Ziehen liegen übereinander und stören sich trotzdem nicht: Acht Pixel und eine eindeutige Richtung entscheiden, wer die Geste bekommt.

Bedienbar, nicht nur sichtbar

44 Pixel Mindestfläche, Label an jeder Icon-Schaltfläche, Vorzeichen statt Farbe für die Richtung — und ein verborgener Zustand verlässt den Zugänglichkeitsbaum, statt doppelt vorgelesen zu werden.

Technik

Der Stack hinter TrendArena — und die Entscheidungen, die uns wichtig genug waren, sie festzuhalten.

  • Telegram Mini App: Die öffentliche Vorschau ersetzt das Telegram-SDK durch eine Attrappe und beantwortet jede Anfrage aus hinterlegten Daten — sie öffnet sich im normalen Browser und erreicht nichts Echtes.
  • Gestaltungsgesetz und Code liegen aneinander: Farb-, Typo-, Raum-, Radius- und Bewegungs-Token in einer Datei, das Komponenten-Vokabular in der nächsten, Zahlen- und Zeitformate in der dritten. Kein Bildschirm darf eine Farbe, Größe, Dauer oder Formatierung einführen, die dort nicht steht.
  • Vier Bänder mit je eigener Palette statt eines Akzents — die Kugel ist aus gestapelten Verläufen gebaut, und jede Schicht braucht ihre eigenen Farbstopps.
  • Herzschlag je Band: 6,5 s (Cold), 5,0 s (Medium), 3,2 s (Hot), 2,0 s (Extreme); das Randglühen läuft in derselben Ordnung und bleibt unter 0,1 ungezeichnet.
  • Die Kugel isoliert ihre Mischmodi (`isolation: isolate`), damit die acht Schichten die Seite hinter ihnen nicht einfärben.
  • Weichzeichnen bleibt unter 20 Pixeln — darüber bricht die Bildrate in Safari ein.
  • Ein Wechsel ist ein durchgehender Wert, kein Tausch zweier Zustände: Ein Tipp mitten in der Bewegung kehrt von dort um, wo die Animation gerade steht.
  • Die Bandgrenzen werden einmal pro Nacht aus den Zahlen des Vortags neu gerechnet und dann für den ganzen Tag gehalten — sonst wandert die Linie unter dem Leser weg, während er sie beobachtet.
  • Charts sind handgezeichnetes SVG; die vorherige Bibliothek wurde ersetzt, weil jeder ihrer Bilddefekte an einer tragenden Stelle saß.
  • Zahlenformate zentral: kompakte Großwerte, exakte Beträge bis 100.000, immer sichtbares Vorzeichen und laufbreitenfeste Countdowns, damit eine tickende Zeile nicht zittert.

Wo verliert dein digitales Wachstum gerade Potenzial?

In 30 Minuten schauen wir uns an, wo Kunden dich heute finden, wo Potenzial verloren geht und welcher Hebel zuerst sinnvoll ist: Website, SEO & GEO, Conversion oder Automatisierung. Danach hast du einen klaren nächsten Schritt — auch wenn wir ihn nicht gemeinsam umsetzen.