Santiago Bustelo

Interaction Designer und Schöpfer von FlowStyler

Aktualisiert: Juni 2026

Ich habe FlowStyler entwickelt, weil ich lange Beiträge auf LinkedIn mit Titeln, Kursivschrift und einer gewissen visuellen Hierarchie veröffentlichen musste. Die Plattform bot nichts davon.

Die verfügbaren Werkzeuge dafür, wie etwa „Unicode font generators“, waren umständlich und mühsam. Ich verbrachte meine Zeit damit, gegen das Werkzeug und den Text zu kämpfen, anstatt einfach zu schreiben.

Ich fragte mich: Was würde passieren, wenn wir die Muster eines echten Texteditors auf das Problem der Unicode-Stile anwenden würden?

Und so fand ich mich wieder auf einem Pfad wieder, den ich vor 40 Jahren begonnen hatte.


Spectrum y Macintosh Spectrum y Macintosh

Die ZX-Spectrum-Jahre

1986 war der Timex Sinclair 1000 (16 KB RAM, ohne Grafik), mit dem ich drei Jahre zuvor das Programmieren begonnen hatte, zu klein für mich geworden. Da ich bereits mit Sinclair Basic und Z80-Assembler vertraut war, war der logische nächste Schritt ein CZ‑Spectrum, ein nationaler Klon des ZX Spectrum: 48 KB RAM, 256 × 192 px Auflösung und Farbe!

Zu dieser Zeit lernte ich ein Zeichenprogramm kennen, „Art Studio“. Es bot eine grafische Oberfläche und sogar eine Rückgängig-Funktion! (das einzige Spectrum-Programm, das das hatte).

Ich verbrachte hunderte von Stunden mit diesem Programm, zeichnete Bildschirme sowie Figuren und Szenen für Videospiele, die ich entwickeln wollte. Art Studio war ein Klon von MacPaint, aber das wusste ich damals nicht. Ich wusste auch nicht, was ein Mac war. Ich hatte noch nie eine grafische Oberfläche gesehen. Aber das Menüsystem und die „Rückgängig“-Funktion schienen mir brillant, und ich fragte mich, wie Tasword, der Textprozessor, den ich auf dem Spectrum verwendete, wohl aussehen würde, wenn er Menüs und eine Rückgängig-Funktion hätte.

Kurz darauf, auf einer Computermesse, lernte ich endlich einen Mac kennen. Dort sah ich ein System, in dem alles so funktionierte, wie ich es mir wünschte. Ich sagte mir, dass ich, wenn ich groß bin, mich dafür einsetzen würde, dass Dinge so sind.

Ich habe als Kind viel gesagt, aber dieses Versprechen habe ich gehalten.

Schriftarten in 8 × 8 Pixeln

Die Standardschriftart des ZX Spectrum war für Texte sehr unelegant. Ich wollte, dass meine Dokumente die Qualität eines gedruckten Textes oder zumindest einer Schreibmaschine hatten.

Tasword verwendete die Systemsichtart, die ziemlich hässlich war. Also machte ich mich an die Arbeit:

  • Art Studio hatte einen Schriftarteditor.
  • Mit ein paar POKEs konnten die Schriftarten von Art Studio im Textprozessor verwendet werden.
  • Ich begann, Pixel für Pixel auf dem 8 × 8-Raster, das der Spectrum bot, verschiedene Schriftarten aus den Typografie-Katalogen meiner Mutter zu kopieren und anzupassen (sie arbeitete damals in der Werbung, als Anzeigen noch von Hand und mit Fotomontage hergestellt wurden).

Da die mit Art Studio erstellbaren Schriftarten nichtproportional waren, funktionierte für Texte eine Adaption der American Typewriter am besten. Dazu fügte ich Assembler-Routinen hinzu, um fette und kursive Versionen zu generieren (Stile, die miteinander kombinierbar waren), sowie einige weitere wesentliche Hilfsfunktionen, wie etwa Markierungen zum Schneiden des Endlospapiers des thermischen Mikrodruckers. Das Ergebnis war durchaus akzeptabel.

Ich reichte einige Literatur-Hausarbeiten mit meiner modifizierten Version von Tasword ein. Während alle anderen Collegeblöcke mitbrachten, gab ich A5-Zettel ab. Ich war ziemlich stolz darauf.

Einen WYSIWYG-Editor von Grund auf neu bauen

Spulen wir vor bis 2005. Zu diesem Zeitpunkt hatte ich bereits meinen Abschluss als Grafikdesigner an der FADU‑UBA gemacht. Ich entschied mich für diesen Studiengang, weil ich für die Entwicklung von Produkten wie Art Studio sowohl an Programmierung als auch an Design interessiert war. Als Autodidakt wusste ich, dass ich auf diesem Weg ein durchschnittlicher Programmierer werden könnte. Aber um Design zu lernen, brauchte ich Mentoren. Und die einzige Möglichkeit, diese Ausbildung zu erhalten, war die Workshop-Erfahrung, die nur eine Universität bieten kann.

Im Jahr 2005 beauftragte uns das Center of Subsurface Modeling der University of Texas at Austin mit der Entwicklung dessen, was wir heute als CMS kennen. Die damaligen Optionen waren sehr begrenzt. Wir hatten bereits eine Plattform entwickelt, die ihre Anforderungen abdeckte.

Die Innovation, die ich einbrachte, war die Verwendung der damals aufkommenden WYSIWYG-Technologie in einem Web-Editor, anstelle von HTML-Tags oder BBCode. Die bestehenden Editoren waren sehr komplex und voller Patches für die verschiedenen Versionen des Internet Explorers – ein Browser, den unser Kunde nicht verwendete. Dies ermöglichte es mir, den benötigten HTML-WYSIWYG-Editor von Grund auf neu zu entwickeln. Die größte Herausforderung war der Umgang mit den Inkonsistenzen, die durch das Einfügen aus Word und die Geister-Tags der frühen Firefox-Versionen entstanden.

Ich verbrachte etwa drei Monate damit, reguläre Ausdrücke zu schreiben; ich weiß, dass das für viele der Inbegriff einer biblischen Strafe ist. Aber so wie manche Menschen Puzzles mögen, fand ich es sehr unterhaltsam, Tags mit einem /<span\b(?=[^>]*\bbold\b)(?=[^>]*\bitalic\b)[^>]*>(.*?)<\/span>/is zu normalisieren.

Meine Vision war es, alle Werkzeuge in den Editor zu integrieren – ähnlich dem, was wir heute bei Blockeditoren sehen. Das war damals ehrgeizig. Aber die Version, die wir bauen konnten, die die Grenzen der damaligen Browser ausreizte, war unendlich besser, als Tags manuell einzufügen.

Die Neuerfindung des Textprozessors, 40 Jahre später

Etwa 20 weitere Jahre vergingen. Als ich diese Zeilen schreibe, habe ich bereits über 1000 Design- und Entwicklungsprojekte angesammelt.

Anfang 2026, frustriert über die Maurerarbeit, die das Kopieren und Einfügen von Text aus Unicode-Generatoren zur visuellen Strukturierung meiner LinkedIn-Beiträge mit sich brachte, begann ich zu recherchieren, ob es nicht einen besseren Weg gäbe. Und bei der Lösung dieses Problems wurde mir klar, dass ich mich seit 40 Jahren darauf vorbereitet hatte.

Die Lösung bestand darin, die Logik eines echten Textprozessors (bei dem Schreiben, Formatieren und Korrigieren freie Aktionen sind, die keine bestimmte Reihenfolge vorschreiben) auf Unicode-Stile anzuwenden.

Mit anderen Worten: einen Klon von MacWrite zu bauen – das, wovon ich in den 80ern träumte, ohne zu wissen, dass es existierte.

Ich baute einen schnellen Prototypen, der mein Problem löste. Ich fragte mich, ob es Sinn machen würde, daraus ein Side Project zu machen, damit auch andere es nutzen könnten: Die Antwort war ja. Es zu bauen und öffentlich zugänglich zu machen, war es wert. Wird es ein großes Geschäft? Wird es zumindest die investierten Stunden bezahlen? Wer weiß. Das war nie die Frage.

Ich nutzte mein eigenes Werkzeug jeden Tag und feilte ständig an jedem Detail. Das Ziel war es, jeden Reibungspunkt zu erkennen und zu beseitigen. Denn wenn ein Werkzeug dich zwingt, in einer bestimmten Reihenfolge zu arbeiten (und wenn du diese Reihenfolge überspringst, geht deine Arbeit verloren oder du musst alles neu machen), schränkt dich das Interaktionsmodell ein. Meine Prämisse war genau das Gegenteil: dass sich das Werkzeug an meine Art zu schreiben anpasst, und nicht umgekehrt.

Der erste Textprozessor für Unicode-Stile

Aus diesem gesamten Prozess entstanden die charakteristischen Funktionen von FlowStyler:

  • Live-Stile: Der Editor erkennt den Stil an der Stelle, an der du den Cursor platzierst, sodass das Korrigieren oder Weiterschreiben deinen Arbeitsfluss nicht unterbricht. Du hörst auf, gegen das Werkzeug zu kämpfen, und kannst in Ruhe iterieren.
  • Kombinierbare Stile: In den unterstützten Fällen kannst du fett, kursiv, unterstrichen und auch durchgestrichen verwenden. Alles zusammen, ohne dass ein Stil den anderen überschreibt.
  • Groß-/Kleinschreibung anpassen: Während du bearbeitest, kannst du die Groß-/Kleinschreibung anpassen, ohne die bereits angewendeten Stile zu verlieren.
  • Erweiterte Listen: Aufzählungen, nummerierte Listen, römische Ziffern, alphabetische Listen, Unicode-Zahlen in Kreisen und Buchstaben in Quadraten. Und das Wichtigste: Du kannst sie bearbeiten, sortieren und neu nummerieren, ohne die App zu verlassen oder Word oder Excel anzufassen.
  • Echtzeit-Zeichenzähler, immer sichtbar beim Schreiben.

Mehr als eine Liste von Funktionen sind dies die charakteristischen Merkmale einer Kategorie, die es bisher nicht gab: der erste Textprozessor für Unicode-Stile.

Vor 40 Jahren dachte ich, dass ich, wenn ich groß bin, gerne ein Erfinder sein würde. Ich glaube, wenn mein früheres Ich mich heute treffen würde, wäre es sehr glücklich.

Heute bin ich UX Director bei Kambrica, Berater und Mentor für UX, Strategie und Produkt. Sie finden mich unter bustelo.com.ar oder können mir über LinkedIn schreiben.

Funktioniert überall dort, wo Sie Text einfügen können: