Wireframes für Copywriter: Warum du ohne visuelle Struktur schlechte Texte schreibst

Wireframes zeigen Copywritern, wo Texte stehen und wie viel Platz sie haben, bevor eine Zeile geschrieben ist. Wer ein Wireframe liest, bevor er schreibt, weiß, welche Botschaft in den Hero-Bereich passt, wo ein kurzer CTA reicht und wo ausführlichere Erklärungen hingehören. Das verhindert Texte, die im Vakuum gut klingen, auf der Seite aber nicht funktionieren.

Das Wichtigste in Kürze

• Lies das Wireframe, bevor du den ersten Satz schreibst – Platz und Hierarchie bestimmen, was du formulieren kannst.
• Textlänge, Zeichenlimit und visuelle Gewichtung sind keine Designfragen, sondern Schreibbedingungen.
• Mobile-First gilt für Texte genauso wie für Layouts: Der wichtigste Satz muss auf dem kleinsten Bildschirm funktionieren.
• Wireframes zeigen nicht nur, wo Text steht, sondern auch, womit er im selben Sichtfeld um Aufmerksamkeit konkurriert.

Der Textplatz ist keine Detailfrage

Copywriting und Layout werden oft getrennt bearbeitet: Der Texter schreibt, der Designer gestaltet, und am Ende wird zusammengesetzt, was sich zusammensetzen lässt. Dieses Vorgehen funktioniert für einfache Textseiten. Auf jeder Seite mit visueller Hierarchie – Landingpages, E-Mail-Templates, Formularseiten – entstehen dabei Texte, die nicht für den tatsächlichen Kontext geschrieben sind.

Ein Hero-Bereich hat physischen Platz für etwa dreißig bis fünfzig Zeichen Headline, wenn er Mobile-First ausgelegt ist. Eine 80-Zeichen-Headline ist nicht einfach zu lang – sie zerschneidet den visuellen Eindruck, wechselt den Zeilenumbruch an einer ungewollten Stelle und untergräbt die Wirkung, die die Zeile haben soll. Dasselbe gilt für Sublines, die mit einem dominanten Video-Testimonial konkurrieren, ohne dass der Texter das Video beim Schreiben im Blick hatte.

Wireframes lösen dieses Problem, indem sie den Kontext sichtbar machen, bevor ein Wort steht. Sie zeigen nicht, wie eine Seite später aussieht, sondern was sie tragen soll: welche Bereiche die stärkste visuelle Aufmerksamkeit ziehen, wie die Informationsarchitektur aufgebaut ist und wo der Leser beim Scrollen inne hält. Für Copywriter ist das Wireframe deshalb kein Blick in den Designprozess – es ist der Ausgangspunkt des eigenen Prozesses.

Wer ohne Wireframe schreibt, schreibt für eine hypothetische Seite. Wer mit Wireframe schreibt, schreibt für die tatsächliche Seite. Der Unterschied klingt banal, hat in der Praxis aber Konsequenzen: Textentwürfe, die im Nachhinein ans Layout angepasst werden müssen, verlieren meistens an Präzision. Der Originaltext war für einen anderen Platz gedacht, und das merkt man ihm an.

Was ein Wireframe dem Copywriter konkret verrät

Platz und Zeichenlimit

Jede Box in einem Wireframe definiert eine Textregion mit implizitem Zeichenlimit. Im Header einer typischen B2B-Landingpage gilt: Headline 40–55 Zeichen, Subline 80–100 Zeichen, CTA-Button 15–25 Zeichen. Diese Limits sind keine Empfehlung des Designers – sie folgen daraus, wie viel Text in einem bestimmten Font, auf einer bestimmten Bildschirmbreite, bei einem bestimmten Zeilenabstand lesbar bleibt. Ein Wireframe macht diese Grenzen sichtbar, auch wenn er selbst keine Buchstaben enthält.

Wer das Wireframe vor dem Schreiben liest, kann Textversionen direkt auf Länge optimieren, anstatt im Nachhinein zu kürzen und dabei Bedeutung zu verlieren. Das ist ein Unterschied in der Arbeitsweise: Kürzen nach dem Schreiben erzeugt meistens Text, der unvollständig wirkt. Schreiben auf ein bekanntes Limit erzeugt Text, der präzise wirkt.

In der Praxis sehen wir bei Advertal regelmäßig, dass dieser Schritt fehlt: Texte kommen mit dem Hinweis an, sie seien bereits fertig, und müssen dann auf die Hälfte reduziert werden, weil der Hero-Bereich nur Platz für einen prägnanten Satz hat. Das ist nicht nur Mehrarbeit – es erzeugt meistens einen schwächeren Text, weil der Texter beim Kürzen Kompromisse macht, die er beim Schreiben nicht hätte machen müssen.

Visuelle Hierarchie

Ein Wireframe zeigt, in welcher Reihenfolge der Blick des Lesers wandert. Große Flächen, die sich oben und links befinden, werden zuerst wahrgenommen. Kleine Flächen, die sich am unteren Seitenrand oder in einer Sidebar befinden, werden als letztes gelesen – oder gar nicht. Copy-Hierarchie und visuelle Hierarchie müssen deckungsgleich sein.

Das bedeutet konkret: Die wichtigste Botschaft gehört in den visuell stärksten Bereich. Was das Angebot in einem Satz zusammenfasst, gehört in den Hero. Was erklärt, warum das Angebot das richtige ist, gehört in den Content-Bereich darunter. Was Einwände ausräumt, gehört vor den finalen CTA. Wer ohne Wireframe schreibt, setzt diese Hierarchie aus dem Bauchgefühl – und trifft sie regelmäßig nicht, weil das Layout des Designers andere Schwerpunkte setzt als erwartet.

Besonders deutlich wird das bei mehrstufigen Layouts, die auf dem Desktop und dem Smartphone unterschiedliche visuelle Gewichtungen erzeugen. Was auf dem Desktop neben einem Bild steht und damit optisch zurücktritt, erscheint auf dem Smartphone direkt nach dem Bild und bekommt dadurch eine neue Prominenz. Das verändert, was der Text an dieser Stelle leisten muss.

Konkurrierende Elemente im gleichen Sichtfeld

Wireframes zeigen, was neben und um einen Text herum steht. Ein Zitat mit Autorenbild neben dem Haupttext verändert, wie lang dieser Text sein darf, bevor die Seite überladen wirkt. Ein Formular im Sichtfeld neben dem erklärenden Text verändert, wie direkt und kurz der Text sein muss, damit er das Formular nicht verdrängt. Ein Erklärvideo im Hero macht eine lange Subline überflüssig, weil das Video die Erklärung übernimmt.

Diese Interaktionen sind nicht intuitiv – sie werden sichtbar, wenn man das Wireframe als Ganzes betrachtet. Für Copywriter ist das die wertvollste Information: nicht nur zu wissen, wie viel Platz ein Text hat, sondern auch, was dieser Text leisten muss und was andere Elemente bereits erledigen.

So liest du ein Wireframe als Copywriter – Schritt für Schritt

Dieser Prozess lässt sich auf jede Projektart anwenden, vom einfachen E-Mail-Template bis zur mehrstufigen Landingpage-Serie.

1. Gesamtansicht verschaffen: Betrachte das Wireframe zuerst ohne zu zoomen. Welche drei Bereiche fallen sofort auf? Das sind die Bereiche mit der stärksten visuellen Priorität – dort muss deine wichtigste Botschaft stehen.
2. Alle Textbereiche identifizieren: Markiere jede Box oder Region, die Text enthalten wird. Unterscheide dabei zwischen Headline-Feldern, Fließtext-Feldern, Button-Beschriftungen und Formularfeldern – jede hat eigene Anforderungen an Länge und Tonlage.
3. Zeichenlimits schätzen oder erfragen: Wenn Limits nicht angegeben sind, frag den Designer oder schätze anhand der Box-Breite. Als Faustregel gilt: Eine Textbox mit 300 Pixel Breite trägt bei 16 Pixel Schriftgröße etwa 40 bis 50 Zeichen pro Zeile. Wie viele Zeilen sind sichtbar, bevor die Box abgeschnitten wird?
4. Mobile-Version prüfen: Wechsle zur Mobile-Ansicht des Wireframes. Was fällt weg, was stapelt sich, was verschiebt sich? Schreib zunächst für die Mobile-Ansicht. Text, der auf 375 Pixel Breite funktioniert, funktioniert fast immer auch auf 1440 Pixel. Umgekehrt gilt das nicht.
5. Informationshierarchie bestimmen: Nummeriere die Textbereiche von eins bis n nach ihrer visuellen Priorität. Schreib in dieser Reihenfolge – die wichtigste Botschaft zuerst, nicht die einfachste.
6. Entwurfstext ins Wireframe eintragen: Trag deinen Text direkt in das Wireframe-Dokument ein, wenn der Designer das erlaubt, oder leg einen Screenshot mit Text-Overlays an. Erst wenn du siehst, wie der Text im Layout wirkt, erkennst du, ob Länge und Tonlage stimmen.
7. Abstimmung mit dem Designer: Zeig den eingesetzten Text dem Designer, bevor das Layout finalisiert wird. Oft ergeben sich aus dem eingesetzten Text neue Layoutfragen – ein kürzer gewordener Headline-Block verändert die Proportionen der Seite.

Wireframes in ActiveCampaign-Projekten anwenden

In der Arbeit mit ActiveCampaign entstehen regelmäßig Textanforderungen, die ohne Wireframe-Grundlage zu Problemen führen: zu lange Betreffzeilen, Landingpages mit zu viel erklärendem Text vor dem Formular, E-Mail-Templates mit Bodycopy, die auf dem Smartphone nicht lesbar ist.

E-Mail-Templates strukturieren

ActiveCampaign-Templates sind auf eine bestimmte Breite ausgelegt, und der sichtbare Teil eines E-Mails hängt vom E-Mail-Client des Empfängers ab. Betreffzeile und Preheader sind die ersten Textelemente, die jemand sieht – und sie erscheinen nicht im Template selbst, sondern im Posteingang. Das Wireframe für eine E-Mail zeigt deshalb zwei Ebenen: die Inbox-Ansicht mit Absender, Betreff und Preheader sowie das geöffnete Template mit Header, Body und CTA.

Für die Inbox-Ansicht gilt: Betreffzeilen, die auf dem Smartphone vollständig lesbar sein sollen, kommen mit etwa 40 bis 50 Zeichen aus. Alles darüber wird abhängig vom E-Mail-Client abgeschnitten. Der Preheader ergänzt den Betreff, er wiederholt ihn nicht. Ein Wireframe, das beide Zeilen nebeneinander zeigt, macht sofort sichtbar, wenn Betreff und Preheader sich inhaltlich doppeln.

Im Template-Body bestimmt die Spaltenstruktur, wie langer Fließtext wirkt. Ein einspaltig aufgebautes Template trägt mehr Text, ohne unruhig zu wirken, als ein zweispaltiges Layout. Wer in einem zweispaltigen Template denselben Textumfang einsetzt, bekommt Spalten, die kürzer sind als angenehm zu lesen – und muss entweder kürzen oder das Layout anpassen.

Opt-in-Landingpages aufbauen

Opt-in-Seiten haben eine klare Aufgabe: den Besucher zur Formulareingabe zu bewegen. Das Wireframe zeigt, wie viel Erklärtext vor dem Formular steht und wie das Formular selbst beschriftet ist. Beide Fragen sind Copywriting-Fragen, keine Designfragen.

Wenn das Wireframe zeigt, dass das Formular bereits im ersten Sichtbereich steht, braucht der erklärende Text vor dem Formular keine fünf Absätze. Er braucht einen präzisen Satz, der das Angebot benennt, und einen zweiten Satz, der die wichtigste Erwartung des Besuchers aufgreift. Was das Angebot im Detail bedeutet, kann unterhalb des Formulars stehen – für die Besucher, die nach dem Absenden noch lesen.

Dasselbe gilt für die Formularfelder selbst. Feldbezeichnungen und Placeholder-Texte sind Copywriting. Ein Wireframe zeigt, wie viele Felder das Formular hat und wie sie angeordnet sind. Wer das weiß, kann Placeholder-Texte schreiben, die den Ausfüllprozess erleichtern, statt ihn nur zu beschriften.

Mehrstufige Funnel-Seiten koordinieren

Webinar-Registrierungen, Produkt-Onboardings oder Lead-Magnet-Strecken bestehen aus mehreren aufeinanderfolgenden Seiten. Jede Seite hat ein eigenes Wireframe. Die Copywriting-Herausforderung besteht darin, sicherzustellen, dass die Botschaft von Seite zu Seite konsistent weitergeführt wird, ohne sich auf jeder Seite neu einzuführen.

Wer alle Wireframes einer Funnel-Strecke nebeneinander betrachtet, sieht den Informationsfluss. Was auf Seite eins erklärt wurde, muss auf Seite zwei nicht wiederholt werden. Was auf Seite zwei eine neue Frage aufwirft, muss auf Seite drei beantwortet sein. Diese Logik lässt sich ohne die Gesamtansicht der Wireframes kaum abstimmen.

Typische Fehler beim wireframe-gestützten Copywriting

Nur die Desktop-Version wird gelesen

Viele Wireframes werden primär für Desktop-Breiten erstellt. Wer nur diese Version analysiert, schreibt für die Bildschirmgröße, auf der Texte verhältnismäßig viel Platz haben. Auf Smartphones stapeln sich Zweispalter, komprimieren sich Abstände und verschwinden manche Elemente ganz. Wenn das Wireframe eine Mobile-Version enthält, muss sie gelesen und bewertet werden, bevor der erste Satz steht.

Das Wireframe wird als fertiges Layout missverstanden

Ein Wireframe ist ein Strukturvorschlag, kein finales Layout. Boxen können noch verschoben werden, Elemente können entfallen, Proportionen können sich ändern. Wer Texte strikt auf ein Wireframe hin schreibt, das sich noch im Entwurfsstadium befindet, arbeitet auf einer Grundlage, die sich möglicherweise noch ändert. Bevor du anfängst, kläre, welchen Freigabestatus das vorliegende Wireframe hat – Exploration, Entwurf oder freigegebene Basis für die Entwicklung.

Interaktive Zustände werden nicht berücksichtigt

Buttons haben Hover-Zustände, Formulare haben Fehlermeldungen, Akkordeons haben geöffnete und geschlossene Zustände. In jedem dieser Zustände kann Text erscheinen. Wer nur den Grundzustand des Wireframes liest, übersieht diese Textanforderungen. Fehlermeldungen in Formularen sind eines der häufigsten Versäumnisse: Sie werden oft erst dann geschrieben, wenn das Formular technisch fertig ist – dabei ist ihr Ton und ihre Präzision direkt entscheidend dafür, ob ein Nutzer das Formular korrigiert oder abbricht.

Platzhaltertexte bleiben im Wireframe stehen

Wireframes enthalten oft Lorem-ipsum-Passagen oder grobe Platzhalter. Wenn Copywriting-Entwürfe direkt in Wireframes eingetragen werden, passiert es gelegentlich, dass Platzhalter in einer Randregion stehenbleiben und erst im fertigen Design auffallen. Wer Textentwürfe ins Wireframe einträgt, sollte alle Textbereiche vollständig befüllen und ausdrücklich bestätigen, dass keine Platzhalter mehr offen sind.

Wann Wireframes für das Copywriting nicht ausreichen

Wireframes zeigen Struktur und Platz – sie zeigen nicht, welchen Ton eine Marke hat, welche Botschaft die richtige ist oder wie die Zielgruppe auf unterschiedliche Formulierungen reagiert. Diese Fragen klärt die inhaltliche Strategie, nicht das Wireframe.

Für Texte, bei denen die Botschaft selbst im Mittelpunkt steht – ein Werbebrief, eine Kampagnen-E-Mail, ein Fachartikel –, ist das Wireframe weniger relevant als die inhaltliche Ausrichtung. Hier ist die Botschaft das Erste, die Struktur das Zweite. Umgekehrt gilt: Wenn Texte in ein vorgegebenes Layout eingesetzt werden müssen, ist die Struktur das Erste. Beide Fälle kommen in einem ActiveCampaign-Projekt vor – je nach Seite und Funktion des Texts.

Wireframes ersetzen außerdem nicht die Zielgruppenanalyse. Wer nicht weiß, was der Leser erwartet, weiß auch mit Wireframe nicht, welchen Text er in die Hero-Box schreiben soll. Das Wireframe beantwortet, wie viel Platz der Text hat. Die Analyse beantwortet, was in diesem Platz stehen muss. Beide Schritte sind notwendig, keiner ersetzt den anderen.

Häufige Fragen

Muss ich als Copywriter selbst Wireframes erstellen können?

Nein. Das Erstellen von Wireframes ist eine Designdisziplin und gehört nicht zum Kernhandwerk des Copywriters. Was du können musst, ist ein vorhandenes Wireframe zu lesen: Textbereiche identifizieren, Zeichenlimits schätzen und die visuelle Hierarchie verstehen. Diese Kompetenz lässt sich einüben, wenn du konsequent damit anfängst, Wireframes vor dem Schreiben zu analysieren statt sie als reines Designdokument zu betrachten.

Was tue ich, wenn mir kein Wireframe geliefert wird?

Frag danach, bevor du schreibst. In vielen Projekten existiert ein Wireframe, wird aber nicht an alle Beteiligten weitergegeben, weil es als internes Designdokument gilt. Ein konkreter Hinweis darauf, warum du als Texter das Wireframe brauchst – Zeichenlimits, Hierarchie, Mobile-Layout –, macht die Anfrage nachvollziehbar. Wenn kein Wireframe vorhanden ist, bitte um eine Skizze der Seitenstruktur oder um die Information, welches bestehende Template als Vorlage dient.

Wie gehe ich mit Wireframes um, die sich noch ändern?

Kläre zuerst den Freigabestatus. Ein Wireframe im Explorationsstadium ist eine schlechte Grundlage für finalen Text. Wenn du früh im Prozess schreiben musst, schreib mehrere Textvarianten für unterschiedliche mögliche Layouts und kennzeichne sie entsprechend. Das ist aufwendiger, verhindert aber, dass du bei einer Layoutänderung von vorne anfangen musst und dabei Kompromisse eingehst, die du in einem späteren Schritt nicht mehr auflösen kannst.

Wie lange dauert die Wireframe-Analyse, bevor ich schreiben kann?

Bei einem einfachen einseitigen Layout – eine Landingpage, ein E-Mail-Template – sind zwanzig bis dreißig Minuten ausreichend, um alle Textbereiche zu identifizieren, Limits zu notieren und die Hierarchie zu verstehen. Bei einem mehrstufigen Funnel mit fünf oder mehr Seiten kann die Analyse einen halben Arbeitstag in Anspruch nehmen. Diese Zeit ist keine Vorbereitung auf das eigentliche Arbeiten – sie ist das eigentliche Arbeiten. Texte, die ohne diese Analyse geschrieben werden, müssen nach dem ersten Layout-Test meistens überarbeitet werden.

Eignet sich der ActiveCampaign-Builder als Wireframing-Tool?

Der ActiveCampaign-Drag-and-Drop-Builder eignet sich für fertige Templates, nicht für Strukturentwürfe. Wenn du die Struktur einer E-Mail-Serie oder einer Landingpage-Vorlage planen willst, bevor du textest, ist ein einfaches Skizzentool wie Figma oder auch eine Handskizze auf Papier sinnvoller. Der Builder zeigt dir, wie der Text im fertigen Template aussieht – das ist nützlich für die finale Prüfung, nicht für die Planung, weil er keine freie Strukturvariante zulässt, ohne gleichzeitig Design-Entscheidungen zu erzwingen.

Wer Wireframes konsequent in seinen Copywriting-Prozess integriert, schreibt von Beginn an für den tatsächlichen Kontext – nicht für eine abstrakte Seite ohne Maße. Das reduziert Schleifen zwischen Textentwurf und Layout erheblich. Für Projekte mit ActiveCampaign, bei denen Templates, Landingpages und Formulare aufeinander abgestimmt sein müssen, ist dieser Schritt besonders lohnend. Wer dabei Unterstützung beim Aufbau durchdachter E-Mail- und Funnel-Strukturen sucht, findet im ActiveCampaign-Kurs von Advertal konkrete Anleitungen für Templates und Seitenaufbau.