Signalform Software mit Software verkaufen

01 · Überblick

Software mit Software verkaufen

Observability-Werkzeuge werden von Leuten gekauft, die das Produkt am p95 der Marketing-Site messen. Diese Site ist also keine Seite über ein Dashboard — sie enthält eines. Das Hero-Panel ist von Hand gebautes SVG: Browser-Chrome, ein Durchsatzdiagramm, eine Fehlerraten-Sparkline, eine p95-Latenzanzeige und ein scrollender Log-Tail. Kein Screenshot, kein Stock-Render, kein Produktvideo.

Diese Entscheidung wirkt nach unten durch. Ganz ohne Bilddateien ist das gesamte Seitengewicht Markup, und die visuelle Sprache muss aus der Struktur kommen — ein Radius von 14 Pixeln, ein Violett, eine dreistufige neutrale Rampe und sehr viel Zurückhaltung dabei, wann überhaupt etwas glühen darf.

02 · Die Idee

In Millisekunden antworten, und das in Millisekunden sagen

Für dieses Konzept habe ich mir Signalform als Unternehmen vorgestellt, dessen Versprechen lautet: jedes Signal auf einer Oberfläche, ohne Raterei. Die Site musste das vorführen statt es zu behaupten — das Interface musste also so erreichbar sein, wie Entwicklerinnen tatsächlich nach Dingen greifen: eine Befehlspalette auf ⌘K, Tabs, die ohne Seitenladen wechseln, und ein Preis-Umschalter, der eine Frage beantwortet statt ein Verkaufsformular zu öffnen.

Daraus kamen drei Entscheidungen, und der Rest des Builds ist diese drei, überall angewendet.

• Tastatur zuerst

  Eine echte Befehlspalette — Fokus im Inneren gehalten, solange sie offen ist, Navigation per Pfeiltasten, Zahlenkürzel und eine Scroll-Sperre — statt eines Suchfelds, das in ein Modal geworfen wurde.

• Das Produkt zeigen

  Vierzehn Inline-SVGs tragen das Dashboard, die Diagramme und jedes Kundenlogo. Nichts auf der Seite ist gerastert, und es gibt keine Bilddateien, die angefragt werden müssten.

• Dunkel, das lesbar bleibt

  Eine dreistufige neutrale Rampe, deren schwächstes Text-Token bei 5,72:1 auf dem Hintergrund und 5,23:1 auf den Panels festgesetzt ist, und beide Verhältnisse stehen im Stylesheet neben dem jeweiligen Wert.

03 · Ziele

Das Briefing, als Vorgaben

1. Wie das Produkt aussehen

   Derselbe Radius, derselbe Panel-Schatten und dieselbe Schriftskala wie die App, für die geworben wird, damit sich der Schritt von der Site zum Test nicht wie ein Adresswechsel anfühlt.

2. Keine Bilder ausliefern

   Null Fotografie und null Rasterdaten, damit die Seite im Konferenz-WLAN schnell und auf jedem Display, bei jedem Zoom, scharf ist.

3. Ohne Maus bedienbar sein

   Palette, Deep-Dive-Tabs, FAQ-Akkordeon und Preis-Umschalter allesamt von der Tastatur aus geführt, jedes mit dem ARIA-Zustand, der zu dem passt, was es tatsächlich tut.

4. Niemanden einsperren

   Das Overlay sperrt den Hintergrund-Scroll und lässt den Fokus zyklisch laufen, solange es offen ist — und gibt den Fokus in dem Moment, in dem es schließt, an den Auslöser zurück.

04 · Baureihenfolge

Gebaut in zehn nummerierten Modulen

Das Skript ist eine IIFE mit zehn nummerierten Blöcken, jeder in sich geschlossen und jeder so abgesichert, dass ein fehlendes Element ein No-op ist statt ein geworfener Fehler. Die Seite funktioniert mit jeder Teilmenge davon, und genau so wurde sie auch gebaut: ein Modul nach dem anderen, in dieser Reihenfolge.

1. Tokens und die neutrale Rampe

   Zweiundzwanzig Custom Properties: ein Hintergrund, zwei Flächen, eine abgesenkte Tönung, drei Textstärken, drei Violetttöne und vier Statusfarben, mit den Kontrastwerten in Kommentaren neben den Werten, die geprüft werden mussten.

2. Das gezeichnete Dashboard

   Chrome, Achsen, Serien und ein Log-Tail, von Hand ins Markup geschrieben statt exportiert, damit das Panel skaliert, den Tokens folgt und beim Download nichts kostet.

3. Layout an fünf Breakpoints

   Fünf Media Queries über 45,9 KB CSS. Das Bento- und das Preisraster sind auto-fit, sie brechen also um, ohne dass man es ihnen sagt.

4. Die Interaktionsmodule

   Kopfbereichszustand, mobile Navigation, versetzte Anker, Scroll-Reveals, das Cursorlicht im Bento, Hochzähler, Deep-Dive-Tabs, der Preis-Umschalter, das FAQ-Akkordeon und das abschließende Formular.

5. Die Befehlspalette, zuletzt

   Erst gebaut, als alles, wohin sie navigiert, schon existierte — ihr Index ist also die echte Seite und keine fest verdrahtete Liste, die beim ersten verschobenen Abschnitt auseinanderliefe.

05 · Architektur

Die Form der Sache

Die Site bildet die Pipeline des Produkts selbst ab und sagt das im Plattform-Abschnitt auch laut. Dieses Diagramm ist Inline-SVG, und jeder Verbinder darin deklariert eine pathLength von 100 — eine einzige scrollgeführte Custom Property zeichnet also alle vier über calc()-Fenster. Ein Schreibvorgang pro Frame, ein Diagramm.

Er ist mit 118,4 KB über drei Dateien der schwerste der zehn, und er hat trotzdem keinen Bundler, keine Abhängigkeit und keinen Build-Schritt. Der Browser ist die einzige Laufzeitumgebung, die er je gebraucht hat.

06 · Was sich gewehrt hat

Probleme, und was sie gelöst hat

1. Problem

   Den Hintergrund-Scroll für die Palette mit overflow: hidden zu sperren entfernt die Scrollbar, und die ganze Seite springt seitwärts, sobald das Overlay aufgeht.

   Lösung

   Die Scrollbar-Breite vor dem Sperren messen und sie als Polster auf demselben Element zurückgeben. Die Seite bewegt sich beim Öffnen wie beim Schließen um keinen Pixel.

2. Problem

   Ein von Hand gezeichnetes Dashboard muss von 360 px bis 2560 px lesbar bleiben, und eine einzige feste viewBox macht Sieben-Pixel-Beschriftungen je nach Ende entweder unleserlich oder riesig.

   Lösung

   Das Panel besteht aus mehreren kleinen SVGs in einem CSS-Grid statt aus einem großen. Das Chrome skaliert, die Schrift nicht: Jedes Diagramm behält sein eigenes Seitenverhältnis, und jede Beschriftung bleibt Dokumentschrift.

3. Problem

   Hochzählende Statistiken sind ein Klischee, das obendrein Barrierefreiheit bricht — die Zahl startet bei jedem Scroll-Durchgang neu, und assistive Technik sagt jeden Zwischenwert auf dem Weg an.

   Lösung

   Jeder Zähler feuert genau einmal, aus einem Observer, der sich selbst abmeldet, und unter prefers-reduced-motion setzt er den Endwert sofort, statt auf ihn hin zu animieren.

4. Problem

   Ankernavigation landet das Ziel unter dem mitlaufenden Kopfbereich — die Überschrift, die man gerade angeklickt hat, ist also das Einzige, was man nicht sieht.

   Lösung

   Ein gemeinsames scrollToTarget() zieht die gemessene Kopfhöhe ab und bewegt den Fokus zum Ziel, damit Tastatur- und Zeigernutzerinnen am selben Ort ankommen statt an zwei verschiedenen.

07 · Behaltenswert

Die Teile, die es wert sind zu bleiben

• ⌘K von überall

  Zu jedem Dienst, Trace oder Dashboard springen, von jedem Punkt der Seite aus, mit einer echten Fokusfalle, Pfeiltasten und Zahlenkürzeln.

• Das gezeichnete Dashboard

  Durchsatz, Fehlerrate, p95-Latenz, Ingest und ein scrollender Log-Tail — alles Markup, alles den Seiten-Tokens folgend, alles scharf bei jeder Pixeldichte.

• Deep-Dive-Tabs

  Traces, Alerts und Boards wechseln an Ort und Stelle, mit korrekt gehaltenem aria-selected und einem wandernden tabindex — der Tab-Streifen ist also eine Station und nicht drei.

• Preise, die antworten

  Ein Umschalter für monatlich und jährlich mit aria-pressed, der die Zahlen an Ort und Stelle neu schreibt, statt einer Taste, die ein Kontaktformular öffnet.

• Cursorlicht

  Ein Zeiger-Listener und zwei Custom Properties beleuchten sechs Bento-Karten. Auf groben Zeigern und unter reduzierter Bewegung ist es abgeschaltet.

• Statusfarbe, sparsam

  Cyan, Grün, Bernstein und Rot existieren nur dort, wo ein Zustand gemeldet wird. Nichts Dekoratives auf der Seite darf sich je eine Statusfarbe borgen.

08 · Live starten

Hier starten

Der echte Build, eingebettet und laufend — probier ⌘K, sobald er geladen ist. Es wird nichts davon geladen, bevor du es verlangst, die Seite, die du gerade liest, bleibt also so leicht, wie sie aussieht.

signalform.dev

Hier starten

Der echte Build, laufend in der Seite. Die Live-Vorschau ist eine eingebettete Seite. Drücke Escape, um sie zu verlassen.

Im Vollbild öffnen