Wireframes erstellen: der Plan vor dem Design
Ein Wireframe ist die Strukturskizze einer Seite. Er zeigt Blöcke, Reihenfolge und Navigation und lässt Farben, Bilder und Schriften weg. Die Interaction Design Foundation beschreibt ihn als einfache Darstellung, die Aufbau und Layout einer Seite skizziert.
Das Weglassen ist Absicht. Ohne Farben und Fotos rückt der Aufbau in den Mittelpunkt. Was erfahren Besucher zuerst, und wo können sie anfragen?
Was ist ein Wireframe – und was ein Mockup oder Prototyp?
Im Gespräch mit Agenturen fallen drei Begriffe, die oft durcheinandergeraten. Sie bezeichnen Stufen derselben Arbeit, vom groben Aufbau bis zur klickbaren Vorschau. Die Nielsen Norman Group beschreibt solche Stufen als Detailtreue: wie nah ein Entwurf am fertigen System liegt. Der Prototyp unterscheidet sich zusätzlich dadurch, dass er auf Klicks reagiert.
| Wireframe | Mockup | Prototyp | |
|---|---|---|---|
| Alltagswort | Strukturskizze | Bildvorschau | Klickbare Vorschau |
| Was er zeigt | Aufbau, Reihenfolge und Navigation | Aussehen mit Farben, Schrift und Formen | Ablauf: Ein Klick führt zur nächsten Ansicht |
| Farben und Schrift | Nein, nur Platzhalter | Ja | Je nach Ausbaustufe |
| Klickbar | Meist nein | Meist nein | Ja |
| Typische Frage | Steht das Wichtigste oben? | Passt das Aussehen zur Marke? | Finden Besucher den Weg zur Anfrage Schritt für Schritt? |
Quellen: Interaction Design Foundation (Wireframe, Mockup), Nielsen Norman Group (Detailtreue). Die Spalte Prototyp fasst gängige Definitionen zusammen.
Dass der Wireframe zuerst kommt, hat einen Grund. Mit dem Wireframe entscheidet ihr über den Aufbau, mit dem Mockup über das Aussehen, mit dem Prototyp über den Ablauf. Wer mit dem Mockup beginnt, bespricht Aufbau und Aussehen in einer Runde. Dann springen Rückmeldungen leicht zwischen Anordnung und Farbwahl hin und her.
Nicht jede Agentur meint mit den Begriffen dasselbe. Die Interaction Design Foundation zählt Mockups von grob bis fertig ausgearbeitet. Fragt im Briefing nach, was gemeint ist: nur der Aufbau, das Aussehen oder ein klickbarer Ablauf.
Warum Wireframes vor dem Design kommen
Die Forschung dazu ist dünn. Landay und Myers berichten 1995 von anekdotischer Evidenz: Ein skizzenhafter Entwurf nütze in frühen Besprechungen deutlich mehr. Sie zitieren Black, das fertige Aussehen eines Entwurfs lenke von grundlegenden Fragen des Aufbaus ab.
Ein Entwurf, der fertig aussieht, zieht Rückmeldungen daher eher auf Details wie die Farbe eines Buttons. Ein grober Entwurf hält sie eher beim Aufbau.
Papier ist schnell. Die Nielsen Norman Group nennt Papierprototypen eine der schnellsten und günstigsten Techniken im Designprozess. Das gilt auch für Wireframes auf Papier: Eine neue Idee ist ein neues Blatt.
Zugänglichkeit gehört früh in die Planung. Das W3C rät, sie von Beginn an einzuplanen, um Gestaltungsentscheide nicht später teuer ändern zu müssen. Im Wireframe prüft ihr Reihenfolge, Überschriften und Buttontexte schon. Was das für Schweizer KMU heisst, steht im Beitrag zur Barrierefreiheit für Schweizer KMU.
Oft heisst es, eine späte Änderung koste hundertmal mehr als eine frühe. Die Zahl stammt aus der Softwareentwicklung und ist umstritten. Boehm und Basili, aus deren Arbeit die Zahl stammt, schreiben 2001, sie gelte oft. Bei kleinen, unkritischen Systemen liege das Verhältnis eher bei fünf zu eins. Menzies und andere fanden 2016 in 171 Projekten keinen Beleg für den Effekt. Zu Websites allein ist keine belastbare Zahl bekannt. Als Grund für einen Wireframe genügen Tempo, Rückmeldungen zum Aufbau und die frühe Planung der Zugänglichkeit.
So erstellt ihr einen Wireframe in rund einer Stunde
Für eine Seite braucht ihr Papier, einen Stift und als Richtwert etwa eine Stunde für alle sechs Schritte. Das ist eine Schätzung, kein Messwert, und gilt für eine Seite wie die Startseite im Beispiel. Das Vorgehen bleibt gleich, ob ihr selbst skizziert oder einer Agentur ein Briefing gebt.
- 1. Ziel der Seite in einem Satz festhalten Schreibt auf, wer die Seite besucht und was danach passieren soll. Ein Satz genügt, zum Beispiel: Besucher suchen eine Schreinerei; danach sollen sie ein Erstgespräch buchen.
- 2. Inhalte sammeln und nach Wichtigkeit ordnen Notiert jeden Inhalt auf einen Zettel: Leistungen, Referenzen, Kontakt, Preise. Sortiert die Zettel nach dem Ziel aus Schritt eins: Was ihm am meisten dient, liegt oben.
- 3. Blöcke als Rechtecke zeichnen Zeichnet pro Inhalt ein Rechteck, von oben nach unten – Bilder als Rechteck mit Kreuz, Texte als Balken. Die Skizze darf unordentlich sein.
- 4. Mit echten Texten beschriften Schreibt die echte Überschrift hin, nicht Blindtext, und lasst Fliesstext als Balken stehen. Buttons bekommen ein Wort für die Handlung, etwa «Termin buchen» statt «Mehr».
- 5. Die Handyansicht gleich mitzeichnen Zeichnet die Seite ein zweites Mal schmal, mit denselben Blöcken untereinander. So seht ihr, was auf dem Handy zuerst kommt.
- 6. Zwei Personen den Wireframe erklären lassen Zeigt das Blatt jemandem, der eure Firma kennt, und jemandem, der sie nicht kennt. Lasst beide in eigenen Worten sagen, worum es geht und wo sie die Anfrage suchen würden.
Die Nielsen Norman Group stützt dieses Vorgehen in drei Punkten. Sie rät, Inhalte nach Wichtigkeit zu ordnen, bevor das Layout steht, und Handlungsaufforderungen mit einem Textlabel zu versehen. Bei groben Wireframes nennt sie unordentliche Skizzen ausdrücklich in Ordnung.
Vorlage: Wireframe-Briefing für eure Startseite
Das Blatt führt in sechs Schritten zur Skizze eurer Startseite, mit Blöcken zum Beschriften, Platz zum Zeichnen und sechs Prüffragen.
Vielen Dank. Der Download startet gleich.
Werkzeuge für den ersten Wireframe und was sie kosten
Das Werkzeug ist zweitrangig, denn eine Skizze auf Papier ist ein vollwertiger Wireframe. Wer digital arbeiten möchte, findet kostenlose Einstiege. Die Angaben stammen von den Anbieterseiten, Stand 19. Oktober 2026.
| Kosten | Wichtigste Angabe des Anbieters | |
|---|---|---|
| Papier und Stift | Kostet nichts | Braucht kein Konto |
| Excalidraw | Kostenlos, Open Source | Kein Konto nötig |
| Figma | Starterplan gratis | Drei Dateien (Design oder Sites) im Teamordner, Entwürfe ohne Limit |
| Miro | Gratisplan | Drei editierbare Boards |
| Whimsical | Gratisplan | 50 Objekte pro Monat, Wasserzeichen beim Export |
| Balsamiq | Kein Gratisplan | 14 Tage Testversion ohne Kreditkarte |
Quellen: Preis- und Hilfeseiten von Excalidraw, Figma, Miro, Whimsical und Balsamiq, Stand 19. Oktober 2026. Pläne und Limits ändern sich.
Arbeitet eure Agentur mit einem dieser Werkzeuge, fragt nach, in welchem sie skizziert. Dann arbeitet sie eure Entwürfe meist ohne Umweg weiter.
Wann sich ein Wireframe nicht lohnt
Besteht die Website nur aus einer einzelnen Seite mit klarem Ziel, etwa einer Kontaktseite, braucht sie meist keinen Wireframe. Bei einem Relaunch mit mehreren Seiten, einem Menü und Formularen lohnt er sich meist. Je mehr Seiten und Abläufe zusammenkommen, desto mehr Rückfragen im Design spart die Skizze.
Ein Wireframe legt Aufbau und Inhalte einer Seite fest, mehr nicht. Farben, Schrift und Bildsprache folgen im Design. Ziele und Botschaft des Relaunchs stehen davor in der Konzeption, das Ziel der Seite in Schritt eins. Wie die Konzeption abläuft, zeigt der Beitrag zur Website-Konzeption vor dem Relaunch.
Ein kurzes Gespräch zeigt, welche Seiten ihr zuerst skizziert und welche Inhalte dafür bereitliegen sollten.
Häufig gestellte Fragen
Was ist ein Wireframe?
Ein Wireframe legt fest, was auf einer Seite wo steht, bevor jemand gestaltet. Er zeigt Blöcke, Reihenfolge, Navigation und Buttons, aber keine Farben oder Fotos. Ihr zeichnet ihn auf Papier oder in einem Werkzeug.
Was unterscheidet Wireframe, Mockup und Prototyp?
Der Wireframe zeigt den Aufbau, das Mockup das Aussehen mit Farben und Schrift, der Prototyp einen klickbaren Ablauf.
Wie lange dauert es, einen Wireframe zu erstellen?
Für eine Seite rechnet ihr als Richtwert mit etwa einer Stunde für alle sechs Schritte. Dazu zählen das Ziel, das Ordnen der Inhalte und die Rückmeldung von zwei Personen. Das ist eine Schätzung, kein Messwert. Liegen Ziel und Inhalte bereit, geht es schneller. Die Zeit geht meist ins Ordnen der Inhalte, weniger ins Zeichnen.
Brauche ich ein Werkzeug, um Wireframes zu erstellen?
Nein. Papier und Stift genügen für einen vollwertigen Wireframe. Digitale Werkzeuge helfen, wenn mehrere Personen mitarbeiten oder die Skizze später ins Design wandern soll. Excalidraw, Figma, Miro und Whimsical bieten kostenlose Einstiege.
Brauche ich bei einer kleinen Website einen Wireframe?
Besteht die Website nur aus einer Seite mit klarem Ziel, meist nicht. Sobald mehrere Seiten mit Menü und Formularen zusammenkommen, spart ein Wireframe Rückfragen und Korrekturen im Design.
Muss ich den Wireframe selbst erstellen, oder macht das die Agentur?
Beides geht. Mit einer eigenen Skizze bringt ihr mit, was euch wichtig ist, und die Agentur arbeitet sie aus. Bei Noevu steht am Anfang eines Relaunchs die Konzeption. Ziele, Zielgruppe und Botschaft legt ihr dabei gemeinsam mit uns fest. Mehr dazu unter Website erstellen lassen.
