READY GO – Eine Agentur-Website, deren Überschrift das Showreel ist
READY GO ist eine Digitalagentur. Ihre Website musste kreative Bandbreite in den ersten drei Sekunden beweisen, also ist die Überschrift selbst der Beweis: ein fester Satz, dessen letztes Wort immer wieder wechselt.
Aufgabe
Jede Agentur-Website behauptet Bandbreite, und jede behauptet sie in einem Absatz. Der Beweis muss das Objekt sein, nicht der Text – trotzdem muss eine Startseite klar sagen, was das Unternehmen tut, sonst wird sie zu einem Portfolio, das niemand einordnen kann.
Vorgehen
Die Überschrift nennt die Tatsache – eine Digitalagentur – und lässt dann ihr letztes Wort durch die Leistungen rotieren: Produktion, Strategie, Merchandise, Kreation. Aussage und Beweis stehen im selben Satz, und die Projektbilder streuen darum herum, statt in einem Raster darunter zu sitzen.
Eine Überschrift, die auftritt
„Wir sind eine Digitalagentur. Zu uns kommt man für –“ und dann wechselt das letzte Wort. Jede Variante ist als eigene Displayschrift gezeichnet statt in einer Schriftart gesetzt, sodass jeder Zustand des Satzes ein eigenes Stück Typografie ist.
Die erste Zeile beantwortet die Einordnung, die zweite zeigt die Bandbreite – ganz ohne einen Satz Selbstbeschreibung.
Gezeichnete Schrift als Identität
Die Displaywörter sind Vektorzeichnungen, keine Schriftsätze. Das gibt jeder Rotation ihr eigenes Gewicht und ihre eigene Verzerrung, und deshalb liest sich die Überschrift als gestaltetes Objekt und nicht als Animationseffekt auf Text.
Der Preis dafür ist bewusst und gehört benannt: Weil die Wörter Umrisse sind, sind sie Bilder statt markierbarer Text – deshalb trägt der umgebende Text die Bedeutung für alles, was die Seite maschinell liest.
Arbeiten verstreut statt im Raster
Projektbilder schweben in wechselnden Größen und Drehungen an den Rändern der Überschrift und wechseln mit dem Satz. Ein übliches Raster hätte „Agenturvorlage“ gesagt; die Streuung sagt, dass dieses Layout für diesen Inhalt gemacht wurde.
Zurückhaltung überall sonst
Die Navigation besteht aus drei schlichten Links. Kein Bühnenvideo, kein Scroll-Hinweis, kein Cookie-Theater, das der Überschrift Aufmerksamkeit abzieht. Alles, was die Seite ausgeben kann, gibt sie an einer Stelle aus.
Umsetzung
Next.js hinter nginx. Die rotierende Überschrift lädt die Zeichnung des nächsten Worts vor, damit der Wechsel nie auf einem leeren Bild landet.
Was entstanden ist
- Rotierende Überschrift mit eigens gezeichneter Displayschrift je Variante
- Verstreute Projektbilder, die mit der Überschrift wechseln
- Navigation aus drei Links, ohne konkurrierende Bühnenelemente
- Next.js und Tailwind CSS auf einem selbst betriebenen Node.js-Server
Häufige Fragen
Weil eine Agentur Bandbreite beweisen muss, statt sie zu behaupten. Das letzte Wort eines festen Satzes rotieren zu lassen, sagt in einer Zeile, was das Unternehmen tut, und zeigt zugleich die Arbeit.
Jede Variante ist gezeichnet, damit sie eigenes Gewicht und eigene Verzerrung haben kann. Der Preis ist, dass diese Wörter Bilder statt markierbarem Text sind – deshalb trägt der umgebende Text die Bedeutung für maschinelle Leser.
Mit Next.js und React samt Tailwind CSS, auf einem selbst betriebenen Node.js-Server.
Ein Blick in die Website
„Wir wollten, dass die Website selbst zeigt, was unsere Agentur kann, und Sakura hat genau das getroffen. Die bewegte Typografie und das Layout geben ihr viel Persönlichkeit, ohne verwirrend zu werden.“