Was ist ein Wireframe?
Ein Wireframe ist ein vereinfachter, meist schwarz-weißer Entwurf einer Webseite oder App, der Struktur und Anordnung der Elemente zeigt — noch ohne finales Design, Farben oder echte Inhalte. Vergleichbar mit einem Bauplan, legt ein Wireframe fest, wo Navigation, Inhalte, Bilder und Schaltflächen platziert werden. Im Vordergrund steht die
Funktion und Anordnung, nicht die Optik.
Wozu Wireframes dienen
Wireframes helfen, Aufbau und Nutzerführung früh zu durchdenken, bevor Zeit in die grafische Gestaltung fließt. Sie schaffen eine gemeinsame Grundlage für Abstimmungen zwischen Kunde, Konzept und Gestaltung und machen Schwachstellen in der Struktur sichtbar, solange Änderungen noch günstig sind. Damit sind sie ein zentraler Schritt im
UX-Design und tragen zu einer durchdachten
User Experience bei.
Abgrenzung zu Mockup und Prototyp
Ein Wireframe ist bewusst reduziert. Ein Mockup ergänzt anschließend das visuelle Design — Farben, Typografie, Bilder —, während ein Prototyp die Interaktion erfahrbar macht, also Klicks und Übergänge simuliert. Die Reihenfolge ist meist Wireframe, dann Mockup, dann Prototyp. So entsteht Schritt für Schritt aus der groben Struktur ein fertiges Konzept — verwandt mit dem
Flowchart, das Abläufe statt Layouts abbildet.
