Die meisten Website-Projekte starten mit der falschen Frage: “Wie soll das aussehen?” statt “Was muss der Besucher in welcher Reihenfolge sehen?”.
Ein Wireframe beantwortet die zweite Frage. Er ist eine grobe Skizze der Seite: Kästen, Linien, Platzhalter-Text, keine Farben, keine Bilder, kein Logo. Genau diese Kargheit ist der Zweck.
Du brauchst dafür kein Programm und keine Design-Ausbildung. Papier und ein Stift reichen.
Ein Rahmensatz vorweg, damit du weißt, worauf du dich stützt: Das meiste in dieser Lektion ist Handwerkskonvention, keine Naturgesetze. Wo eine Regel aus echter Forschung stammt, steht es dabei – der Rest ist bewährte Praxis, die du an deine Seite anpassen darfst.
Kurzantwort
Was ist ein Wireframe – und wozu brauchst du ihn?
Ein Wireframe ist die Struktur-Skizze einer Seite: Welche Blöcke gibt es, in welcher Reihenfolge stehen sie, wie viel Platz bekommt jeder? Farben, Schriften und Bilder bleiben bewusst weg.
Er klärt Reihenfolge und Gewichtung, solange Änderungen noch billig sind – also bevor jemand gestaltet oder programmiert.
📌 Für wen ist das relevant: Für alle, die eine eigene Website planen oder eine Agentur beauftragen und beim Aufbau mitreden wollen.
- Merkformel: Wireframe = Struktur, Mockup = Optik, Prototyp = Verhalten
- Das F-Muster stammt aus Eyetracking-Forschung, das Z-Muster ist Konvention – belegte Muster nimmst du als Rahmen, Konventionen als Vorschlag
- Papier reicht – ein Bezahl-Abo brauchst du für eine einzelne Website nicht
Das lernst du in dieser Lektion
Du weißt, wozu ein Wireframe dient, wo seine Grenze liegt und wann er sich lohnt.
Du zeichnest in 20 Minuten selbst einen brauchbaren Wireframe – auf Papier, ohne Werkzeug.
Du kennst die üblichen Layout-Muster und kannst entscheiden, welches du für deine Seite als Rahmen nimmst und welches nur ein Vorschlag ist.
Du übergibst deinen Entwurf so an Agentur oder Entwickler, dass sie damit arbeiten können.
Inhalt
01 ·
Was ein Wireframe ist – und was nicht
Stell dir die Seite als Bauplan vor: Kästen für Inhaltsblöcke, Linien für Text, ein Kreuz für ein Bild. Genau das ist ein Wireframe.
Fachlich ist er das Skelett der Seite: eine einfache visuelle Darstellung, die Struktur und Layout umreißt – ohne Farbe, ohne Bilder, ohne ausgearbeitete Gestaltung.
Das Problem im Alltag ist selten die Definition, sondern die Begriffsverwirrung. Drei Dinge werden regelmäßig durcheinandergeworfen – und du zahlst am Ende für etwas anderes, als du erwartet hast.
Wireframe, Mockup, Prototyp: drei Stufen, drei Fragen
Begriffskonvention der Branche, keine Norm – Definition nach IxDF und Balsamiq (Stand 08/2026)
Stufe 1 · Wireframe
Struktur
Beantwortet: Welche Blöcke, in welcher Reihenfolge, wie gewichtet?
Graue Kästen, Platzhalter, meist statisch. Keine Farben, kein Branding.
Stufe 2 · Mockup
Optik
Beantwortet: Wie sieht die Seite fertig gestaltet aus?
Farben, Typografie, Bilder, Branding – aber ebenfalls nicht klickbar.
Stufe 3 · Prototyp
Verhalten
Beantwortet: Was passiert, wenn ich klicke?
Die einzige Stufe, die Interaktion simuliert – von simplen Verlinkungen bis nah am Endprodukt.
Quellen: Definition nach IxDF “What is Wireframing?” und Balsamiq “What are Wireframes?”; die Dreiteilung Wireframe/Mockup/Prototyp ist branchenweite Begriffskonvention, verdichtet aus mehreren Fachartikeln (u.a. musemind.agency, justinmind.com, moqups.com) – Stand 08/2026, eigene Darstellung, Ostend Digital.
Schaubild: Die drei Detailstufen und die Frage, die jede beantwortet – eigene Darstellung, Ostend Digital, Stand 08/2026.
Der häufigste Irrtum betrifft die Mitte: Viele halten das Mockup für die klickbare Version. Wenn du “Wireframe” sagst und dein Gegenüber “Mockup” versteht, bekommst du einen gestalteten Entwurf zu einem Zeitpunkt, an dem ihr noch über die Reihenfolge streiten solltet. Frag im Agenturgespräch deshalb nach, welche Stufe gemeint ist und was sie kosten soll.
02 ·
Wann sich der Aufwand lohnt
Das Argument für Wireframes ist ein Kostenargument: Ein Fehler, den du früh findest, kostet einen Bruchteil dessen, was er später kostet.
Die Grundlogik erlebst du selbst, sobald du baust. Einen Kasten auf einer Skizze zu verschieben dauert Sekunden. Denselben Block in einer fertigen Seite umzustellen zieht Layout, Text, Bilder und Mobilansicht hinter sich her.
Auch die Größenordnung ist untersucht. Barry Boehm veröffentlichte 1981 Daten aus Software-Projekten: Die Kosten einer Fehlerbehebung steigen pro Projektphase etwa um eine Größenordnung. Für kleine, unkritische Projekte nennen Boehm und Basili in ihrer Folgearbeit von 2001 ein Verhältnis von etwa 5:1 – und eine Unternehmenswebsite mit zehn bis dreißig Seiten ist genau so ein Projekt.
Faktor fünf reicht als Begründung völlig. Entscheidend ist aber nicht die Zahl, sondern deine Situation.
Die Entscheidungsregel
Der Wireframe lohnt sich, sobald mehr als eine Person über den Aufbau mitentscheidet oder jemand anderes nach deinem Briefing baut. Bei einer dreiseitigen Seite, die du allein anlegst, reicht eine nummerierte Inhaltsliste – wie du die aufstellst, steht in Sektion 04. Ab etwa fünf Seiten oder sobald ein Dienstleister im Spiel ist, sparst du dir mit zwanzig Minuten Skizze die erste Korrekturschleife.
💡 Merke
Der Wireframe ist die billigste Korrekturschleife deines Projekts. Streit über Reihenfolge und Gewichtung ist auf einer Skizze in Minuten geklärt – in einer gebauten Seite nicht.
Besonders deutlich wird das, wenn mehrere Personen mitreden oder ein Dienstleister nach deinem Briefing baut.
03 ·
Grob oder ausgearbeitet?
Wireframes gibt es in unterschiedlichen Ausarbeitungsgraden. Die Fachsprache nennt das Fidelity und unterscheidet zwischen Low-Fidelity und High-Fidelity. Die Nielsen Norman Group sortiert das nicht als Schalter, sondern über drei Achsen, die jede für sich grob oder ausgearbeitet sein kann.
| Achse | Grob (Low-Fidelity) | Ausgearbeitet (High-Fidelity) |
|---|---|---|
| Interaktivität | Nichts klickbar. Ein Mensch spielt den Computer und legt den nächsten Zustand hin | Viele oder alle Elemente klickbar, das System antwortet selbst |
| Optik | Wenige bis keine visuellen Eigenschaften des späteren Systems | Grafik, Abstände und Layout wie im fertigen System |
| Inhalt | Grob heißt: Platzhalter und Stichworte. Ausgearbeitet heißt: echte Texte und Daten | |
Die Vorteile verteilen sich entsprechend. Grobe Entwürfe sind schnell erstellt und lassen mehr Zeit für die Gestaltungsarbeit. Ausgearbeitete Entwürfe reagieren im Test realistischer.
Warum das Fach grob zuerst empfiehlt
Die Handwerksbegründung: Zu ausgearbeitete Entwürfe lenken Feedback auf Farben statt auf die Struktur. Zeig jemandem eine Skizze, und er redet über die Reihenfolge – zeig ihm einen gestalteten Entwurf, und er redet über die Schriftart.
Dazu passt ein Forschungsergebnis: Eine Arbeit von Virzi, Sokolov und Karis aus dem Jahr 1996 fand in zwei Experimenten mit groben und ausgearbeiteten Entwürfen im Wesentlichen dieselben Usability-Probleme. Wenn die grobe Variante vergleichbar viel findet, brauchst du die aufwendige am Anfang nicht.
💡 Praxis-Tipp
Fang immer grob an. Für die Frage “steht der richtige Block an der richtigen Stelle” reicht eine Kastenskizze aus.
Und halte das Ergebnis absichtlich unfertig. Was aussieht wie ein Entwurf, bekommt Kommentare zu Schriftarten – was aussieht wie eine Skizze, bekommt Kommentare zur Reihenfolge.
04 ·
In 20 Minuten zum Wireframe auf Papier
Jetzt der praktische Teil. Du brauchst ein Blatt Papier im Hochformat und einen Stift – kein Programm, keine Vorlage, keine Design-Kenntnisse.
Die Reihenfolge ist bewusst so gebaut, dass du erst denkst und dann zeichnest.
Minute 0 bis 3: Zweck in einem Satz
Schreib oben auf das Blatt zwei Antworten. Wer landet auf dieser Seite, und was soll diese Person danach tun?
Halte dich an ein Hauptziel. Eine Seite, die gleichzeitig informieren, zum Anruf und zum Newsletter führen soll, schafft nichts davon.
Minute 3 bis 6: Inhalte sammeln
Notier darunter alles, was auf die Seite könnte – ungeordnet: Leistungen, Preise, Referenzen, Kontaktformular, Team, häufige Fragen.
Bewerte hier noch nichts. Sammeln und Sortieren gleichzeitig zu machen ist der Grund, warum viele an dieser Stelle hängenbleiben.
Minute 6 bis 9: Reihenfolge festlegen
Jetzt nummerierst du die Liste. Maßstab ist, in welcher Reihenfolge dein Besucher die Dinge braucht, um zu entscheiden – nicht die interne Wichtigkeit. Die Firmengeschichte ist dir vielleicht wichtig, für seine Entscheidung steht sie selten an Position zwei.
Minute 9 bis 15: Kästen zeichnen
Zeichne einen schmalen, hohen Rahmen auf das Blatt, ungefähr acht Zentimeter breit, deine Handybreite. Warum ausgerechnet die schmalste Ansicht zuerst kommt, klärt Sektion 06. Fürs Erste genügt: Auf dieser Breite steht alles untereinander, du kannst dich vor der Reihenfolge nicht drücken.
Dann wird jeder Listenpunkt ein Kasten, von oben nach unten in deiner Nummerierung. Die Höhe zeigt das Gewicht: Was viel Aufmerksamkeit bekommen soll, wird groß. Für Buttons gilt das nicht, die bleiben flach – ihr Gewicht steckt in der Position.
In den Kasten schreibst du nur, was drinsteht, nicht den fertigen Text – also “Überschrift: Leistung + Ort”. Bilder markierst du als Kasten mit einem Kreuz darin.
Minute 15 bis 18: Handlungen markieren
Zeichne jede Stelle ein, an der jemand etwas tun kann. Buttons als abgerundetes Rechteck, mit der Beschriftung, die draufstehen soll. Daneben notierst du in Klammern, was der Klick auslöst – etwa “(öffnet Kontaktformular)”.
Minute 18 bis 20: Gegenlesen
Halte das Blatt auf Armlänge weg und stell dir drei Fragen:
Erkennt jemand auf den ersten Blick, worum es geht? Steht das Wichtigste im oberen Bereich? Gibt es genau einen offensichtlichen nächsten Schritt?
Lautet eine Antwort nein, verschiebst du Kästen. Dafür hast du die zwanzig Minuten investiert.
💡 Praxis-Tipp
Nimm Haftnotizen statt gezeichneter Kästen, wenn ihr zu mehreren plant. Ein Zettel pro Inhaltsblock, aufgeklebt auf ein Blatt in Handybreite.
Der Vorteil ist psychologisch: Über eine verschiebbare Notiz diskutiert man sachlich, über eine gezeichnete Seite verteidigt man seinen Entwurf.
So sieht das Ergebnis nach 20 Minuten aus
Beispiel Startseite Physiotherapie-Praxis, Handybreite – eigene Darstellung, Ostend Digital, Stand 08/2026
trägt die Kernaussage
Notiz: öffnet Kontaktformular
“3 Gründe für uns”
Grund weiterzulesen
Höhe = Gewicht, aber nur für Inhaltsblöcke. Buttons bleiben flach – ihr Gewicht zeigst du über die Position und darüber, dass sie zweimal vorkommen.
Keine Farben, keine echten Texte, keine Schriftauswahl. Genau so darf deine Skizze aussehen.
Schaubild: Beispiel-Kastenskizze für die Startseite einer Physiotherapie-Praxis in Handybreite – eigene Darstellung, Ostend Digital, Stand 08/2026.
Vergleich deine Skizze damit. Wenn sie unordentlicher aussieht, ist das kein Problem. Entscheidend ist, dass Reihenfolge, Gewichtung und Handlungen erkennbar sind.
Ein Hinweis zur Erwartung: Dieser Wireframe beantwortet Reihenfolge und Gewichtung – zu Farbwirkung und Bildsprache schweigt er bewusst.
05 ·
Website Struktur: die üblichen Layout-Muster
Unter dem Suchbegriff website struktur findest du vier Muster: F-Muster, Z-Muster, “Above the Fold” und das Karten-Raster. Sie sind unterschiedlich hart: Zwei stammen aus Eyetracking-Forschung, zwei sind Gestaltungskonventionen.
Der Unterschied entscheidet, wie du sie in deinem Wireframe einsetzt. Eine erforschte Regel ist dein Rahmen, eine Konvention ein Vorschlag, den du anpassen darfst.
Layout-Muster für die Website Struktur: was belegt ist und was nicht
Einordnung: Was trägt wie weit im Entwurfsalltag (Stand 08/2026)
Nielsen Norman Group, 2006: Eyetracking mit 232 Nutzern. 2017 präzisiert – Standardverhalten bei fehlenden starken Signalen, kein Gesetz. Eine Gegenstudie des Anbieters EyeQuant (99 Websites, je 46 Teilnehmende, 157.498 Fixierungen) fand keine F-förmige Heatmap.
Bewährte Ordnungshilfe für bildarme Seiten: Blickpfad von links oben nach rechts unten. Als Rahmen nützlich, nicht als Gesetz.
NN/g 2010: 80,3 Prozent der Betrachtungszeit oberhalb des Folds. NN/g 2018 (120 Teilnehmende, rund 130.000 Fixierungen): nur noch rund 57 Prozent oberhalb, 74 Prozent in den ersten zwei Bildschirmfüllungen.
Aus dem Print-Layout übernommen. Die Begründung ist strukturell: Gleichrangiges wird gleichrangig dargestellt und bricht auf schmalen Bildschirmen sauber um.
Quellen: NN/g “F-Shaped Pattern For Reading Web Content” (2006) und die Präzisierung von 2017 · EyeQuant, Eyetracking-Auswertung zum F-Muster · NN/g “Scrolling and Attention” (2010, Aktualisierung 2018) – Stand 08/2026, eigene Darstellung, Ostend Digital.
Schaubild: Vier Layout-Muster – zwei aus der Eyetracking-Forschung, zwei Gestaltungskonventionen. Eigene Darstellung, Ostend Digital, Stand 08/2026.
F-Muster: dein Rahmen für textlastige Seiten
Das F-Muster beschreibt, wie Blicke über eine textlastige Seite wandern: waagerecht durch den oberen Bereich, dann eine zweite, kürzere waagerechte Bewegung weiter unten, danach senkrecht die linke Seite entlang.
Daraus leitet die Nielsen Norman Group zwei Arbeitsregeln ab: Die ersten beiden Absätze enthalten das Wichtigste, und Überschriften wie Aufzählungen beginnen mit den Wörtern, die die Information tragen.
Wichtiger ist, was dieselbe Gruppe 2017 klargestellt hat. Das F ist nicht die Regel, sondern das Rückfallverhalten – es tritt auf, wenn nichts den Blick gezielt woandershin lenkt. Ein starkes Bild oder ein auffälliger Button verschiebt ihn dorthin, wo du ihn haben willst.
Daneben nennt die Gruppe drei weitere Scan-Muster: Layer-Cake (nur Überschriften werden gelesen), Spotted (ein Detail wird gezielt gesucht) und Commitment (bei hoher Motivation wird fast alles gelesen).
Für deinen Wireframe folgt daraus ein konkreter Handgriff: Prüf deine Skizze aus Sektion 04 daraufhin, ob Überschriften und Aufzählungen mit den tragenden Wörtern beginnen – “Physiotherapie in Stuttgart” statt “Willkommen auf unserer Seite”.
Z-Muster: eine Konvention für reduzierte Seiten
Beim Z-Muster wandert der Blick der Idee nach von oben links nach oben rechts, diagonal nach unten links und dann nach unten rechts. Daraus folgt die Empfehlung, den wichtigsten Button unten rechts zu setzen.
Das Z-Muster ist eine Gestaltungskonvention, keine Forschungsregel wie das F-Muster. Für reduzierte, bildarme Seiten mit klarer linearer Führung ist es trotzdem eine vernünftige Voreinstellung – du darfst es übernehmen, testen und verwerfen.
Above the Fold: die weiche Version gilt
“Above the Fold” meint den Bereich, der beim Laden ohne Scrollen sichtbar ist. Die harte Regel von früher – was darunter steht, sieht niemand – kannst du streichen, die Eyetracking-Daten geben eine weichere her.
Die lautet: Der sichtbare Bereich bekommt überproportional viel Aufmerksamkeit, also gehört das Wichtigste dorthin. Menschen scrollen aber zuverlässig, wenn der obere Bereich glaubhaft macht, dass es sich lohnt.
Für deinen Wireframe heißt das: Der oberste Kasten trägt die Kernaussage, der zweite liefert einen Grund weiterzulesen. Wie du diesen Bereich gezielt auf Abschlüsse auslegst, vertieft die Lektion zu Landing Pages – einen Überblick gibt unser Leitfaden zur Conversion-Rate-Optimierung.
💡 Merke
Eine erforschte Regel ist dein Rahmen, eine Konvention ein Vorschlag. F-Muster und Fold-Effekt nimmst du als Ausgangspunkt, Z-Muster und Karten-Raster übernimmst du, wenn sie zu deiner Seite passen – und verwirfst sie, wenn nicht.
Beides ist nützlich. Du solltest nur wissen, was du gerade befolgst, denn nur die Vorschläge darfst du ohne Not brechen.
06 ·
Mit welcher Breite du anfängst
In der Anleitung oben hast du einen schmalen Rahmen gezeichnet – die wichtigste Reihenfolge-Entscheidung beim Wireframe.
Der Begriff dahinter ist “Mobile First”. Luke Wroblewski prägte ihn 2009 und begründete ihn damit, dass ein Entwurf, der mit der Desktop-Version beginnt, rückwärts gedacht sei.
Aus der Vorlektion zu responsivem Design weißt du, dass sich Layouts an die Bildschirmbreite anpassen. Hier geht es um die Reihenfolge des Entwerfens.
Warum eng vor breit
Der praktische Kern ist ein Zwang. Auf Handybreite steht alles untereinander, es gibt keine Spalten, in die man Unliebsames wegschieben kann.
Damit musst du entscheiden, was zuerst kommt – und genau diese Entscheidung ist der eigentliche Wert eines Wireframes. Auf einer breiten Fläche lässt sie sich zu leicht umgehen.
Das zweite Argument ist Reichweite. Die Interaction Design Foundation nennt, gestützt auf Statista-Daten, über 62 Prozent des weltweiten Web-Traffics für mobile Geräte.
Die Arbeitsrichtung heißt deshalb: kleinster Bildschirm zuerst, danach schrittweise erweitern – statt am Ende Elemente aus einer vollen Desktop-Seite wegzukürzen.
Info
Zwei Dinge heißen ähnlich und meinen Verschiedenes. “Mobile First” als Design-Prinzip beschreibt die Reihenfolge beim Entwerfen.
Googles “Mobile-First-Indexing” ist dagegen ein Verfahren der Suchmaschine – mehr dazu im SEO-Kurs.
Mobile First ist eine Arbeitskonvention aus der Praxis, die sich zum Quasi-Standard entwickelt hat. Ihr Wert liegt im Zwang zur Reihenfolge – genau der Entscheidung, für die du den Wireframe zeichnest.
07 ·
Brauchst du überhaupt ein Werkzeug?
Für den Anfang lautet die ehrliche Antwort: nein. Jakob Nielsen nennt Papier-Prototypen eine der schnellsten und günstigsten Techniken im Gestaltungsprozess – eine Fähigkeit, die man einmal lernt und den Rest der Karriere nutzt.
Papier eignet sich besonders für Runden, in denen Nicht-Designer beitragen sollen – das empfehlen selbst die Hersteller von Prototyping-Werkzeugen. Die Grenzen gehören dazu: Über visuelles Design sagt eine Papierskizze nichts, und wer Skizzen nicht gewohnt ist, kann sie falsch verstehen.
| Werkzeug | Was es leistet | Preis (Stand 08/2026) |
|---|---|---|
| Papier, Stift, Whiteboard | Struktur skizzieren, keine Lernkurve, für Laien am zugänglichsten | ✅ Kostenlos |
| Excalidraw | Handgezeichneter Look, Wireframe-Vorlagen, quelloffen | Kostenloser Plan mit vollem Editor und Export. Bezahlplan im einstelligen Euro-Bereich pro Monat. Richtwert |
| Figma | Vollwertiges Design-Werkzeug, auch für Wireframes nutzbar, Branchenstandard bei Agenturen | Starter-Plan kostenlos. Bezahlstufen ab 16 US-Dollar pro Monat |
| Balsamiq | Dediziertes Wireframing-Werkzeug mit bewusst skizzenhaftem Look | ❌ Kein dauerhaft kostenloser Plan. Ab 16 US-Dollar pro Monat und Bearbeiter bei jährlicher Abrechnung, 14 Tage Testphase |
Die Auswahl hängt weniger vom Budget ab als davon, wer mitlesen soll – und davon, ob du überhaupt allein anfangen willst.
- 📌 Erste Ideen allein sortieren: Papier oder Excalidraw. Kein Setup, keine Einarbeitung.
- 📌 Entwurf an eine Agentur geben, die kommentieren soll: ein digitales Werkzeug mit Kommentarfunktion. Der kostenlose Figma-Plan reicht dafür meist aus.
- 📌 Die Agentur arbeitet schon in einem Werkzeug: dort mitarbeiten, statt ein zweites zu lernen.
- 📌 Ein KI-Werkzeug soll dir den Anfang abnehmen: Es kann eine erste Anordnung vorschlagen, wenn du vor einem leeren Blatt sitzt. Wozu die Seite dient und was zuerst kommt, kennt es nicht. Das bleibt deine Entscheidung.
💡 Praxis-Tipp
Für eine einzelne Website brauchst du kein Bezahl-Abo. Die kostenlosen Stufen decken Zeichnen, Teilen und Exportieren ab.
Wenn Papier reicht, fotografier die Skizze ab. Ein Foto einer durchdachten Handskizze ist für eine Agentur wertvoller als eine leere Datei in einem teuren Programm.
08 ·
Übergabe an Agentur oder Entwickler
Hier hören die meisten Anleitungen auf. Ein Wireframe, der nur zeigt, wo etwas hinkommt, zwingt dein Gegenüber zum Raten – und Raten wird später als Änderungswunsch abgerechnet.
Was zusätzlich zur Struktur hineingehört
Vier Dinge machen aus der Skizze eine Arbeitsgrundlage.
- 📌 Verhalten und Zustände: Was passiert beim Klick – Weiterleitung, Aufklappen, Formular? Und wie sieht ein Element im deaktivierten Zustand aus?
- 📌 Sonderfälle: Elemente, die nur unter bestimmten Bedingungen erscheinen, dazu Fehlermeldungen und leere Zustände wie eine Suche ohne Treffer.
- 📌 Andere Bildschirmbreiten: Was passiert mit einem Block, wenn die Fläche breiter wird – und was wird auf schmalen Bildschirmen weggelassen?
- 📌 Inhaltspriorität: In welcher Reihenfolge die Inhalte stehen und warum. Sie soll deine geschäftliche Priorität abbilden, nicht die Zufallsordnung deiner Notizen.
Für die Form gibt es eine simple Lösung: Nummerier die Stellen im Wireframe und schreib die Erklärungen in eine separate Liste. So verdecken die Notizen nicht die Struktur.
So sieht das für die Skizze oben aus:
1 Menü – klappt auf dem Handy als Burger auf, Punkte: Leistungen, Team, Kontakt.
3 Button “Termin anfragen” – wichtigste Handlung der Seite, öffnet das Kontaktformular auf derselben Seite, kein neuer Tab.
5 Leistungen – auf breiten Bildschirmen drei nebeneinander, auf dem Handy untereinander. Reihenfolge nach Umsatz, nicht alphabetisch.
7 Anfahrt – wenn die Karte nicht lädt, muss die Adresse als Text sichtbar bleiben.
Vier Zeilen. Mehr braucht es nicht, damit niemand raten muss.
Die vier häufigen Fehler
| Fehler | Warum es schiefgeht | Besser |
|---|---|---|
| ❌ Alles beschriften | Hat jedes Element eine Notiz, sticht keine heraus | ✅ Nur kommentieren, wo echte Unklarheit besteht |
| ❌ Vage Formulierungen | “Der Button soll auffallen” ist keine Anweisung | ✅ “Button: wichtigste Handlung, öffnet das Kontaktformular” |
| ❌ Platzhalter und Echttext gemischt | Niemand weiß, welcher Text bleiben soll | ✅ Endgültige Texte markieren, Platzhalter kennzeichnen |
| ❌ Für alle dieselbe Notiz | Entwickler und Gestalter brauchen anderes | ✅ Funktionale und gestalterische Hinweise trennen |
Wenn du aus diesem Abschnitt nur eines mitnimmst, nimm die Inhaltspriorität. Wo etwas hinkommt, kann eine Agentur selbst entscheiden – warum es dir wichtig ist, nicht.
Experten-Tipp aus der Agentur
Schreib neben deine drei wichtigsten Blöcke je einen Satz, warum sie genau dort stehen. Das ist der Teil, den ein Dienstleister nicht selbst herleiten kann.
Und eine Haltung dazu: Ein fertig gestalteter Entwurf ist im Erstgespräch weniger wert als eine begründete Handskizze. Über einen Entwurf redet man über Schriftgrößen, über eine Skizze über das Ziel der Seite.
Pascal Cabitza
Geschäftsführer Ostend Digital
09 ·
💡 Recap
Der Wireframe in 30 Sekunden:
- Wireframe = Struktur, Mockup = Optik, Prototyp = Verhalten. Nur der Prototyp reagiert auf Klicks
- Der Wireframe lohnt sich, sobald mehrere mitreden oder ein Dienstleister baut. Reihenfolge-Entscheidungen fallen auf Papier in Minuten – in einer gebauten Seite ziehen sie Layout, Text und Mobilansicht hinter sich her
- 20 Minuten auf Papier reichen: Zweck klären, Inhalte sammeln, nummerieren, Kästen in Handybreite zeichnen, Handlungen markieren, gegenlesen
- Das F-Muster ist dein Rahmen, das Z-Muster ein Vorschlag. Das F-Muster stammt aus Eyetracking-Forschung und beschreibt das Standardverhalten bei fehlenden starken Signalen, das Z-Muster ist eine Konvention für reduzierte Seiten
- “Above the Fold” gilt in der weichen Version: Der obere Bereich bekommt überproportional viel Aufmerksamkeit – Menschen scrollen aber zuverlässig, wenn er einen Grund dafür liefert
- Mobile First meint die Reihenfolge: erst der schmale Entwurf, danach für breitere Bildschirme erweitern
- Für die Übergabe zählt die Inhaltspriorität am meisten – Reihenfolge plus Begründung kann ein Dienstleister nicht erraten
10 ·
Selbstcheck: kannst du das beantworten?
Ein Dienstleister schickt dir einen “Wireframe” mit Firmenfarben, Logo und Fotos. Was stimmt hier nicht?
Das ist kein Wireframe, sondern ein Mockup – ein Wireframe zeigt Struktur ohne Farben, Bilder und Branding.
Das Problem ist die Folge: An einem gestalteten Entwurf kommentieren Beteiligte Schrift und Farbe, während Reihenfolge und Gewichtung offen bleiben. Frag nach, ob die Struktur schon abgestimmt ist.
Du hast eine Seite skizziert. Der Geschäftsführer will oben die Firmengeschichte, der Vertrieb den Rückrufbutton, die Marketingleiterin das Kundenlogo-Band. Wie entscheidest du?
Nicht nach interner Wichtigkeit, sondern danach, was dein Besucher in welcher Reihenfolge braucht, um sich zu entscheiden. Die Firmengeschichte steht dafür selten an Position zwei.
Praktisch: Kleb die drei Blöcke als Haftnotizen auf und lass die Runde begründen, welche Frage des Besuchers der jeweilige Block beantwortet. Blöcke ohne Antwort rutschen nach unten.
Und wenn die Runde sich nicht einigt, ist das meist ein Zeichen dafür, dass die Seite zwei Ziele gleichzeitig verfolgt. Dann ist die Antwort nicht eine andere Reihenfolge, sondern eine zweite Seite.
Jemand sagt: “Der wichtigste Button gehört unten rechts, das Z-Muster ist seit Jahrzehnten erforscht.” Wie gehst du damit um?
Ordne die Regel richtig ein: Das F-Muster stammt aus Eyetracking-Forschung, das Z-Muster ist eine Gestaltungskonvention. “Seit Jahrzehnten erforscht” trifft auf das F-Muster zu, nicht auf das Z-Muster.
Das heißt nicht, dass die Anordnung schlecht ist – für reduzierte, bildarme Seiten ist sie eine vernünftige Voreinstellung. Der Unterschied liegt im Umgang: Eine Konvention darfst du testen und verwerfen, eine erforschte Regel nimmst du als Ausgangspunkt.
Was gibst du einer Agentur zusätzlich zur Zeichnung mit, damit dein Wireframe wirklich nützt?
Vier Dinge: was beim Klick passiert, welche Sonderfälle es gibt, wie sich Blöcke bei anderen Bildschirmbreiten verhalten, und in welcher Reihenfolge die Inhalte stehen.
Auch die Form zählt: Nummerier die Stellen in der Skizze und leg die Erklärungen daneben in eine separate Liste.
Wenn du nur eines mitgibst, nimm die Inhaltspriorität mit Begründung.
Alle Lektionen des Webdesign- und CRO-Kurses im Überblick →
Quellen und Stand (20 Einträge)
- Interaction Design Foundation: “What is Wireframing?” – Wireframes als einfache visuelle Darstellungen von Struktur und Layout, ohne Farbe, Bilder oder ausgearbeitetes Styling (ixdf.org, abgerufen 16.08.2026)
- Balsamiq: “What are Wireframes?” – Wireframe als “Skelett” eines digitalen Projekts, Fokus auf Layout und Inhaltsplatzierung. Anbieter eines Low-Fidelity-Wireframing-Werkzeugs, Interessenlage im Text gekennzeichnet (balsamiq.com, abgerufen 16.08.2026)
- Abgrenzung Wireframe / Mockup / Prototyp: branchenweite Begriffskonvention, verdichtet aus mehreren Fachartikeln (u.a. musemind.agency, justinmind.com, moqups.com), keine Einzelstudie (abgerufen 16.08.2026)
- Nielsen Norman Group, Kara Pernice: “UX Prototypes: Low Fidelity vs. High Fidelity”, 18.12.2016 – Fidelity über die drei Achsen Interaktivität, Optik und Inhalt; Vorteile grober und ausgearbeiteter Entwürfe (nngroup.com, abgerufen 16.08.2026)
- Virzi, R.A., Sokolov, J.L., Karis, D. (1996): “Usability Problem Identification Using Both Low- and High-Fidelity Prototypes”, Proceedings of ACM SIGCHI ’96, S. 236-243 – in zwei Experimenten im Wesentlichen dieselben Usability-Probleme bei groben und ausgearbeiteten Prototypen, signifikante Korrelation der Erkennungsraten. Peer-reviewte Primärquelle
- Barry Boehm: “Software Engineering Economics”, Prentice-Hall 1981 (Datenpräsentation bereits 1976 in IEEE Transactions on Computers) – Datenbasis eigene TRW-Projekte plus Vergleichsdaten von IBM, GTE und dem Bell-Labs-Safeguard-Programm; Kostensteigerung je Projektphase um etwa eine Größenordnung. Zahlen über eine kritische Sekundäraufbereitung (reworkcost.com) abgerufen 16.08.2026
- Boehm, B. & Basili, V.: “Software Defect Reduction Top 10 List”, IEEE Computer, Januar 2001 – Fehler nach Auslieferung oft rund hundertmal teurer, “on small, non-critical projects the ratio is closer to 5:1”. Peer-reviewt, belastbarste Einzelquelle zu dieser Frage
- Kritische Einordnung der “1:10:100”-Grafik: die häufig einer IBM-Studie zugeschriebene Balkengrafik ist nicht quellenbelegt und geht auf eine Lehrbuch-Fußnote zurück (reworkcost.com, abgerufen 16.08.2026)
- Mike Cohn, Mountain Goat Software: “The Cost of Change Curve Is Outdated” – Abflachung der Kurve durch moderne Werkzeuge, automatisierte Tests und modulare Architekturen; “Boehm gave us a snapshot. Over time, we turned it into a law of nature.” Praktiker-Einzelmeinung einer anerkannten Fachautorität (abgerufen 16.08.2026)
- Hinweis zu kommerziellen Einspar-Zahlen: die kursierenden Forrester-TEI-Angaben zu Wireframing- und Testing-Werkzeugen sind vom jeweiligen Anbieter in Auftrag gegebene Studien und werden deshalb in dieser Lektion nicht als unabhängige Evidenz verwendet (tei.forrester.com u.a., abgerufen 16.08.2026)
- Jakob Nielsen, NN/g: “Paper Prototyping: Getting User Data Before You Code”, 13.04.2003 – Papier-Prototypen als eine der schnellsten und günstigsten Techniken im Gestaltungsprozess (nngroup.com, abgerufen 16.08.2026)
- Jakob Nielsen, NN/g: “F-Shaped Pattern For Reading Web Content”, 16.04.2006 – Eyetracking mit 232 Nutzern über tausende Seiten; Ableitungen zu den ersten beiden Absätzen und zu informationstragenden Anfangswörtern (nngroup.com, abgerufen 16.08.2026)
- Kara Pernice, NN/g: “F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant”, 12.11.2017 – Präzisierung: F-Muster als Standardverhalten bei fehlenden starken visuellen Signalen, gutes Design kann es verhindern; weitere Muster Layer-Cake, Spotted und Commitment; Bestätigung für Desktop und Mobile (nngroup.com, abgerufen 16.08.2026)
- EyeQuant: Eyetracking-Auswertung zum F-Muster – 99 Websites, je 46 Teilnehmende, 157.498 Fixierungen in der ersten Scanphase; keine F-förmige Einzel-Heatmap gefunden. Anbieter eines ML-basierten Vorhersage-Werkzeugs, Interessenlage im Text gekennzeichnet (eyequant.com, abgerufen 16.08.2026)
- Nielsen Norman Group: “Scrolling and Attention” – Erhebung 2010 mit 80,3 Prozent der Betrachtungszeit oberhalb des Folds; Aktualisierung 2018 mit 120 Teilnehmenden und rund 130.000 Fixierungen: rund 57 Prozent oberhalb des Folds, 74 Prozent innerhalb der ersten zwei Bildschirmfüllungen; Konzept “Information Scent” (nngroup.com, abgerufen 16.08.2026)
- UXPin: “Paper Prototyping: The Complete Guide to Low-Fidelity UX Design” – Eignung für Runden mit Nicht-Designern und ressourcenarme Umgebungen, Grenzen bei visuellem Design, Interaktivität und Fehlinterpretation. Anbieter-Content, argumentiert gegen das eigene Produkt (uxpin.com, abgerufen 16.08.2026)
- Preise Stand August 2026: Figma-Preisseite (figma.com/pricing) und Balsamiq-Preisseite (balsamiq.com/pricing), beide direkt abgerufen 16.08.2026. Excalidraw-Angaben stammen aus Preis-Aggregatoren (saaspricehub.io, costbench.com), nicht von der offiziellen Anbieterseite – im Text als Richtwert gekennzeichnet
- Handoff-Empfehlungen: Balsamiq “How to use wireframe annotations (even if you’re not a designer)” und UXPin “10 Annotation Examples for Clear Developer Handoff” – Zustände und Linkverhalten dokumentieren, Sonderfälle und Fehlerzustände, Breakpoint-Verhalten, Inhaltspriorität, nummerierte Callouts mit separater Notizliste; Fehlerbilder Über-Annotation, vage Sprache, unklare Platzhalter-Kennzeichnung, zielgruppenblinde Annotation. Anbieter-Content, Empfehlungen aber werkzeugunabhängig formuliert (abgerufen 16.08.2026)
- Interaction Design Foundation: “What is Mobile First?” – Luke Wroblewski prägte den Begriff 2009; Argumentation über mobilen Traffic-Anteil (dort mit Statista-Daten auf über 62 Prozent des weltweiten Web-Traffics beziffert), Priorisierungszwang durch begrenzte Fläche und Progressive Enhancement vom kleinsten Bildschirm aufwärts (ixdf.org, abgerufen 16.08.2026)
- Nielsen Norman Group, Feifei Liu / Mingjin Zhang / Raluca Budiu: “AI as a UX Assistant”, 27.10.2023 – Praktiker-Befragung: strukturelle und gestalterische Design-Aufgaben nennen nur 24 Prozent der Befragten als KI-Einsatzfeld, mit steigendem Kontextbedarf bei komplexeren Aufgaben. Beleg für die Einordnung des KI-Werkzeugs in Sektion 07 (nngroup.com, abgerufen 16.08.2026)
Du hast die Struktur – und willst sie sauber umgesetzt sehen?
Wir bauen Websites für Unternehmen in Stuttgart und bundesweit. Bring deinen Wireframe mit, wir sagen dir ehrlich, was daran trägt und was wir anders lösen würden.
