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
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.
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.

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.

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

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.
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.
Ein Autovermittler, der seinen Bestand aus dem Chat pflegt
Der Auftritt für einen persönlichen Fahrzeugvermittler in Prag: Bestand aus der Datenbank, zwei Sprachen für einen Markt — und ein Fahrzeug, das per Telegram-Link online geht.
Case ansehenWo 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.