Signal
Eine dashboard-getriebene Marketing-Website für eine Observability-Plattform, die Metriken, Logs und Traces zu einer einzigen Fix-it-fast-Story verbindet.
Das Konzept
Die Aufgabe. Signal brauchte eine Marketing-Website, die fließend mit erfahrenen Engineers spricht, nicht mit dem Einkauf. Ziel war es, visuell und in Sekunden zu beweisen, dass das Zusammenführen von Metriken, Logs und Traces die Mean-Time-to-Resolution verkürzt — ohne den üblichen generischen SaaS-Hochglanz.
Der Ansatz. Wir haben eine dunkle Slate-Fläche mit einem Akzent von Lime zu Sky gestaltet und alles in IBM Plex Sans und IBM Plex Mono gesetzt, sodass die Typografie selbst wie eine Konsole liest. Die Seite ist dashboard-getrieben: ein Live-Service-Überblick, ein Flame-Graph für verteilte Traces, ein Split aus Alerts und Live-Logs sowie eine Incident-Response-Timeline tragen jeweils eine konkrete Aussage statt reiner Werbefloskeln.
Warum es funktioniert. Engineers vertrauen dem, was sie direkt vom Bildschirm ablesen können, und jeder Abschnitt zeigt hier die echte Produktoberfläche bei echter Arbeit. Die Monospace-Details und die zurückhaltende Akzentpalette signalisieren Präzision, während die Timeline von Detect bis Review ein abstraktes Nutzenversprechen in eine Story verwandelt, die jedes On-Call-Team sofort wiedererkennt.
Ein genauerer Blick auf die Details
Trace-Wasserfall
Ein Flame-Graph für verteilte Traces macht den langsamen Span über alle Services hinweg auf einen Blick sichtbar.
- Latenz pro Span
- Hervorgehobener Timeout-Span
- Ein Klick zu den Logs
Alerts treffen Live-Logs
Ein geteiltes Panel verbindet priorisierte, entrauschte Alerts mit einem Live-Log-Stream des betroffenen Service.
- Priorisiertes Alert-Routing
- Live-Streaming der Logs
- Farbcodierte Log-Level
Incident-Timeline
Eine vierstufige Timeline führt Teams von Detect bis Review, mit verstrichener Zeit pro Phase.
- Von Detect bis Entwarnung
- Zeitgestempelte Phasen
- Automatischer Post-Mortem-Entwurf
Desktop-Ansicht
Im Rahmen scrollen, um die ganze Seite zu sehen ↑
Auf dem Smartphone
Jedes Konzept ist mobil-first gedacht und passt sich sauber jeder Bildschirmgröße an.
Konzeptdesigns mit fiktiven Marken, erstellt um unsere Gestaltung & Umsetzung zu zeigen — keine bezahlten Kundenprojekte. Fotos via Pexels.