--- title: "Wireframe" url: "https://www.insideuxdesign.com/de/glossar/wireframe" language: "de" description: "Was ist ein Wireframe? Einfach erklärt mit Beispiel und Praxistipps. Erfahre, wie du Struktur klärst, bevor über Farben gestritten wird." published: "2026-10-14T09:50:32+02:00" updated: "2026-10-14T13:00:02+02:00" --- # Wireframe Ein Wireframe ist ein schematischer Grundriss einer Seite oder eines Screens. Er zeigt, welche Inhalte und Bedienelemente wohin gehören, bewusst ohne Farben, Schriften und Bilder. - **Buchstabe:** W UX-Glossar # Wireframe Ein Wireframe ist ein schematischer Grundriss einer Seite oder eines Screens. Er zeigt, welche Inhalte und Bedienelemente wohin gehören, bewusst ohne Farben, Schriften und Bilder. Stell dir vor, eine Tischlerei will eine neue Website. Im ersten Termin zeigt das beauftragte Designbüro gleich einen fertigen Entwurf mit Fotos, Holzfarben und schicker Schrift. Die Diskussion dreht sich danach eine Stunde lang um den Braunton des Hintergrunds. Ob die Kundschaft überhaupt schnell die Telefonnummer und die Leistungen findet, fragt niemand. Mit einem Wireframe wäre das anders gelaufen. Er zeigt nur Kästen, Linien und Platzhalter und lenkt den Blick damit auf das, was zuerst geklärt werden muss: Was steht wo, und wie kommt man weiter? ## Einfach erklärt Ein Wireframe ist der Grundriss einer Seite oder eines App-Screens. So wie ein Architekturplan zeigt, wo Küche, Bad und Türen liegen, bevor jemand über Fliesen spricht, zeigt ein Wireframe, wo Navigation, Überschriften, Texte, Bilder und Buttons hinkommen. Farben, Schriften und Fotos lässt er bewusst weg, Bilder sind oft nur ein Kasten mit einem Kreuz. Der Name kommt vom englischen „wire frame“, also Drahtgestell. Gemeint ist ein Skelett, das Form und Aufbau zeigt, aber noch keine Oberfläche hat. Ein Wireframe bildet damit die Struktur ab, die zuvor in der [Informationsarchitektur](https://www.insideuxdesign.com/de/glossar/informationsarchitektur) festgelegt wurde. Wie du Inhalte sinnvoll ordnest, bevor du sie in Wireframes überträgst, erklärt der Artikel [Einführung in die Informationsarchitektur](https://www.insideuxdesign.com/de/blog/einfuehrung-in-die-informationsarchitektur). ## Wireframe, Mockup, Prototyp: der Unterschied Die drei Begriffe werden oft durcheinandergeworfen. Ein **Wireframe** zeigt die Struktur. Ein **Mockup** zeigt das Aussehen, also mit echten Farben, Schriften und Bildern, ist aber meist statisch. Ein [Prototyp](https://www.insideuxdesign.com/de/glossar/prototyp) simuliert die Bedienung: Du kannst klicken und Abläufe ausprobieren. Auch ein Wireframe kann klickbar verbunden werden und wird dann zu einem einfachen Prototyp. Wireframes gibt es in unterschiedlicher Detailtreue. Low-Fidelity-Wireframes sind grobe Skizzen, oft auf Papier oder am Whiteboard. Mid-Fidelity-Wireframes entstehen meist digital, etwa in [Figma](https://www.insideuxdesign.com/de/ressourcen/figma), mit Grautönen für die Gewichtung und ersten echten Texten. Die Nielsen Norman Group weist darauf hin, dass klassische Wireframes Seitenaufbau gut zeigen, Interaktionen und sich verändernde Zustände in Apps aber kaum. Dafür gibt es *Wireflows*: Wireframes, die mit Pfeilen verbunden sind und zeigen, welcher Klick zu welchem Screen führt. ## Ein Beispiel Zurück zur Tischlerei. Vorher: ein hübscher Entwurf, viel Gespräch über Farben, aber die Kontaktdaten stehen ganz unten im Footer. Nachher: Das Team beginnt mit drei schnellen Wireframes der Startseite. In Variante B stehen Telefonnummer und „Angebot anfragen“ ganz oben, die Leistungen folgen als drei Kästen. Im Gespräch mit der Tischlerei fällt sofort auf, dass eine Rubrik für Referenzen fehlt. Das ist in zehn Minuten ergänzt. Erst danach geht es an Farben und Fotos, und die Gestaltung baut auf einer geprüften Struktur auf. ## In der Praxis - **Mit echten Inhalten arbeiten.** Ersetze „Lorem ipsum“ früh durch echte Überschriften und Button-Texte. Erst dann merkst du, ob Platz und Reihenfolge passen. - **Mehrere Varianten skizzieren.** Drei grobe Entwürfe in einer halben Stunde bringen mehr als einer, an dem du einen Tag feilst. - **Feedback gezielt einholen.** Frag nach Struktur und Abläufen, nicht nach Geschmack. Für Fragen zum Aussehen ist später noch Zeit. ## Verwandte Begriffe [Prototyp](https://www.insideuxdesign.com/de/glossar/prototyp), [Informationsarchitektur](https://www.insideuxdesign.com/de/glossar/informationsarchitektur), [Design System](https://www.insideuxdesign.com/de/glossar/design-system) ## Quellen - [Page Laubheimer: Wireflows: A UX Deliverable for Workflows and Apps. Nielsen Norman Group, 2016](https://www.nngroup.com/articles/wireflows/) - [Interaction Design Foundation: What are Wireframes? IxDF, o. J.](https://ixdf.org/literature/topics/wireframe) ## Weitere Begriffe [ ### A/B-Test Ein A/B-Test ist ein Experiment, bei dem zwei Varianten einer Seite oder eines Elements gleichzeitig an zufällig aufgeteilte Besuchende ausgespielt werden. So entscheidest du anhand echter Daten, welche Variante besser funktioniert. ](https://www.insideuxdesign.com/de/glossar/a-b-test) [ ### ARIA ARIA ist ein W3C-Standard, der HTML um Rollen, Zustände und Eigenschaften ergänzt. So erfahren Screenreader, was ein Element ist und wie es sich gerade verhält. ](https://www.insideuxdesign.com/de/glossar/aria) [ ### Affordance Eine Affordance beschreibt, welche Handlung ein Objekt möglich macht und ob Menschen das erkennen: Ein Button lädt zum Drücken ein, ein Griff zum Ziehen. ](https://www.insideuxdesign.com/de/glossar/affordance) [ ### Alternativtext Ein Alternativtext ist eine kurze Textfassung eines Bildes im HTML-Attribut alt. Screenreader lesen ihn vor, damit Menschen, die das Bild nicht sehen, dieselbe Information bekommen. ](https://www.insideuxdesign.com/de/glossar/alternativtext) [ ### Arbeitsgedächtnis Das Arbeitsgedächtnis hält Informationen für kurze Zeit fest, damit du mit ihnen arbeiten kannst. Es fasst nur wenig, deshalb sollten Interfaces möglichst wenig Merkarbeit verlangen. ](https://www.insideuxdesign.com/de/glossar/arbeitsgedaechtnis) [ ### Atomic Design Atomic Design ist eine Methode, Benutzeroberflächen aus kleinen, wiederverwendbaren Bausteinen aufzubauen: von einzelnen Elementen wie Buttons bis zu ganzen Seiten. ](https://www.insideuxdesign.com/de/glossar/atomic-design) [ ### BFSG Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet seit dem 28. Juni 2025 viele Unternehmen, bestimmte Produkte und digitale Dienstleistungen wie Onlineshops barrierefrei zu gestalten. ](https://www.insideuxdesign.com/de/glossar/bfsg) [ ### Barrierefreiheit Barrierefreiheit bedeutet, dass Websites, Apps und digitale Dokumente so gestaltet sind, dass alle Menschen sie nutzen können, auch mit einer Seh-, Hör-, motorischen oder kognitiven Behinderung. ](https://www.insideuxdesign.com/de/glossar/barrierefreiheit) [ ### Card Sorting Card Sorting ist eine Research-Methode, bei der Menschen Begriffe auf Karten in Gruppen sortieren. So siehst du, wie sie Inhalte gedanklich ordnen, und kannst eine verständliche Navigation planen. ](https://www.insideuxdesign.com/de/glossar/card-sorting) [ ### Cognitive Load Cognitive Load ist die geistige Anstrengung, die nötig ist, um eine Oberfläche zu verstehen und zu bedienen. Je weniger unnötige Denkarbeit ein Design verlangt, desto leichter fällt die eigentliche Aufgabe. ](https://www.insideuxdesign.com/de/glossar/cognitive-load) [ ### Contextual Inquiry Contextual Inquiry ist eine Research-Methode, bei der du Menschen in ihrem echten Arbeitsumfeld beobachtest und befragst. So siehst du, wie sie Aufgaben tatsächlich erledigen, nicht nur, wie sie davon erzählen. ](https://www.insideuxdesign.com/de/glossar/contextual-inquiry) [ ### Conversion Eine Conversion ist eine gewünschte Aktion auf einer Website oder in einer App, etwa ein Kauf oder eine Anmeldung. Die Conversion Rate zeigt, welcher Anteil der Besuche dazu führt. ](https://www.insideuxdesign.com/de/glossar/conversion)