Ivory: Verspielte Präzision aus Tapbots' 15-jähriger Handwerkstradition

„Wir wollten den Mastodon-Client bauen, den wir selbst nutzen würden.” — Mark Jardine, Tapbots

Ivory entstand aus der Asche von Tweetbot, als Twitter 2023 den Zugang für Drittanbieter-API abschaltete. Doch statt einer hastigen Portierung haben Tapbots — das Zweierteam bestehend aus Designer Mark Jardine und Entwickler Paul Haddad — ihre 15 Jahre Erfahrung in der Verfeinerung von Timeline-UX für ein neues soziales Protokoll neu aufgebaut. Das Ergebnis ist der flüssigste und reaktionsschnellste Mastodon-Client auf dem Markt: kein Ruckeln beim ProMotion-Scrollen, flüssige 120fps-Animationen und eine Persönlichkeit, die das Überprüfen der Timeline so anfühlen lässt, als würde man ein Lieblingsspielzeug öffnen.

Wichtigste Erkenntnisse

Persönlichkeit gehört in Kunst und Klang, nicht in Typografie – Ivory verwendet ausschließlich Systemschriften und kanalisiert die gesamte Markenidentität über 3D-Maskottchen-Illustrationen, haptisches Feedback und markante Audiosignale
15 Jahre Iteration kumulieren sich – Tapbots hat das Timeline-Interface seit dem ursprünglichen Tweetbot verfeinert, und dieses angesammelte Handwerkswissen erzeugt eine App, in der sich jedes Scrollen, Tippen und Wischen unvermeidlich anfühlt
Anpassbare Themes respektieren die Nutzerpräferenz – Anstatt eine einzelne Farbpalette aufzuzwingen, bietet Ivory mehrere Themes (hell, dunkel, OLED-Schwarz) mit vom Nutzer wählbaren Akzentfarben, wodurch das Designsystem parametrisch statt starr wird
Sound-Design ist eine UI-Ebene – Pull-to-Refresh, das Posten und das Favorisieren haben jeweils eigene Audiosignaturen, die Feedback geben, ohne visuelle Aufmerksamkeit zu erfordern
ProMotion-native Animation unterscheidet gut von großartig – Von Grund auf für 120fps gebaut, ist jeder Übergang und jedes Scrollen für ProMotion-Displays optimiert, anstatt nachträglich angepasst

Warum Ivory wichtig ist

Ivory zeigt, was passiert, wenn ein Designer-Entwickler-Duo über ein Jahrzehnt lang ein einziges Interaktionsparadigma verfeinert. Während die meisten Mastodon-Clients kompetent, aber unbemerkenswert sind, trägt Ivory die gesammelte Weisheit jeder Tweetbot-Iteration in sich — jede Scroll-Optimierung, jede Verfeinerung des Timeline-Renderings, jede Geste, die hinzugefügt, getestet und entweder beibehalten oder verworfen wurde.

Zentrale Errungenschaften: - Bewiesen, dass ein Zweierteam den definitiven Client für ein gesamtes soziales Protokoll entwickeln kann - 15 Jahre Timeline-UX-Verfeinerung von Twitter auf Mastodon übertragen, ohne an Handwerksqualität zu verlieren - Etabliert, dass App-Persönlichkeit (Maskottchen, Klänge, Haptik) mit plattformnativen Interface-Konventionen koexistieren kann - ProMotion-natives 120fps-Scrollen erreicht, das die meisten Apps mit größeren Teams nicht hinbekommen

Zentrale Designprinzipien

1. Persönlichkeit durch Kunst, nicht durch Verzierung

Ivorys visuelle Identität verbindet verspielte 3D-Maskottchen-Kunst — ein Cartoon-Elefant im Weltraum, komplett mit Raketen und Planeten — mit einer akribisch gestalteten App-Oberfläche. Die Marketing-Website ist dunkel mit kosmischer Bildsprache, während die App selbst sauber und systematisch ist.

Diese Trennung ist beabsichtigt. Das Maskottchen und die Weltraum-Bildsprache schaffen emotionale Verbindung und Markenwiederkennung auf der Marketing-Website, im App Store-Eintrag und in sozialen Medien. Innerhalb der App ist das Interface rein funktional — Systemschriften, Standardsteuerelemente, plattformgerechte Dichte. Die gesamte Persönlichkeit kommt aus Ikonografie, Animation und Klang statt aus typografischer oder chromatischer Neuheit.

Die Marketing-Seite spiegelt diese Philosophie wider: keine CSS Custom Properties, keine Design-System-Tokens, kein Framework. Nur sorgfältig platzierte Bildsprache und saubere Systemschriften. Das Designsystem lebt in der App, nicht auf der Website.

2. Die Timeline als primäre Interfläche

Die endlos scrollende Timeline ist das zentrale UX-Muster. Alles andere — Verfassen, Profil, Einstellungen — ist dem Lesefluss untergeordnet. Diese Hierarchie wurde über jede Version von Tweetbot und nun Ivory hinweg verfeinert und erzeugt eine Timeline, die sich auf eine Weise reibungslos anfühlt, die schwer in Worte zu fassen, aber sofort beim Benutzen spürbar ist.

┌──────────────────────────────────────────────────┐
│  ↓ Zum Aktualisieren ziehen (mit Audiosignal)    │
├──────────────────────────────────────────────────┤
│  🐘 Benutzername                          vor 2m │
│  Beitragsinhalt fließt natürlich mit              │
│  passendem Zeilenabstand und lesbarer Dichte...   │
│  ♡ 12    ↺ 4    ⤴ Teilen                         │
├──────────────────────────────────────────────────┤
│  🐘 Anderer Benutzer                    vor 15m  │
│  Die Timeline ist das Produkt. Alles andere      │
│  existiert, um das Leseerlebnis zu unterstützen. │
│  ♡ 8     ↺ 2    ⤴ Teilen                         │
├──────────────────────────────────────────────────┤
│  Scrollen geht weiter mit 120fps...              │
└──────────────────────────────────────────────────┘

Die Leistung der Timeline ist nicht nur eine technische Errungenschaft — sie ist eine Designentscheidung. Eine Timeline, die ruckelt oder Frames auslässt, unterbricht den Lesefluss und zerstört die Illusion eines kontinuierlichen Stroms. Tapbots behandelt 120fps-Scrollen als Design-Anforderung, nicht als Optimierungsziel.

3. Sound-Design als Interfläche

Tapbots-Apps haben markante Klänge für Pull-to-Refresh, Posten, Favorisieren und Boosten. Diese Audiosignale dienen einem funktionalen Zweck jenseits der reinen Freude: Sie bestätigen, dass eine Aktion erfolgreich war, ohne dass der Nutzer auf den Bildschirm schauen muss. Pull-to-Refresh klingt anders als ein fehlgeschlagenes Aktualisieren. Das Posten hat einen befriedigenden Bestätigungston. Das Favorisieren erzeugt ein dezentes Klicken.

Diese Audio-Ebene arbeitet zusammen mit haptischem Feedback auf Geräten, die dies unterstützen. Die Kombination aus Klang und Haptik erzeugt eine physisch wirkende Interaktion, die Tapbots’ langjähriges Designprinzip unterstreicht: Apps sollten sich wie greifbare Objekte anfühlen.

4. Parametrisches Theme-System

Ivory zwingt keine einzelne visuelle Identität auf. Nutzer wählen aus mehreren App-Themes — hell, dunkel und OLED-Schwarz — mit anpassbaren Akzentfarben. Das bedeutet, dass es absichtlich keine einzelne „Ivory-Palette” gibt. Die zugrunde liegende Architektur ist parametrisch: Farben werden nach Rolle (Hintergrund, Oberfläche, Akzent, Text) definiert und zur Laufzeit basierend auf der Nutzerpräferenz aufgelöst.

Dieser Ansatz respektiert, dass eine Social-Timeline-App auf dem Homescreen des Nutzers lebt und Dutzende Male am Tag geöffnet wird. Die Farben müssen zur Ästhetik des Nutzers passen, nicht zum Portfolio des Designers.

5. Ausschließlich nativ, ohne Kompromisse

Ivory ist ausschließlich für iOS und macOS unter Verwendung nativer Plattformfähigkeiten gebaut. Kein Electron, kein React Native, keine plattformübergreifenden Abstraktionen. Dieses Engagement zeigt sich in jeder Interaktion: Die App reagiert auf die dynamischen Schriftgrößeneinstellungen des Systems, respektiert die Barrierefreiheitsfunktionen der Plattform, integriert sich mit ShareSheet und Shortcuts und verwendet native Navigationsmuster, die sich auf jeder Gerätegröße korrekt anfühlen.

Die Typografie-Wahl unterstreicht dieses Engagement. Der Font-Stack ist rein systembasiert: -apple-system, helvetica-neue, helvetica, arial, sans-serif. Null eigene Schriftarten. Auf Apple-Geräten wird dies zu San Francisco aufgelöst — derselben Schriftart, die von jedem nativen Systemelement verwendet wird, wodurch sich Ivory wie eine nahtlose Erweiterung der Plattform anfühlt statt wie eine Drittanbieter-Überlagerung.

Übertragbare Muster

Ivorys Ansatz zur Persönlichkeit ist das am besten übertragbare Muster: Investiere in markante Kunst, Klang und Animation statt in eigene Typografie oder ungewöhnliche Farbschemata. Diese Strategie schafft eine starke Markenidentität bei gleichzeitiger Beibehaltung plattformnativer Bedienbarkeit.

Das Theme-System zeigt, wie man ein anpassbares Design-Fundament aufbaut:

struct AppTheme {
    let backgroundColor: Color
    let surfaceColor: Color
    let accentColor: Color
    let textPrimary: Color
    let textSecondary: Color
}

static let defaultTheme = AppTheme(
    backgroundColor: .black,
    surfaceColor: Color(white: 0.1),
    accentColor: Color(hex: "6C63FF"),  // Purple-blue default
    textPrimary: .white,
    textSecondary: Color(white: 0.8)
)

Die entscheidende Erkenntnis ist, dass das Theme-Struct Rollen definiert, nicht bestimmte Farben. Hintergrund, Oberfläche, Akzent, Text — diese Rollen bleiben konstant, während sich ihre Werte basierend auf der Nutzerpräferenz ändern. Dieser parametrische Ansatz ermöglicht es Ivory, helle, dunkle und OLED-Schwarz-Modi zu unterstützen, ohne drei separate Designsysteme pflegen zu müssen.

Für Web-Implementierungen funktioniert dasselbe Muster mit CSS Custom Properties und minimalem Aufwand:

:root {
  /* System-nativer Ansatz — lass die Plattform die Last tragen */
  --font-sans: -apple-system, helvetica-neue, helvetica, arial, sans-serif;
  --body-size: 18px;
  --body-line-height: 1.5;
}

Die Typografie-Skala ist bewusst zurückhaltend. Die größte Überschrift (H3) ist nur 28px bei Schriftstärke 600. H1 und Fließtext teilen sich dieselbe Größe von 18px — eine Umkehrung der typischen Hierarchie, die funktioniert, weil Bilder, nicht Text, die Marketing-Erzählung tragen. Auf einer Seite, auf der 3D-Elefanten-Kunst das Hero-Element ist, müssen Überschriften nicht um Aufmerksamkeit konkurrieren.

Ebene	Größe	Stärke	Zeilenhöhe	Rolle
H3	28px	600	1.1	Feature-Überschriften
H2	20px	400	1.7	Abschnittsbeschreibungen
H1 / Fließtext	18px	400	1.5	Standardtext

Design-Lektionen

Ivory lehrt, dass Markenpersönlichkeit und plattformnativer Entwurf nicht im Widerspruch stehen. Indem die gesamte Persönlichkeit in Kunst, Klang und Haptik fließt — und Typografie, Steuerelemente und Navigation der Plattform überlassen werden — erreicht Tapbots sowohl starke Markenwiederkennung als auch nahtlose Bedienbarkeit.

Die Lektion der 15-jährigen Iteration ist schwerer zu replizieren, aber wichtig zu verstehen: Ivorys Qualität stammt aus kumulierter Verfeinerung, nicht aus einem einzelnen brillanten Design-Sprint. Jede kleine Entscheidung über Scroll-Physik, Tipp-Ziele und Animations-Timing wurde über mehr als ein Jahrzehnt hinweg mit Millionen von Nutzern getestet. Dieser kumulative Handwerksvorteil ist Tapbots’ wahrer Burggraben.

Widerstehe der Versuchung, sich in Timeline-basierten Apps durch visuelle Neuheit zu differenzieren. Trendige Typografie, ungewöhnliche Farbschemata und nicht-standardmäßige Navigationsmuster erzeugen Reibung in einem Interface, das Nutzer Dutzende Male am Tag besuchen. Ivory beweist, dass native Steuerelemente mit markanten Persönlichkeitselementen (Maskottchen, Klänge, Haptik) ein einprägsameres und besser bedienbares Produkt schaffen als visuelle Differenzierung allein.

Vermeide Feature-Überladung auf Marketing-Seiten. Die Ivory-Website ist fast ausschließlich visuell — 3D-Kunst und minimaler Text. Features werden in der App entdeckt, nicht auf einer Landing Page verkauft. Dieser Ansatz vertraut darauf, dass die Qualität des Erlebnisses sich selbst verkauft, sobald Nutzer die App herunterladen.

Häufig gestellte Fragen

Was macht das Design von Ivory unverwechselbar?

Ivory erreicht Unverwechselbarkeit durch Persönlichkeit statt durch visuelle Abweichung von Plattformkonventionen. Das verspielte 3D-Elefanten-Maskottchen, das markante Sound Design und das befriedigende haptische Feedback schaffen eine starke Markenwiedererkennbarkeit, während die eigentliche Benutzeroberfläche System-Schriften, Standardsteuerelemente und plattformnative Navigation verwendet. Das Ergebnis ist eine App, die sich einzigartig nach Tapbots anfühlt und dennoch völlig zu Hause auf iOS und macOS wirkt.

Wie erreicht Ivory eine so flüssige Scroll-Performance?

Ivory wurde von Grund auf für 120fps ProMotion-Displays entwickelt, nicht nachträglich angepasst. Die Performance-Besessenheit von Entwickler Paul Haddad bedeutet, dass jede Timeline-Rendering-Optimierung, jede Scroll-Physik-Berechnung und jede Animationskurve speziell für Displays mit hoher Bildwiederholrate abgestimmt wurde. Der ausschließlich native Ansatz (keine plattformübergreifenden Frameworks) eliminiert Abstraktionsschichten, die typischerweise Frame Drops verursachen.

Was können Designer von Ivory lernen?

Die wichtigste Lektion ist, dass Markenpersönlichkeit in Grafiken, Sound und Haptik leben kann, anstatt in Typografie und Farbe. Durch die Verwendung von System-Schriften und Standardsteuerelementen bewahrt Ivory die native Benutzerfreundlichkeit, während das Elefanten-Maskottchen, die individuellen Sounds und die befriedigende Haptik eine einprägsame Identität schaffen. Dieser Ansatz ist beständiger als visuelle Neuartigkeit, da er mit Plattform-Updates zusammenarbeitet statt gegen sie.

Wie funktioniert das Theme-System von Ivory?

Anstatt eine feste Farbpalette vorzugeben, definiert Ivory Farben nach Funktion (Hintergrund, Oberfläche, Akzent, Text) und lässt die Nutzer aus mehreren Themes wählen — Hell, Dunkel und OLED-Schwarz — mit anpassbaren Akzentfarben. Dieser parametrische Ansatz bedeutet, dass sich das Design System an Nutzerpräferenzen anpasst und gleichzeitig visuelle Konsistenz sowie korrekte Kontrastverhältnisse über alle Kombinationen hinweg gewährleistet.

Warum hat Tapbots die Struktur eines Zweierteams gewählt?

Mark Jardine (Design) und Paul Haddad (Entwicklung) arbeiten seit dem ursprünglichen Tweetbot als Duo zusammen. Diese enge Zusammenarbeit eliminiert den Kommunikationsaufwand größerer Teams und ermöglicht die sofortige Umsetzung von Design-Entscheidungen. Jardines Handwerks-Besessenheit trifft auf Haddads Performance-Besessenheit und bringt eine App hervor, bei der sowohl ästhetische Qualität als auch technische Leistung als nicht verhandelbar gelten.

Referenzen

Ivory for Mastodon — Offizielle Produktseite von Tapbots
MacStories Review — Federico Viticcis umfassende Rezension von Ivory
TechCrunch Launch Coverage — Berichterstattung über den Launch von Ivory nach der Einstellung von API durch Twitter
Texas Monthly Profile — Porträt des Tapbots-Teams und ihres Übergangs von Tweetbot zu Ivory