B2B SaaS Website Design: Webdesign für eine Link-Building-Plattform

Dieses Projekt ist B2B SaaS Website Design für Pressmerit, eine Digital-PR- und Partnerschaftsplattform für Link Building. Die Software liest Ihre Website, durchsucht das offene Web nach Publishern, die eine Anfrage wert sind, bewertet jeden Kandidaten, findet einen verifizierten Kontakt und schreibt den Pitch. Verschickt wird aus dem eigenen Postfach. Geht der Link live, verifiziert die Plattform ihn und prüft ihn alle 30 Tage erneut.

Wir haben die Marketing-Website komplett übernommen: Positionierung, Informationsarchitektur, visuelles System, die Interface-Fragmente auf allen Seiten, die Texte und die technische SEO-Ebene. Dreizehn Seiten, eine Sprache, umgesetzt mit Next.js und auf Vercel ausgeliefert.

Das Briefing hatte eine harte Vorgabe. Link Building ist eine Kategorie, in der Käufer schlechte Erfahrungen gemacht haben, also durfte die Seite nicht so verkaufen, wie in dieser Kategorie üblich verkauft wird. Jede Aussage musste ihren Beleg mitbringen, und jeder Preis musste auf der Seite stehen, bevor sich jemand registriert. Die allgemeine Version dieses Arguments steht in unserem Leitfaden zur Startup-Website.

Drei Probleme kamen gleichzeitig.

Das Produkt ist eine Pipeline, kein Feature. Analysieren, entdecken, pitchen, senden, verifizieren. Es als Feature-Liste zu erklären hätte den Kern verfehlt: Die Plattform macht die Arbeit und stoppt genau bei den zwei Entscheidungen, die ein Mensch treffen sollte.

Es gab keine Screenshots. Das Produkt war vor dem Launch, und echte Kundendaten gehören ohnehin nicht auf eine Marketing-Seite. Generische Dashboard-Mockups hätten genau danach ausgesehen.

Und die Seite hatte zwei Zielgruppen, die sich nie überschneiden. SEO-Käufer, die ein 49-Dollar-Abo bewerten, und Publisher, die eine Outreach-Mail bekommen haben und wissen wollen, wer ihnen schreibt, bevor sie antworten. Nur die erste zu bedienen hätte den Ruf des Produkts bei der zweiten still beschädigt, und solche Schäden zeigen sich erst Monate später in den Antwortquoten.

Unsere Preispläne zeigen, wie wir solche Projekte kalkulieren.

Die Pipeline gab die Struktur vor. Die Startseite führt durch die fünf Schritte von der Domain bis zum verifizierten Live-Link und markiert die zwei, bei denen der Nutzer handelt. Eine Langform-Seite fächert dieselbe Pipeline in acht Stufen mit je einem Anker auf, inklusive der Teile, die die Plattform nicht leisten kann. Alles andere auf der Seite hängt an einer Stufe, die Navigation ist also eine Karte des Produkts und keine Liste von Abteilungen.

Statt Screenshots haben wir das Interface als Fragmente in Code nachgebaut: eine Analysekarte mit den Komponenten des Domain Score, eine bewertete Prospect-Liste, ein verifizierter Kontakt mit Confidence-Wert, ein geschriebener Pitch, eine Monitoring-Timeline. Jedes Fragment nutzt Beispieldaten fiktiver Websites und sagt das in der Bildunterschrift. Sie bestehen aus Text und CSS, bleiben also in jeder Auflösung scharf, kosten kaum Ladezeit und lassen sich anpassen, wenn sich das Produkt ändert.

Die Preise stehen vollständig auf der Seite. Der Plan, die komplette Credit-Tabelle pro Aktion, ein durchgerechnetes Monatsbeispiel und ein Rechner, der dieselbe Arithmetik verwendet wie die Tabelle darüber. Nichts wird für ein Vertriebsgespräch zurückgehalten, denn es gibt keins.

Die Publisher-Seite bekam eigene Seiten. Eine erklärt, was eine Kooperationsanfrage ist und was ihre drei Buttons tun, eine beantwortet, warum jemand die E-Mail bekommen hat, und eine dokumentiert den Verifikations-Crawler mit User-Agent und Zeitplan. Sie existieren, um aus der Outreach-Mail heraus verlinkt zu werden, denn dort wird die Vertrauensfrage tatsächlich gestellt.

Das visuelle System ist redaktionell statt SaaS-generisch: eine Serifenschrift für Überschriften, Monospace für Labels, Daten und Interface-Elemente, dazu ein einziger warmer Akzent. Die Interface-Fragmente lesen sich als Interface, der Fließtext als Fließtext, und beide konkurrieren nie um Aufmerksamkeit. Diese Trennung leistet mehr, als sie aussieht, denn sie hält eine lange Seite scannbar, ganz ohne dekorative Illustrationen.

Vier Seiten der Live-Website, von denen jede einen anderen Teil der B2B-Webdesign-Aufgabe löst.

Die Seite startete mit 100 für Performance, Barrierefreiheit, Best Practices und SEO im Desktop-Lighthouse. Largest Contentful Paint bei 0,5s, kein Layout-Shift, keine Total Blocking Time. Mobil liegt die Performance bei 96, die anderen drei Kategorien bleiben bei 100.

Diese Werte stammen aus derselben Entscheidung, die auch das Design geprägt hat. Weil die Interface-Fragmente Markup statt Bilder sind, kosten die schwersten visuellen Elemente der Seite ein paar Kilobyte HTML. Es gab also kein Bildbudget, das man später hätte optimieren müssen. Die meiste Performance-Arbeit auf einer Marketing-Website ist in Wahrheit eine Designentscheidung, die früher gefallen ist, wie auch Googles Core Web Vitals immer wieder zeigen.

Jede Seite wird serverseitig gerendert, trägt Organization-, WebSite-, SoftwareApplication- und FAQPage-Strukturdaten und taucht mit einer Zeile Zusammenfassung im llms.txt-Index auf. Die FAQ-Blöcke sind als Fragen geschrieben, die Menschen tatsächlich eintippen, und genau das macht sie für KI-Suchmaschinen ebenso nutzbar wie für Google.

Die Publisher-Seiten haben etwas bewirkt, das wir so nicht erwartet hatten. Sie machen aus der Outreach-Mail ein beidseitiges Dokument. Wer eine Anfrage erhält, kann nachlesen, wer fragt, was die Plattform ist und wie man sich abmeldet, ohne Account und ohne vorher zu antworten.

Lighthouse-Audits zum Launch, Desktop und Mobil.

Sechs Entscheidungen aus diesem Projekt lassen sich auf fast jedes B2B SaaS Website Design übertragen, unabhängig davon, was das Produkt tut.

Lassen Sie das Produkt die Seitenreihenfolge bestimmen. Wenn die Software eine Abfolge ausführt, sollte die Seite dieselbe Abfolge zeigen. Ein Feature-Raster verlangt vom Besucher, sich die Geschichte selbst zusammenzusetzen, und die meisten machen sich diese Mühe nicht.

Bringen Sie das Interface als Markup auf die Seite. Nachgebaute UI-Fragmente schlagen sowohl generische Mockups als auch echte Screenshots. Sie laden schneller, überleben ein Produkt-Redesign, und Beispieldaten lassen sich ehrlich kennzeichnen, statt einen Kundenstamm zu suggerieren, den es noch nicht gibt.

Veröffentlichen Sie die Preise. Bei allem, was Self-Service ist, ist die Preisseite das Verkaufsgespräch. Zeigen Sie die Stückkosten und lassen Sie den Besucher rechnen, bevor er sich registriert.

Schreiben Sie die Grenzen auf. Zu sagen, was das Produkt nicht kann, ist das günstigste Vertrauenssignal überhaupt, und es filtert die Leads heraus, die in Woche drei ohnehin abgesprungen wären.

Geben Sie der zweiten Zielgruppe eigene Seiten. Die meisten B2B-SaaS-Produkte berühren jemanden außer dem Käufer: einen Freigebenden, einen Partner, einen Empfänger. Diese Menschen sind eine Suche von Ihrer Website entfernt, und eine Seite, die für sie geschrieben ist, schützt den Ruf des Produkts.

Behandeln Sie Performance als Designentscheidung. Markup statt Bilddateien zu wählen, hat den Lighthouse-Wert von 100 erzeugt, nicht eine Optimierungsrunde am Ende. Wie wir die Designphase führen, steht unter UX/UI Design, und die Struktur größerer Websites behandelt unser Bereich Unternehmenswebsites.