Honk – Eine Messaging-App, die das Gefühl zeigt, nicht die Funktionsliste
Honk ist eine Messaging-App, in der jeder Tastenanschlag sofort sichtbar wird. Die Website musste dieses Gefühl jemandem vermitteln, der die App nie benutzt hat – in den Sekunden, bevor er sich für oder gegen die Installation entscheidet.
Aufgabe
Echtzeit-Messaging lässt sich schwer in einem Satz erklären und gar nicht mit dem Screenshot einer Einstellungsseite beweisen. Der Reiz des Produkts ist Bewegung – er lebt in dem Moment, in dem eine Nachricht Buchstabe für Buchstabe erscheint – und eine statische Marketingseite startet damit im Nachteil.
Vorgehen
Wir haben die Ansichten der App in Telefongröße ins Zentrum des Layouts gestellt, umgeben von den Elementen, die Nutzer wiedererkennen: Sprechblasen, Reaktionen, das Spiel in der App. Die Überschrift nennt das Versprechen in fünf Wörtern, eine Zeile darunter ordnet es ein, und alles Weitere auf dem ersten Bildschirm ist Produkt.
Das Produkt zeigen, statt es zu beschreiben
Der erste Bildschirm ist um einen telefongroßen Rahmen mit dem echten Interface gebaut; Sprechblasen und Reaktions-Sticker brechen daraus auf den Seitenhintergrund aus. Die Wirkung ist näher an einer Produktdemo, die jemand in die Kamera hält, als an einer Marketingillustration.
Der Text ist bewusst knapp. Fünf Wörter in der Überschrift, eine einordnende Zeile darunter, den Rest erklärt das Produkt selbst.
Eine Farbpalette, die Struktur schafft
Die Website läuft auf einem satten Blau mit gelben und grünen Akzenten, direkt aus dem Interface der App übernommen. Weil Marketingfläche und Produkt dieselbe Palette teilen, wirken die eingebetteten Ansichten wie ein Teil der Seite und nicht wie hineinkopiert.
Dadurch bleiben auch Ankündigungsleiste und Nebenlinks ohne Rahmen und Kästen lesbar – die Farbe allein trennt sie.
Ankündigungen tragen, ohne die Seite zu sprengen
Produktneuigkeiten brauchten einen Platz, der nicht jedes Mal ein Redesign verlangt. Eine pillenförmige Ankündigung sitzt innerhalb der Bühnenkomposition statt als Balken darüber, gehört damit sichtbar zum Layout und lässt sich bearbeiten oder entfernen, ohne eine Lücke zu hinterlassen.
Umsetzung
Die Marketing-Website ist eine Next.js-Anwendung, ausgeliefert über Cloudflare. Die Interface-Ansichten sind die schwersten Elemente der Seite, deshalb werden sie pro Bildschirmgröße passend ausgeliefert, statt in einer Auflösung zu kommen und im Browser verkleinert zu werden.
Was entstanden ist
- Bühne rund um echte Interface-Ansichten in Telefongröße
- Farbsystem, das App und Marketing-Website teilen
- Ein Ankündigungsfeld im Layout, das ohne Redesign bearbeitet werden kann
- Next.js-Build, ausgeliefert über Cloudflare
Häufige Fragen
Indem man das Interface zeigt, statt den Mechanismus zu beschreiben. Die Seite ist um die App-Ansichten in Telefongröße gebaut, und die wiedererkennbaren Teile – Sprechblasen, Reaktionen, das Spiel in der App – brechen auf den Hintergrund aus.
Weil das Produkt sich schneller erklärt als ein Absatz. Die Überschrift nennt das Versprechen, eine Zeile ordnet es ein, der übrige Platz gehört dem Interface.
Mit Next.js und React, ausgeliefert über Cloudflare.
Ein Blick in die Website
„Die Aufgabe war, zu zeigen, was Honk anders macht, ohne es fünf Minuten lang zu erklären. Sakura hat das Produkt ins Zentrum der Website gestellt, und das war genau richtig.“