# Wireframe > Ein Wireframe ist das schematische Layout-Gerüst einer Website – ohne Farben und Bilder. Es zeigt Struktur und Hierarchie, bevor die Gestaltung beginnt. **Quelle:** https://www.webtree.ch/lexikon/wireframe --- Ein **Wireframe** ist der schematische Bauplan einer Webseite. Er legt fest, wo Inhalte, Buttons, Navigation und Bilder stehen – aber ganz bewusst noch ohne Farben, Schriften oder fertiges Design. Stell dir das wie den Grundriss eines Hauses vor: Du siehst, wo die Räume und Türen sind, bevor entschieden wird, welche Tapete an die Wand kommt. Wireframes werden meist in **Graustufen** mit Platzhaltern erstellt (z. B. Kästen für Bilder, Linien für Text). Man unterscheidet **Low-Fidelity** (grobe Skizzen, oft handgezeichnet) und **Mid-/High-Fidelity** (detaillierter, klickbar in Tools wie Figma). ## Warum es wichtig ist Der grösste Fehler beim Webseiten-Bau: zu früh über Farben und Bilder zu diskutieren, während die **Struktur** noch unklar ist. Der Wireframe trennt diese Ebenen. Du entscheidest erst, *was* wohin gehört und in welcher Reihenfolge der Besucher es sieht – dann erst, *wie* es aussieht. Das spart Zeit und Geld. Eine Änderung im Wireframe dauert Minuten. Dieselbe Änderung im fertigen, programmierten Design kann Stunden kosten. Ausserdem zwingt der Wireframe dich, früh über **Inhaltshierarchie** und die **Suchintention** der Besucher nachzudenken: Welche Botschaft kommt zuerst? Wo steht der wichtigste **Call-to-Action**? ## In der Praxis Ein guter Wireframe-Prozess beachtet: - **Mobile-First denken**: Erst das Layout für kleine Bildschirme skizzieren, dann erweitern – das passt zum [Responsive Design](/lexikon/responsive-design). - **Inhalte vor Optik**: Echte Überschriften und Kernaussagen statt "Lorem Ipsum", damit die Platzverhältnisse stimmen. - **CTA-Platzierung testen**: Wo sitzt der Button, der zur Anfrage führt? Das beeinflusst die [Conversion-Rate](/lexikon/conversion-rate) direkt. - **Klickpfade prüfen**: Findet der Besucher in wenigen Schritten zum Ziel? Wireframes sind die Grundlage für jede gut strukturierte [Landingpage](/lexikon/landingpage): Wenn der Aufbau sauber durchdacht ist, lassen sich einzelne Elemente später gezielt testen und optimieren. Auch ein **A/B-Test** liefert nur dann saubere Ergebnisse, wenn die Grundstruktur stimmt. ## Praxis-Bezug für Schweizer KMU Gerade bei kleineren Budgets lohnt sich der Wireframe-Schritt doppelt. Du siehst früh, ob deine Seite logisch aufgebaut ist – ohne dass schon programmiert wurde. So vermeidest du teure Korrekturschleifen und stellst sicher, dass deine Website nicht nur gut aussieht, sondern auch verständlich führt. In der Regel entsteht der Wireframe vor dem eigentlichen visuellen **UX-Design**: Erst steht das Gerüst, dann folgt die Gestaltung. So ist von Anfang an klar, was entsteht – und worauf es ankommt: ein Aufbau, der Besucher sinnvoll zum Ziel leitet. --- ## Haeufige Fragen **Was ist der Unterschied zwischen Wireframe und Mockup?** Ein Wireframe ist das reine Struktur-Gerüst in Graustufen, ohne Farben und finales Design. Ein Mockup ist die nächste Stufe: Es zeigt das fertige visuelle Design mit Farben, Schriften und Bildern, ist aber meist noch nicht klickbar oder programmiert. **Brauche ich als KMU wirklich einen Wireframe?** Ja, gerade dann. Der Wireframe klärt früh die Struktur und Inhalte, ohne dass schon teure Programmierung läuft. Das spart Korrekturschleifen, macht Kosten kalkulierbar und stellt sicher, dass deine Seite logisch aufgebaut ist und am Ende Anfragen generiert. **Mit welchen Tools erstellt man Wireframes?** Verbreitet sind Figma (Standard für klickbare Wireframes und Prototypen), Balsamiq für bewusst grobe Low-Fidelity-Skizzen sowie klassisches Papier und Stift für erste Ideen. Wichtiger als das Tool ist, dass die Struktur durchdacht und die Inhaltshierarchie klar ist.