Untertitel direkt auf dem Bild, ohne grauen Balken

Ein 9:16-Film ist ein Handybildschirm, und am Handy stehen Untertitel unten. Genau dort sind die Seiten, die wir filmen, am vollsten: Buttons, Cookie-Hinweise, feste Fußzeilen. Also hatten wir eine Bühne gebaut. Das aufgenommene Video endete über einem Untertitelbalken, und die Wörter standen darin, weg von der Seite.

Der Balken zeigte unser Marken-Leuchten auf fast Schwarz. Er machte jeden Untertitel auf jeder Website lesbar. Er legte aber auch eine dunkle Platte unter jede Einstellung, und diese Platte sah man zuerst, noch vor dem Produkt.

Wir wollten beides: Wörter, die man immer lesen kann, und ein Bild, das ganz der gefilmten Website gehört.

Am 2. November haben wir das dunkle Leuchten durch das Bild der Szene ersetzt, weichgezeichnet zu sanften Farbflächen, so wie unsere gestalteten Karten eine Seite schon als Hintergrund nutzen. Die Palette der Website lief damit unter dem Video weiter, statt an einer schwarzen Kante zu enden.

Eine helle Seite brachte die nächste Lektion. Hinter der Buchungsszene eines Fahrradladens war der weichgezeichnete Hintergrund das weiße Raster des Ladens, und weiße Untertitel brauchen etwas Dunkleres als Weiß dahinter. Also bekam der Balken seine eigene Abdunklung: klar über dem Bild, dann flach 0,55 ab der Unterkante der Bühne.

Dieser Wert ist keine Geschmacksfrage. Er hält weiße Schrift auf reinem Weiß bei einem Kontrast von 4,5 zu 1, der üblichen Schwelle für Barrierefreiheit, und ein Test rechnet ihn jedes Mal nach.

Lesbar war noch nicht schön. Als wir die Filme am nächsten Morgen nebeneinander ansahen, war die Vorgabe, die wir uns gaben, kurz: kein Grau hinter den Untertiteln, perfekte Untertitel. Am selben Tag folgten zwei Änderungen.

Zuerst verschwand die abgerundete Plakette unter unseren hauseigenen Untertiteln. Die Wörter stehen jetzt auf dem Video selbst. Nur das gerade gesprochene Wort behält seine kleine Hervorhebung in Markenfarbe, weil Farbe dort dem Auge hilft, der Stimme zu folgen.

Dann verschwand auch die Bühne. Das Bild endet nicht mehr über einem Balken: Das Video füllt den ganzen Rahmen, und die Untertitel stehen darauf, so wie in den Videos, die Menschen freiwillig anschauen.

Ohne Balken muss die Lesbarkeit aus den Buchstaben kommen und aus einer leichten Berührung des Bildes:

• fette weiße Wörter mit dünner dunkler Kontur und knappem Schatten, damit jeder Buchstabe seinen eigenen Kontrast trägt;
• eine sanfte Abdunklung ganz unten im Rahmen, ein Verlauf statt eines Blocks;
• etwas mehr Abdunklung hinter einem nach oben gerückten Untertitel, nie eine Platte;
• eine feinere Kante und mehr Wortabstand für unseren minimalen Stil;
• ein Untertitel, der einen tief liegenden Button verdecken würde, rückt darüber, und das Abzeichen der Gratisfilme macht ihm Platz.

Eine kleine Änderung hat das möglich gemacht. Unser Renderer zeichnete immer dieselbe haarfeine Kante, egal was ein Stil verlangte. Jetzt liest er Kontur und Schatten jedes Stils, und jeder Stil kann seine Kante selbst festlegen.

Dieselbe Durchsicht galt den gestalteten Karten zwischen den Aufnahmen. Unsere Vorlagenbibliothek enthält thematische Designs: einen Theatervorhang, eine Preisverleihung, eine Hochzeit, einen Spielbildschirm, Sport, ein Podcast-Kapitel. Schön im passenden Film, irritierend im Tutorial einer Werkstatt.

Diese Themenvorlagen werden jetzt nur angeboten, wenn die Seite oder das Briefing von dieser Welt spricht. Ein Tutorial bekommt Karten, die wie ein Tutorial aussehen. Die Bibliothek findest du unter /animations.

Wir hatten Lesbarkeit und Aussehen als Tauschgeschäft behandelt und die Lesbarkeit mit einem großen, sicheren Block gewählt. Die bessere Antwort war, den Kontrast in die Buchstaben zu legen statt dahinter.

Jetzt behalten eine weiße Landingpage, ein blaues Dashboard und ein dunkler Hero-Bereich ihr Bild bis zur Unterkante des Rahmens, und die Wörter bleiben auf allen dreien lesbar. So soll sich ein Hochformat-Film anfühlen: die Website im Vollbild, mit einer Stimme, die man auch lesen kann.