Was ist ein Wireframe? Warum der Websiteentwurf vor dem Design kommt

Ein Wireframe ist das schlichte Gerüst einer Webseite, ganz ohne Farben und Bilder. Wir bei Talha Aslan und Team beginnen jedes Designprojekt mit dieser Skizze. In diesem Leitfaden zeigen wir Ihnen den Unterschied zwischen grober und detailreicher Skizze, die passenden Seiten, die Freigabe durch den Kunden und den Weg ins visuelle Design.

Denken Sie an den Grundriss eines Architekten. Sie legen zuerst Räume und Türen fest und wählen erst danach die Wandfarbe. Ein Wireframe erfüllt dieselbe Aufgabe für eine Website. Zum Beispiel zeigt er auf einer Leistungsseite die Reihenfolge von Überschrift, Kurztext, Angebotsbutton und Vertrauenselementen.

Außerdem schafft ein Wireframe eine gemeinsame Sprache im Team. Designer, Entwickler, Texter und Inhaber schauen auf dasselbe Blatt. Daher rücken frühe Kommentare wie „Das Logo bitte größer“ in den Hintergrund. Stattdessen steht die Frage im Mittelpunkt: Was sagt dieser Abschnitt dem Besucher? Kurz gesagt lenkt ein Wireframe die Diskussion an die richtige Stelle.

Warum kommt das Wireframe vor dem visuellen Design?

Der Grund ist einfach: Eine Struktur zu ändern, kostet viel weniger als ein fertiges Design umzubauen. In einer Skizze aus grauen Kästen verschieben Sie einen Abschnitt in wenigen Minuten. In einem fertigen Entwurf mit Farben, Bildern und Animationen bedeutet dieselbe Änderung dagegen oft, den ganzen Bildschirm neu aufzubauen.

Zudem lenkt Optik ab. Sobald Beteiligte einen farbigen Entwurf sehen, reagieren sie zuerst auf Geschmack. Allerdings besteht die eigentliche Aufgabe einer Seite darin, den Besucher zu einer Entscheidung zu führen. Eine graue Skizze hält das Gespräch deshalb bei Reihenfolge und Klarheit der Botschaft.

Die Nielsen Norman Group beschreibt in ihrem Artikel über Prototypen mit niedriger und hoher Detailtreue einen ähnlichen Punkt. Designer überarbeiten grobe Entwürfe bereitwilliger, und Beteiligte erkennen, dass das Design noch nicht fertig ist. Deshalb lassen wir in unseren Webdesign Projekten zuerst das Seitengerüst freigeben und öffnen erst dann die Farbpalette.

Worin unterscheiden sich grobe und detailreiche Wireframes?

Die Detailtreue, auf Englisch Fidelity, beschreibt, wie stark eine Skizze dem fertigen Produkt ähnelt. Ein grobes Wireframe entsteht auf Papier oder mit einfachen Kästen. Linien stehen für Text, durchgestrichene Kästen für Bilder. Ein detailreiches Wireframe kommt dagegen echten Maßen, echten Texten und klickbaren Links sehr nahe.

Beide Varianten konkurrieren nicht miteinander, denn jede hilft in einer anderen Projektphase. Im ersten Termin liefert eine grobe Skizze schnell Ideen. Sobald die Struktur steht, prüfen Sie mit der detailreichen Version Abstände, Größen und Interaktionen.

• Niedrige Detailtreue: Papier, Whiteboard oder schlichte Kästen. Ziel sind Reihenfolge und grobe Proportionen.
• Mittlere Detailtreue: Ausgerichtete Kästen in einem digitalen Werkzeug, echte Überschriften und ein Raster.
• Hohe Detailtreue: Echte Texte, echte Maße und ein klickbarer Ablauf. Farbe und Markenelemente bleiben sparsam.

In der Praxis starten wir bei den meisten Unternehmenswebsites grob und holen die Freigabe bei mittlerer Detailtreue ein. Die hohe Detailtreue nutzen wir nur bei komplexen Abläufen. Beispiele sind mehrstufige Formulare, Produktfilter oder ein Bestellprozess.

Sind Wireframe, Mockup und Prototyp dasselbe?

Nein. Es handelt sich um verschiedene Phasen im Designprozess, und jede beantwortet eine andere Frage. Ein Wireframe klärt: Was steht wo? Danach zeigt ein Mockup: Wie sieht die Seite aus? Schließlich prüft ein Prototyp: Was passiert beim Klick? Die folgende Tabelle fasst die Unterschiede zusammen.

Wenn ein Kunde also „einen Entwurf“ wünscht, klären Sie vorher, was er erwartet. Erwartet er einen farbigen Bildschirm und erhält ein graues Wireframe, ist die Enttäuschung groß. Deshalb halten wir im ersten Termin schriftlich fest, was wir in welcher Phase liefern.

Für welche Seiten brauchen Sie ein Wireframe?

Sie brauchen allerdings nicht für jede Seite ein eigenes Wireframe. Das Ziel besteht vielmehr darin, wiederkehrende Vorlagen und entscheidende Seiten zu erkennen. Eine Unternehmenswebsite hat oft Dutzende Seiten. Die meisten davon teilen sich jedoch wenige gemeinsame Vorlagen.

1. Startseite: Der erste Eindruck und der Verteiler zu allen Bereichen.
2. Vorlage für Leistung oder Produkt: Die Seite mit der größten Nähe zum Abschluss; jede Leistung nutzt sie.
3. Kategorie oder Übersicht: Hier entscheiden Sie über Filter, Sortierung und Kartenlayout.
4. Kontakt und Anfrageformular: Reihenfolge der Felder und Platz für Fehlermeldungen.
5. Blogübersicht und Artikelvorlage: Lesbarkeit und Platz für interne Links.
6. Über uns: Die Anordnung der Vertrauenselemente.

Ein Beispielszenario: Ein Ingenieurbüro bietet zwölf Leistungen an. Statt zwölf Zeichnungen erstellen Sie eine einzige Leistungsvorlage. Danach setzen Sie die längste und die kürzeste Leistung testweise ein. Somit sehen Sie, dass die Vorlage mit viel und wenig Inhalt funktioniert.

Welche Informationen brauchen Sie vor dem ersten Wireframe?

Eine gute Skizze beginnt nicht auf einem leeren Blatt. Bevor Sie zum Stift greifen, sollten Sie wissen, wen die Website anspricht, mit welcher Frage Besucher kommen und was sie tun sollen. Diese Angaben sammeln Teams meist im Briefing zum Projekt.

• Zielgruppe und die drei häufigsten Fragen der Besucher.
• Ein Hauptziel pro Seite, etwa Anfrage, Anruf oder Formular.
• Eine Inhaltsübersicht: Welche Texte, Bilder und Dokumente liegen schon vor?
• Die Sitemap und die Menüstruktur.
• Suchdaten: Mit welchen Begriffen suchen Menschen nach dieser Leistung?
• Technische Grenzen: Plattform, Sprachversionen und Schnittstellen.

Wie Sie das Briefing aufbauen, erklären wir im Leitfaden Webdesign Briefing erstellen. Für Menüs und Seitenhierarchie ist unser Artikel zur Informationsarchitektur ein guter Einstieg. Ein Wireframe baut auf beiden Arbeiten auf; das heißt, es ersetzt sie nicht.

Wie legen Sie die Inhaltspriorität im Wireframe fest?

Die Inhaltspriorität ist Ihre Entscheidung darüber, was ein Besucher zuerst sehen soll. Ordnen Sie dafür jedem Abschnitt eine Frage zu. Zunächst fragt sich der Besucher: Bin ich hier richtig? Danach folgen die Fragen „Was bringt mir das?“ und „Warum sollte ich Ihnen vertrauen?“. Schließlich will er wissen, was er jetzt tun soll.

Eine praktische Methode: Schreiben Sie jeden Abschnitt auf eine Papierkarte und legen Sie die Karten auf einen Tisch. Notieren Sie dazu die Frage, die der Abschnitt beantwortet. Eine Karte ohne Frage ist also wahrscheinlich überflüssig. Andererseits gehören zwei Karten mit derselben Frage meist zusammen.

Der erste Bildschirm verdient besondere Sorgfalt, denn Besucher entscheiden vor dem Scrollen, ob sie bleiben. Wie wir diesen Bereich planen, zeigen wir in unserem Beitrag Was ist Above the Fold. Trotzdem sollten Sie nicht alles in die erste Ansicht pressen. Ein Wireframe zeigt Priorität über Größe, Position und Weißraum. Auch ohne Farbe muss die Hierarchie klar lesbar sein.

Echter Text oder Platzhalter im Wireframe?

Nutzen Sie vor allem echten Text, wann immer es geht. Platzhaltertext wie Lorem ipsum füllt zwar einen Kasten, verdeckt aber die tatsächliche Länge und den Ton des Inhalts. Zum Beispiel fasst ein Feld für eine Überschrift aus zwei Wörtern später keine Überschrift aus sieben Wörtern, und das Layout bricht.

Liegt der finale Text noch nicht vor, schreiben Sie zumindest realistische Entwürfe. Statt „Hier steht der Leistungstitel“ setzen Sie eine Beispielzeile wie „Industrielle Dachdämmung, Vor Ort Termin innerhalb von 48 Stunden“. So prüfen Sie Länge, Zeilenumbruch und Buttontext schon früh.

Schreiben Sie außerdem Button und Formularbeschriftungen in ihrer echten Form. Der Unterschied zwischen „Absenden“ und „Angebot anfordern“ wirkt klein, verändert aber die Erwartung des Besuchers. Wie Sie solche Mikrotexte formulieren, zeigen wir im Beitrag Was ist UX Writing. Kurz gesagt ist Text im Wireframe kein Schmuck, sondern Teil des Gerüsts.

Warum sollten Sie das mobile Wireframe getrennt planen?

Weil Abschnitte auf dem Smartphone untereinander statt nebeneinander stehen, und diese Reihenfolge verändert die Priorität. Ein Vertrauenskasten in der rechten Spalte des Desktops rutscht mobil womöglich ganz nach unten. Übersehen Sie das im Wireframe, sehen mobile Besucher Ihre wichtigste Botschaft vielleicht nie.

Google empfiehlt in seiner Dokumentation zur Mobile First Indexierung, dass mobile und Desktopversion denselben Hauptinhalt und dieselben aussagekräftigen Überschriften enthalten. Akkordeons und Tabs sind in Ordnung, solange der Inhalt gleichwertig bleibt. Statt einen Abschnitt mobil aus Platzgründen zu streichen, verschieben Sie ihn also besser in einen aufklappbaren Bereich.

Wir zeichnen die mobile Skizze als eigene Lesereihenfolge, nicht als verkleinerte Kopie des Desktops. Die Logik dahinter erklären wir im Artikel Was ist Mobile First Design. Zudem markieren wir Daumenzonen, fixierte Buttons und das Menüverhalten direkt im mobilen Wireframe.

Wie berücksichtigen Sie Barrierefreiheit schon im Wireframe?

Sie berücksichtigen sie an der günstigsten Stelle, also in der Skizze. Themen wie Farbkontrast gehören zum visuellen Design. Allerdings sind Überschriftenhierarchie, Seitenbereiche und die Reihenfolge bei Tastaturbedienung klare Aufgaben für das Wireframe.

Wie das Tutorial zur Seitenstruktur des W3C erläutert, benennen Überschriften die Abschnitte und sollten so verschachtelt sein, dass sie deren Beziehung zueinander zeigen. Seitenbereiche wie Kopfbereich, Hauptinhalt und Fußbereich helfen Nutzern von Screenreadern, direkt zum gewünschten Inhalt zu springen.

• Notieren Sie neben jedem Kasten die Überschriftenebene (H1, H2, H3).
• Prüfen Sie, ob die Seite genau eine Überschrift der Ebene H1 hat.
• Nummerieren Sie die Reihenfolge, in der sich der Tastaturfokus bewegt.
• Vermerken Sie, ob ein Bild Information trägt oder nur dekorativ ist.
• Setzen Sie Formularbeschriftungen außerhalb des Eingabefelds, nicht hinein.

Somit erhalten Entwickler eine direkte Anleitung. Alle Grundsätze im Überblick finden Sie in unserem Beitrag zur barrierefreien Website nach WCAG und BFSG.

Wie prägt ein Wireframe Ihre SEO Struktur?

Ein Wireframe ist der erste Entwurf jener Struktur, die Suchmaschinen später lesen. In dieser Phase entscheiden Sie über die Reihenfolge der Überschriften, den Platz interner Links und die Länge der Inhaltsblöcke. SEO nachträglich in ein schönes Design zu pressen, verbiegt dagegen meist die Struktur.

Ein Beispiel: Sie möchten auf einer Leistungsseite einen FAQ Bereich, der häufige Suchfragen beantwortet. Dann gehört seine Position ins Wireframe. Ebenso entscheiden Sie hier, ob Links zu verwandten Leistungen als Kartenreihe oder als Links im Fließtext erscheinen.

Trotzdem darf SEO die Seite nicht in eine Textwüste verwandeln. Wir notieren deshalb an jedem Abschnitt eine geschätzte Wortspanne. So weiß das Inhaltsteam, wie viel Text nötig ist, und der Designer plant den passenden Raum. Folglich finden Sichtbarkeit in der Suche und Lesbarkeit auf demselben Plan zusammen.

Der Ablauf: ein Wireframe Schritt für Schritt

Konkret folgen wir bei Unternehmenswebsites dem unten stehenden Ablauf. Größere Projekte brauchen mehr Schritte, aber die Reihenfolge bleibt fast immer gleich.

1. Ziel notieren: Halten Sie den einen Hauptzweck der Seite in einem Satz fest.
2. Inhalte sammeln: Listen Sie jedes Element auf, das auf die Seite kommt.
3. Grob skizzieren: Probieren Sie drei Layouts auf Papier aus, insgesamt fünf bis dreißig Minuten.
4. Ein Layout wählen: Nehmen Sie das Layout mit dem kürzesten Weg zum Ziel.
5. Digital umsetzen: Richten Sie Kästen an einem Raster aus und ergänzen Sie echte Überschriften.
6. Mobile Reihenfolge zeichnen: Ordnen Sie denselben Inhalt in einer Spalte neu.
7. Notizen ergänzen: Überschriftenebenen, Interaktionen und Inhaltslängen.
8. Intern prüfen: Eine Kollegin oder ein Kollege liest die Skizze ohne Erklärung.
9. Dem Kunden vorstellen: Erläutern Sie Entscheidungen und Gründe gemeinsam.

Das Werkzeug für die digitale Phase ist dagegen zweitrangig, denn die Struktur zählt. Wir arbeiten meist mit Figma und beschreiben unsere Schritte im Leitfaden Webdesign mit Figma.

Braucht auch eine einzelne Landingpage ein Wireframe?

Ja, bei einer Kampagnenseite ist es sogar noch wichtiger. Solche Seiten führen Besucher aus Anzeigen meist zu einer einzigen Aktion. Entweder füllen sie das Formular aus, oder sie gehen; ein Menü oder Nebenwege gibt es dazwischen nicht.

Daher beeinflusst die Reihenfolge der Abschnitte direkt das Ergebnis. Zuerst kommt eine Überschrift, die das Versprechen der Anzeige aufgreift, dann folgen Nutzen, Vertrauenselemente und schließlich das Formular. Allerdings gilt diese Reihenfolge nicht in jeder Branche. Bei einer hochpreisigen B2B-Dienstleistung wollen Besucher zum Beispiel vor dem Formular Ablauf und Referenzen sehen.

Ein Beispielszenario: Ein Softwareanbieter wirbt für eine kostenlose Testphase. Im Wireframe planen Sie das Formular oben und unten. Dann ordnen Sie die Abschnitte dazwischen nach den häufigsten Einwänden. Für den B2B Bereich lesen Sie unseren Beitrag B2B Landingpage erstellen. Kurz gesagt verlangt auch eine kurze Seite dieselbe Sorgfalt im Gerüst.

Welche Werkzeuge eignen sich für Wireframes?

Zunächst: Das Werkzeug bestimmt nicht die Qualität der Skizze. Für erste Ideen sind Papier, Stifte und Haftnotizen oft am schnellsten. Zudem erlaubt ein Whiteboard in Teamterminen, dass alle gleichzeitig zeichnen. In der digitalen Phase erleichtert ein Werkzeug für Oberflächendesign mit Raster, Komponenten und Kommentaren die Arbeit.

Stellen Sie bei der Auswahl drei Fragen. Erstens: Nutzt Ihr Team dieses Werkzeug bereits? Zweitens: Kann der Kunde die Datei ohne Installation öffnen? Drittens: Lassen sich klickbare Links einbauen? Jedes Werkzeug, das alle drei Fragen erfüllt, erfüllt seinen Zweck.

Wechseln Sie außerdem nicht mitten im Projekt das Werkzeug. Wer in einem Programm beginnt und in einem anderen endet, verliert oft Notizen und Kommentare. Deshalb wählen wir das Werkzeug zu Beginn und arbeiten bis zum Schluss in derselben Datei.

Warum ist ein Wireframe im Onlineshop besonders wichtig?

Im Onlineshop durchlaufen Besucher mehrere Ansichten: Kategorie, Produkt, Warenkorb und Kasse. Jeder Schritt ist also eine eigene Entscheidung. Folglich wirkt sich ein Strukturproblem in einem Schritt auf alle folgenden Schritte aus.

Ein Beispielszenario: Ein Shop für Heimtextilien versteckt die Größentabelle in einem Tab der Produktseite. Am Desktop wirkt das unproblematisch. Mobil erreicht der Besucher jedoch den Warenkorbbutton, ohne die Tabelle je zu finden. Hätten Sie die mobile Reihenfolge im Wireframe gezeichnet, hätten Sie die Tabelle direkt über dem Button eingeplant.

• Legen Sie fest, welche Angaben die Produktkarte zeigt, etwa Preis, Bestand und Versand.
• Zeigen Sie in einer eigenen Skizze, wie sich Filter mobil öffnen.
• Zeichnen Sie jeden Schritt von Warenkorb und Kasse; machen Sie die Schrittzahl sichtbar.
• Planen Sie Fehlerzustände wie „nicht auf Lager“ oder eine abgelehnte Karte.

Diese Schritte verringern Überraschungen im E-Commerce Kassenprozess und geben Entwicklern eine klare Richtung.

Wie übergeben Sie ein Wireframe an die Entwicklung?

Zunächst ist eine Übergabe mehr als ein Dateilink. Entwickler sollten allein durch die Skizze verstehen, wie sich jeder Abschnitt verhält. Ergänzen Sie daher ein kurzes Notizdokument, oder schreiben Sie die Notizen direkt ins Wireframe.

Klären Sie darin einige Punkte. Welcher Bereich zieht dynamische Inhalte? Welchen Abschnitt pflegt die Redaktion im Verwaltungsbereich? Wohin führt jeder Link, und was passiert nach dem Absenden eines Formulars? Kennzeichnen Sie zudem jeden Abschnitt, der sich mobil einklappt oder ausblendet.

Nach der Übergabe halten wir einen kurzen gemeinsamen Termin ab. Der Entwickler erklärt die Skizze mit eigenen Worten, und wir korrigieren Lücken oder Missverständnisse sofort. Dadurch entstehen in der Entwicklung deutlich weniger Rückfragen. Außerdem müssen Designer und Entwickler dieselbe Entscheidung nicht zweimal diskutieren.

Wie präsentieren Sie ein Wireframe zur Freigabe?

Beschränken Sie die Präsentation nicht auf den Versand einer Datei. Wer ohne Erklärung einen Bildschirm voller grauer Kästen erhält, fragt oft: „Ist das schon das Design?“ Stellen Sie das Wireframe deshalb in einem kurzen Termin mit geteiltem Bildschirm vor und erklären Sie, warum jeder Abschnitt an seiner Stelle steht.

Beginnen Sie mit einem einfachen Satz: „Das ist das Gerüst, Farbe und Bilder folgen später.“ Lesen Sie die Seite dann mit den Augen des Besuchers. Was sieht er zuerst, was fragt er sich danach, und wo entscheidet er? Diese Erzählung lenkt die Rückmeldungen des Kunden auf die Struktur.

Holen Sie die Freigabe schriftlich ein und benennen Sie genau, was der Kunde freigibt. Eine Notiz wie „Abschnittsfolge der Startseite und Leistungsvorlage freigegeben, Texte sind Entwurf“ genügt. So erleben Sie im visuellen Design seltener Kehrtwenden wie „Diesen Abschnitt lassen wir doch weg“. Zudem hilft es, den Freigabeschritt mit den Korrekturrunden im Vertrag zu verknüpfen.

Wie sammeln Sie Feedback zu einem Wireframe?

Sammeln Sie Feedback mit Aufgaben statt mit der Frage „Gefällt es Ihnen?“. Fragen Sie den Kunden oder einige Nutzer der Zielgruppe zum Beispiel: „Wenn Sie ein Angebot möchten, wohin klicken Sie?“ Zögert die Person, ist die Struktur noch nicht klar.

• Sammeln Sie Kommentare pro Abschnitt; eine Notiz pro Kasten statt einer langen E-Mail.
• Trennen Sie strukturelle Kommentare (Reihenfolge, fehlende Abschnitte) von visuellen (Farbe, Schrift).
• Parken Sie visuelle Kommentare auf einer Liste für die nächste Phase.
• Klären Sie widersprüchliche Kommentare mit der entscheidenden Person in einem einzigen Termin.

Wie derselbe Artikel der Nielsen Norman Group betont, äußern Testpersonen bei groben Skizzen Kritik womöglich offener. Das macht Tests mit Wireframes wertvoll, weil Sie Probleme im günstigsten Moment finden. Für eine umfassendere Prüfung der Nutzererfahrung empfehlen wir unseren Leitfaden UX Audit durchführen.

Wie gelingt der Übergang vom Wireframe zum visuellen Design?

Der Übergang bedeutet, das freigegebene Gerüst mit Ihrer Markenebene einzukleiden, ohne es zu zerstören. Während der Designer Farbe, Schrift, Bilder und Abstände ergänzt, bleiben Abschnittsfolge und Hierarchie erhalten. Muss sich die Struktur ändern, besprechen Sie das offen und mit Begründung, nicht stillschweigend.

Dafür erstellen wir zunächst eine Stilbasis aus Farbpalette, Überschriftengrößen, Buttonstilen und Raster. Danach übertragen wir die freigegebenen Wireframes nacheinander auf diese Basis. Wir beginnen mit der wichtigsten Vorlage, meist der Leistungsseite. Sobald der Kunde sie freigibt, laufen die übrigen Vorlagen deutlich schneller.

Achten Sie zudem darauf, dass die Notizen aus dem Wireframe erhalten bleiben. Übertragen Sie Überschriftenebenen, Tastaturreihenfolge und Inhaltslängen in die Designdatei. Sonst diskutiert das Team diese Entscheidungen in der Entwicklung erneut. Kurz gesagt ist ein Wireframe kein Schmierzettel, sondern eine Referenz bis zum Projektende.

Welche Fehler sehen wir bei Wireframes am häufigsten?

Die Fehler aus unserer Praxis lassen sich meist wenigen Gruppen zuordnen. Wenn Sie diese kennen, vermeiden Sie dieselben Fallen.

• Zu früh Farbe einsetzen: Die Diskussion wandert von Struktur zu Geschmack.
• Nur den Desktop zeichnen: Die mobile Lesereihenfolge überrascht später alle.
• Bei Lorem ipsum bleiben: Der echte Text kommt, und die Kästen passen nicht.
• Jede Seite neu zeichnen: Es entsteht keine Vorlagenlogik, und die Einheitlichkeit leidet.
• Nur mündlich freigeben: Was genau freigegeben war, führt später zu Streit.
• Leere Zustände vergessen: Niemand plant, was der Bildschirm zeigt, wenn die Suche nichts findet oder ein Formular scheitert.

Vor allem der letzte Punkt rutscht häufig durch. Was sehen Besucher zum Beispiel in einer Blogkategorie ohne Beiträge oder nach einem fehlgeschlagenen Formularversand? Jeder dieser Zustände verdient ein kleines Wireframe. Dann arbeiten Entwickler nach einem fertigen Plan, statt zu raten.

Wie lange dauert ein Wireframe, und wie viele Korrekturrunden brauchen Sie?

Die Dauer hängt von der Zahl der Vorlagen und vom Tempo der Entscheider ab; eine feste Zahl wäre irreführend. Als Startspanne aus unserer Praxis kann die Wireframe Phase für die Hauptvorlagen einer kleinen Unternehmenswebsite einige Arbeitstage bis zwei Wochen dauern. Das ist allerdings keine Garantie, und verspätete Inhalte verlängern den Zeitraum.

Für Korrekturrunden gilt ebenso eine ähnliche Logik. Wir planen meist eine erste Präsentation und eine Korrekturrunde. Bleibt die Struktur danach unklar, liegt das Problem meist in einem vagen Briefing, nicht in der Skizze. In diesem Fall bringt ein erneutes Gespräch über die Ziele schneller Ergebnisse als weitere Entwürfe.

Andererseits wirkt es verlockend, die Wireframe Phase zur Zeitersparnis zu überspringen. Treffen Sie die Strukturentscheidungen jedoch nicht hier, treffen Sie sie im visuellen Design oder im Code. Dort kostet dieselbe Änderung dann deutlich mehr. Somit schützen wenige Tage Skizzenarbeit die folgenden Wochen.

Checkliste: Was prüfen Sie vor der Freigabe eines Wireframes?

Bevor Sie die Skizze an den Kunden schicken, haken Sie die folgende Liste Punkt für Punkt ab. Lautet eine Antwort „nein“, verschieben Sie die Präsentation.

• Hat jede Seite ein schriftlich festgehaltenes Hauptziel?
• Beantwortet der erste Bildschirm die Frage „Bin ich hier richtig?“
• Steht die wichtigste Handlungsaufforderung in jeder Vorlage an derselben Stelle?
• Haben Sie Überschriftenebenen markiert, mit genau einer H1 pro Seite?
• Gibt es eine eigene Skizze für die mobile Lesereihenfolge?
• Haben Sie echten oder realistischen Text verwendet?
• Zeigen die Formularfelder auch Fehler und Erfolgszustände?
• Haben Sie leere Zustände wie „keine Ergebnisse“ oder „kein Inhalt“ eingeplant?
• Ist der Platz für interne Links und den FAQ Bereich klar?
• Steht bei jedem Abschnitt eine geschätzte Inhaltslänge?
• Liegt der Umfang der Freigabe schriftlich vor?

Diese Liste können Sie dem Kunden auch zu Projektbeginn geben. Dann wissen beide Seiten, was sie vom Wireframe erwarten, und der Freigabetermin verläuft deutlich reibungsloser.

Aktualisieren Sie die Liste zudem bei jedem Projekt. Ergänzen Sie zum Beispiel bei einer mehrsprachigen Website den Platz des Sprachwählers oder bei einer Buchungsseite die Kalenderschritte. Mit der Zeit wird die Checkliste so zum gemeinsamen Gedächtnis Ihres Teams, und Sie müssen dieselben Fragen nicht bei jedem Projekt neu durchdenken.

Wie setzen wir den Wireframe Prozess für Ihre Website um?

In unserem Ansatz ist das Wireframe die Brücke zwischen Briefing und visuellem Design. Zunächst erfassen wir gemeinsam Ihre Ziele und Ihre Inhalte. Danach skizzieren wir das Gerüst der wichtigsten Vorlagen für Desktop und Smartphone und legen es Ihnen mit Begründung für jeden Abschnitt zur Freigabe vor.

Auf die freigegebene Struktur setzen wir Ihre Markenidentität und tragen die Notizen zu Barrierefreiheit und Suche bis in die Entwicklung. Vor dem Livegang prüfen wir außerdem mit unserem Mobile Friendly Test, wie die Seiten auf Smartphones aussehen.

Möchten Sie Ihre Website in dieser Reihenfolge aufbauen, also erst das Gerüst und dann die Optik, beschreiben Sie Ihr Projekt auf unserer Seite zur Leistung Webdesign und fordern Sie ein Angebot an. Wir schicken Ihnen dann Umfang und Zeitplan, abgestimmt auf Ihre Vorlagen, Ihren Inhaltsstand und Ihre Ziele.