Ein Wireframe mit echten Headlines ist eine vereinfachte Skizze einer Webseite, in der statt Blindtext bereits die tatsächlichen Überschriften, Kernsätze und Button-Texte stehen, damit du die Botschaft prüfen kannst, bevor Farben und Bilder dazukommen. Das klingt nach einem Detail im Ablauf. Es entscheidet aber, worüber in deinem Projekt gesprochen wird. Mit „Lorem ipsum“ im Entwurf wirkt eine Seite fertig, obwohl die wichtigste Frage noch offen ist: Was sagst du deinen Besuchern eigentlich?
Das Wichtigste in Kürze
- Blindtext schiebt die Arbeit an der Botschaft ans Ende des Projekts. Dort trifft jede Änderung ein Layout, das schon steht.
- Ins Wireframe gehören ausgeschriebene Hauptüberschrift, Unterzeile, Abschnittsüberschriften und Button-Texte. Fließtext darf als Stichpunkt stehen, Bilder als beschriebener Kasten.
- Die Reihenfolge der Abschnitte folgt den Fragen deiner Besucher, von „Bin ich hier richtig?“ bis „Was mache ich jetzt?“.
- Lies nur die Überschriften von oben nach unten. Ergeben sie zusammen eine verständliche Antwort, trägt das Wireframe.
- Überschriften, die du im Wireframe festlegst, helfen auch Google und KI-Suchen, deine Seite einzuordnen.
Warum wird Blindtext im Wireframe teuer?
Blindtext wird teuer, weil er Entscheidungen vorwegnimmt, die noch niemand getroffen hat. Das Layout legt fest, wie lang eine Überschrift sein darf, wie viele Abschnitte es gibt und in welcher Reihenfolge sie stehen. Kommen die echten Texte später, passen sie selten in diese Vorgaben. Dann wird entweder der Text gekürzt oder das Layout umgebaut.
Stell dir eine Startseite vor, auf der oben „Lorem ipsum dolor sit amet“ steht. Darunter drei gleich große Kästen mit je drei Zeilen Blindtext. Das sieht ordentlich aus und enthält doch schon eine ganze Reihe von Annahmen. Deine Hauptaussage passt in eine Zeile. Dein Angebot zerfällt in drei gleich wichtige Teile, und jeder davon braucht ungefähr gleich viel Erklärung. Geprüft hat das zu diesem Zeitpunkt niemand.
Im Artikel zum Website-Konzept haben wir beschrieben, wie sich mit Blindtext das Feedback verschiebt, weg von der Aussage und hin zu Abständen und Kästen. Für den Zeitplan hat das eine zweite Folge. Die Texte werden zur letzten offenen Aufgabe, und auf diese Aufgabe wartet dann das ganze Projekt. Design abgenommen, Technik fertig, Launch-Termin im Kalender, und auf der Startseite steht immer noch Latein.
In der Praxis sehen wir oft die Situation, dass der Kunde für die Texte einen weiteren Dienstleister mit ins Boot holt. Eine gute Idee, sich hier professionelle Unterstützung zu holen. Wichtig ist dabei drauf zu achten, dass dieser am Anfang des Projekts ausreichend Kapazität zusagt. Wir hatten auch schon Projekte, in denen der Dienstleister nur nebenbei am Wochenende für das Projekt arbeiten konnte und die Texte inklusive Kundenfeedback entsprechend schleppend geliefert wurden. In der Folge musste das Launch-Datum um drei Wochen verschoben werden.
Texte, die erst für ein fertiges Layout entstehen, werden außerdem auf Länge geschrieben. Die Frage beim Schreiben lautet dann „Was passt in drei Zeilen?“. Wichtiger wäre: „Was muss mein Kunde an dieser Stelle lesen, um weiterzumachen?“ Dem Ergebnis merkst du das an, auch wenn es gut aussieht.
Wie viel echter Text gehört in ein Wireframe?
In ein Wireframe gehören alle Sätze, die Besucher beim Überfliegen lesen: die Hauptüberschrift, die Unterzeile, jede Abschnittsüberschrift und jeder Button-Text. Fließtext darf als Stichpunkt stehen, Bilder als grauer Kasten mit einer Beschreibung, was darauf zu sehen sein soll. Ausformulieren musst du im Wireframe nur, was die Seite trägt.
Die Tabelle zeigt die Grenze am Beispiel einer angenommenen Physiotherapie-Praxis. Die Sätze sind ausgedacht, um das Prinzip zu zeigen, und stammen aus keinem Projekt.
| Element | Im Wireframe | Beispiel |
|---|---|---|
| Hauptüberschrift (H1) | ausgeschrieben | „Physiotherapie in Lüneburg, auch nach Feierabend“ |
| Unterzeile | ausgeschrieben | „Termine bis in den Abend, mit und ohne Rezept“ |
| Abschnittsüberschriften | ausgeschrieben | „Was passiert beim ersten Termin?“ |
| Button-Texte | ausgeschrieben | „Ersttermin anfragen“ |
| Fließtext | Stichpunkte | Ablauf Ersttermin: Gespräch, Befund, Behandlungsplan |
| Belege | benannt | zwei Patientenstimmen zu Rückenschmerzen |
| Bilder | beschriebener Kasten | Foto: Behandlungsraum mit Therapeutin, kein Stockfoto |
Die Belege-Zeile wird gern übersprungen. „Hier kommen Referenzen hin“ ist kein Inhalt. Benennst du schon im Wireframe, welche Stimme oder welches Projekt an dieser Stelle steht, merkst du früh, ob du den Beleg überhaupt hast. Fehlt er, ist das eine Aufgabe für die nächsten Wochen und keine Überraschung kurz vor dem Launch.
Das Wireframe legt fest, was auf der Seite steht und in welcher Reihenfolge. Den ausführlichen Text, wer ihn liefert und bis wann, regelt der Content-Plan. Die beiden greifen ineinander: Jeder Stichpunkt im Wireframe wird dort zu einer Zeile mit Namen und Termin.
Wie erstellst du ein Wireframe mit echten Headlines?
Du erstellst es in fünf Schritten: Ziel der Seite notieren, die Hauptaussage als Überschrift setzen, die Fragen deiner Besucher ordnen, jeden Abschnitt mit einer Antwort überschreiben und den nächsten Schritt als Button-Text ausschreiben. Papier oder ein einfaches Folienprogramm reichen dafür. Ein Design-Tool brauchst du in dieser Phase nicht.
Leg dir vorher bereit, was du schon erarbeitet hast:
- deine Seitenstruktur mit Ziel und nächstem Schritt pro Seite,
- deinen Botschaftssatz aus der Positionierung in einem Satz,
- die Kaufauslöser und Einwände aus der Arbeit an deinen Wunschkunden.
- Ziel und nächsten Schritt notieren. Ganz oben auf das Blatt kommt, was ein Besucher nach dieser Seite tun soll. Steht das in deiner Seitenstruktur noch nicht, fang dort an.
- Die Hauptaussage als H1 schreiben. Dein Botschaftssatz wird zur Überschrift ganz oben. Die Unterzeile ergänzt, was der Satz offenlässt, zum Beispiel für wen, wo oder in welcher Form. Schreib zwei oder drei Fassungen und entscheide erst im Test.
- Die Fragen deiner Besucher ordnen. Schreib auf Haftnotizen, was jemand wissen muss, bevor er Kontakt aufnimmt: Bin ich hier richtig? Was bekomme ich genau? Kann ich dem vertrauen? Was kostet mich der nächste Schritt? Deine Einwände gehören dazu. Leg die Zettel so, wie die Fragen im Kopf deiner Besucher nacheinander auftauchen.
- Jeden Abschnitt mit einer Antwort überschreiben. Aus der Frage nach Vertrauen wird nicht die Überschrift „Referenzen“, sondern eine Aussage wie „Was Patienten nach der Behandlung erzählen“. Darunter steht ein Satz, der die Antwort zusammenfasst, und ein Stichwort zum Beleg.
- Den Button-Text ausschreiben. „Absenden“ und „Mehr erfahren“ sagen nicht, was nach dem Klick passiert. „Ersttermin anfragen“ oder „Rückruf vereinbaren“ tun das. Der Button-Text ist oft der letzte Satz, den jemand liest, bevor er sich entscheidet.
Für Schritt 3 lohnt sich die meiste Zeit. Eine Überschrift schreibst du in einer Minute um. Ein Abschnitt an der falschen Stelle beantwortet eine Frage, die sich dein Besucher noch gar nicht gestellt hat, und die Frage, die ihn gerade beschäftigt, kommt erst drei Abschnitte später.
Unserer Erfahrung nach tun sich Kunden vor allem bei Schritt 3 schwer. Grund ist die falsche Perspektive. Kunden versuchen, die Fragen aus ihrer Sicht zu beantworten, statt sich in ihre Zielgruppe zu versetzen.
Woran erkennst du, ob dein Wireframe trägt?
Dein Wireframe trägt, wenn die Überschriften allein schon verständlich machen, was du anbietest, für wen und was der nächste Schritt ist. Prüfen kannst du das mit einem Headline-Test: Schreib alle Überschriften und Button-Texte der Seite untereinander, ohne Fließtext, und lies sie jemandem vor, der dein Angebot nicht kennt.
Der erste Blick auf ein Wireframe der neuen Startseite ist für den Kunden nicht immer einfach. Wir kündigen deshalb vorher an, was zu sehen sein wird: graue Kästen und echte Sätze, noch kein Design. Fehlt diese Ankündigung, erwartet die Kundin vielleicht schon einen Designentwurf, und die Phase kann schnell in Enttäuschung münden.
Such dir für den Test jemanden, der möglichst nah an deinen Kunden ist. Partner und Kollegen kennen dein Angebot zu gut und ergänzen beim Zuhören, was fehlt. Frag danach auch nicht, ob es gefällt. Diese drei Fragen bringen mehr:
- Was bietet diese Seite an?
- Für wen ist das gedacht?
- Was würdest du als Nächstes tun?
Weichen die Antworten von dem ab, was du sagen wolltest, liegt das Problem in der Aussage. Ein Layout, das du umbauen müsstest, gibt es zu diesem Zeitpunkt noch gar nicht.
Vor dem Test gehst du die Liste einmal selbst durch:
- H1 und Unterzeile sagen, was du anbietest und für wen.
- Jede Abschnittsüberschrift beantwortet eine Frage, statt nur ein Thema zu nennen wie „Leistungen“ oder „Über uns“.
- Der wichtigste Einwand kommt vor, bevor du um Kontakt bittest.
- Jeder Button-Text sagt, was nach dem Klick passiert.
- Keine Aussage steht zweimal auf der Seite.
Warum helfen echte Headlines auch bei Google und KI-Suchen?
Suchmaschinen und KI-Suchen nutzen Überschriften, um eine Seite zu gliedern und einzelne Abschnitte einer Frage zuzuordnen. Entstehen die Überschriften im Wireframe, planst du diese Gliederung bewusst. Kommen sie erst am Ende, werden sie oft in vorhandene Kästen eingepasst und benennen dann Themen, wo Antworten stehen könnten.
Eine Überschrift wie „Unsere Leistungen“ sagt einer Maschine so wenig wie einem Menschen. „Welche Behandlungen zahlt die Krankenkasse?“ ist eine Frage, die Menschen tatsächlich in eine Suche tippen, und der Abschnitt darunter kann sie direkt beantworten. Google erkennt daran, worum es in dem Abschnitt geht. Antwortmaschinen wie ChatGPT oder Perplexity greifen gern auf Abschnitte zurück, die für sich allein verständlich sind und eine klare Frage beantworten.
Im Wireframe legst du dafür zwei Dinge fest. Abschnittsüberschriften formulierst du dort als Frage oder klare Aussage, wo deine Besucher etwas Bestimmtes wissen wollen. Die Hierarchie entscheidest du gleich mit: eine H1 pro Seite, darunter H2 für die Abschnitte. Das kostet im Wireframe ein paar Minuten. Im fertigen Layout bedeutet dieselbe Korrektur oft, dass Kästen neu verteilt werden.
Eine Suchbegriff-Recherche ersetzen gute Überschriften nicht. Sie geben ihr aber einen festen Platz auf der Seite, statt dass Begriffe nachträglich in fertige Texte gestreut werden.
Häufige Fragen zu Wireframes mit echten Headlines
Was ist der Unterschied zwischen Wireframe, Mockup und Prototyp?
Ein Wireframe zeigt Aufbau und Inhalte einer Seite ohne Gestaltung, meist in Graustufen. Ein Mockup ist ein statischer Entwurf mit Farben, Schriften und Bildern, also so, wie die Seite später aussehen soll. Ein Prototyp ist klickbar und zeigt, wie Besucher sich durch die Seiten bewegen. Echte Headlines gehören schon in die erste Stufe, weil die beiden anderen auf ihr aufbauen.
Brauche ich ein Tool, um ein Wireframe zu erstellen?
Für ein erstes Wireframe reicht ein Blatt Papier im Hochformat, auf dem du Kästen von oben nach unten zeichnest und beschriftest. Digitale Werkzeuge wie Figma helfen, wenn mehrere Personen am Entwurf arbeiten oder du ihn als Vorlage an die Gestaltung weitergibst. Ob die Seite funktioniert, entscheidet sich an den Sätzen in den Kästen, nicht am Werkzeug, mit dem du sie zeichnest.
Wer schreibt die Headlines, wenn ich kein Texter bin?
Die erste Fassung schreibst du am besten selbst, weil niemand die Fragen deiner Kunden so gut kennt wie du. Nimm deine Notizen aus Kundengesprächen und übernimm Formulierungen, die deine Kunden selbst benutzen. Eine Texterin oder Agentur kann danach schärfen, kürzen und vereinheitlichen, wenn sie vorher zusagt, dass sie dafür genügend Zeit hat. Eine vorhandene Headline zu verbessern, fällt ihr deutlich leichter, als eine aus dem Nichts zu erfinden.
Braucht jede Unterseite ein eigenes Wireframe?
Ein Wireframe lohnt sich vor allem für Seiten, die Besucher zu einer Entscheidung führen: die Startseite, die wichtigsten Leistungsseiten und gegebenenfalls eine Landingpage. Impressum, Datenschutz oder Blogbeiträge folgen einer festen Vorlage. Fang mit der Startseite an. Ihre Abschnitte zeigen dir oft schon, wie die Leistungsseiten aufgebaut sein sollten.
Fazit
Ein Wireframe mit echten Headlines holt die schwierigste Frage deines Webprojekts nach vorn: was du deinen Besuchern sagst und in welcher Reihenfolge. Solange die Seite aus grauen Kästen besteht, kostet jede Änderung ein paar Minuten statt eines Umbaus. Nimm dir heute deine Startseite vor, schreib alle Überschriften und Button-Texte untereinander auf ein Blatt und lies sie jemandem vor, der dein Angebot nicht kennt. Willst du danach eine zweite Meinung zu deiner bestehenden Seite, schauen wir sie uns im kostenlosen Website-Check an und sagen dir per Video, wo sie Anfragen verliert.
