Wireframe

Bevor eine App oder eine Website programmiert wird, zeichnet jemand sie auf. Ein Wireframe ist so eine Zeichnung: eine grobe Skizze des Bildschirms in Grau, Weiß und einfachen Linien. Kästen stehen für Bilder, Striche für Textzeilen, Rechtecke für Knöpfe. Man sieht also, was oben, unten, links und rechts stehen soll, aber noch nicht, wie es später aussieht. Der englische Name kommt vom Drahtgittermodell: Man sieht nur das Gerüst, nicht die Verkleidung. Genau das ist der Zweck, denn über ein Gerüst lässt sich schneller streiten als über ein fertiges Haus.

Warum Skizzen billiger sind als Code

Eine Änderung kostet unterschiedlich viel, je nachdem wann sie kommt. In einem Wireframe verschiebt man einen Knopf in zehn Sekunden. In einer fertig programmierten App kann dieselbe Änderung Tage kosten, weil Code, Tests und manchmal auch Server angepasst werden müssen. Deshalb entwerfen Teams zuerst grob und werden erst später genau.

Der zweite Grund ist die Diskussion selbst. Zeigt man Kollegen einen bunten, fertig gestalteten Entwurf, reden alle über die Farbe des Knopfes. Zeigt man einen grauen Wireframe, reden sie über die eigentliche Frage: Findet ein Nutzer hier, was er sucht? Die Schlichtheit ist also kein Mangel, sondern ein Werkzeug zur Fokussierung.

Wichtig ist die Abgrenzung zu zwei verwandten Begriffen. Ein Mockup ist ein Entwurf mit echten Farben, Schriften und Bildern, aber ohne Funktion. Ein Prototyp ist klickbar: Man kann Knöpfe drücken und landet auf der nächsten Seite. Der Wireframe steht davor, er ist die einfachste und schnellste Stufe.

Vom Papierkasten zum klickbaren Entwurf

Am Anfang steht meist eine Liste: Was muss auf diesen Bildschirm? Bei einem Onlineshop wären das etwa Produktbild, Preis, Größenauswahl, Bewertungen und der Kaufknopf. Dann ordnet man diese Elemente nach Wichtigkeit an. Was zuerst gesehen werden soll, kommt nach oben und wird größer gezeichnet.

Gezeichnet wird entweder mit Stift auf Papier oder in Programmen wie Figma, Sketch oder Balsamiq. Für Texte setzt man oft Platzhalter ein, sogenannten Blindtext, damit niemand über Formulierungen diskutiert. Bilder werden durch ein Rechteck mit einem Kreuz darin angedeutet. Diese Konventionen sind in der Branche so verbreitet, dass fast jeder sie sofort versteht.

Oft entstehen mehrere Wireframes hintereinander, für jeden Schritt einer Aufgabe. Verbindet man sie mit Pfeilen, ergibt sich ein Flow: der Weg vom Produkt über den Warenkorb bis zur Bezahlung. Erst wenn dieser Weg schlüssig ist, kommen Farben und Gestaltung dazu. Ein typischer Fehler ist, den Wireframe zu schön zu machen. Dann wirkt er wie eine fertige Entscheidung, obwohl er eine offene Frage sein sollte.

Wireframes in Studios, Startups und KI-Werkzeugen

Wireframes begegnen einem überall dort, wo Bildschirme geplant werden. Agenturen zeigen sie Kunden in frühen Terminen. Startups nutzen sie, um Investoren eine geplante App zu erklären, lange bevor eine Zeile Code existiert. Auch im Informatik- oder Kunstunterricht tauchen sie auf, wenn eine Schülergruppe eine App entwerfen soll.

Neu ist die Rolle der künstlichen Intelligenz dabei. Es gibt Werkzeuge, denen man einen abfotografierten Papier-Wireframe zeigt und die daraus Code für eine echte Website erzeugen. Umgekehrt liefern Sprachmodelle auf eine Beschreibung hin einen ersten Entwurf, den ein Mensch dann überarbeitet. In Tech-News stehen Wireframes deshalb oft in Berichten über Design-Software wie Figma und deren KI-Funktionen.

Für Anleger ist der Begriff interessant, weil er einen Frühindikator beschreibt. Ein Unternehmen, das Wireframes zeigt, hat ein Produkt noch nicht gebaut, sondern geplant. Wer den Unterschied zwischen Skizze, gestaltetem Entwurf und laufender Software kennt, schätzt solche Ankündigungen realistischer ein.