Website-Wireframing erklärt: Planung vor dem Design

Stellen Sie sich vor, Sie beauftragen einen Bauunternehmer mit dem Bau Ihres Hauses, und das Erste, was er tut, ist, Ziegel zu verlegen. Kein Bauplan, kein Grundriss, keine Einigung darüber, wo die Küche hinkommt. Sie würden ihn sofort aufhalten. Doch genau so werden überraschend viele Websites gebaut – jemand öffnet ein Design-Tool, wählt eine schöne Farbe, fügt ein Stockfoto ein und beginnt, Pixel herumzuschieben, ohne jeglichen Plan. Das Ergebnis ist meist eine Website, die stellenweise gut aussieht, aber nie ganz stimmig ist.

Wireframing ist die Bauplan-Phase einer Website. Es ist der leise, unspektakuläre Schritt, der vor dem Erscheinen von Farben, Schriftarten oder Fotos stattfindet, und er ist einer der größten Prädiktoren dafür, ob die fertige Website tatsächlich funktionieren wird. In diesem Leitfaden erfahren Sie in einfacher Sprache, was ein Wireframe ist, warum das Überspringen mehr kostet als das Durchführen, welche Detailstufen Sie verwenden können und einen einfachen Prozess, den Sie selbst befolgen können – selbst wenn Sie noch nie einen einzigen Kasten gezeichnet haben.

Was ein Wireframe tatsächlich ist

Ein Wireframe ist eine bewusst schlichte Skizze einer Webseite, die zeigt, wo alles platziert wird, ohne jegliche visuelle Gestaltung. Denken Sie an graue Kästchen, Platzhalterlinien anstelle von echtem Text und einfache Beschriftungen wie „Logo hier“ oder „Anmeldeformular“. Der ganze Sinn besteht darin, Dekorationen wegzulassen, damit Sie sich nur auf eine Frage konzentrieren können: Ist dieses Layout sinnvoll?

Indem man Dinge absichtlich hässlich hält, erzwingt ein Wireframe frühe, nützliche Gespräche. Niemand streitet darüber, ob ein Button türkis oder marineblau sein soll, wenn der Button nur ein graues Rechteck ist. Stattdessen sprechen alle darüber, ob der Button existieren sollte, was darauf stehen sollte und ob er am richtigen Platz ist. Das ist genau die Art von Gespräch, die man führen möchte, bevor jemand Stunden für visuelles Design aufwendet.

Wireframes finden sich früh in jedem gesunden Webdesign-Prozess, normalerweise direkt nachdem Sie Ihre Inhalte und Ziele gesammelt haben, aber bevor ein Designer Farben oder Typografie verwendet. Sie sind die Brücke zwischen „hier ist ungefähr, was wir sagen wollen“ und „hier ist, wie es aussehen wird“.

Warum sich die Mühe machen? Der Fall für die Planung zuerst

Es ist verlockend, Wireframing als optionalen Zusatz zu betrachten, als eine Verzögerung zwischen Ihnen und dem spannenden Teil. In der Praxis zahlt es sich jedoch meist um ein Vielfaches aus. Hier ist der Grund dafür.

Es deckt Probleme auf, solange sie günstig zu beheben sind

Das Verschieben eines Kastens auf einem Wireframe dauert Sekunden. Eine fertige Seite neu aufzubauen, weil das Layout nicht funktioniert hat, dauert Stunden, und das Neuaufnehmen von Fotos oder das Umschreiben von Text, um eine fehlerhafte Struktur anzupassen, dauert noch länger. Je früher Sie erkennen, dass ein wichtiger Call-to-Action vergraben ist oder dass Besucher keinen offensichtlichen nächsten Schritt haben, desto günstiger ist die Behebung. Es auf einer grauen Skizze zu erkennen, ist der günstigste Zeitpunkt überhaupt.

Es hält den Fokus auf den Besucher, nicht auf die Dekoration

Schönes Design kann eine verwirrende Erfahrung unauffällig verbergen. Durch das Entfernen der visuellen Elemente sorgen Wireframes dafür, dass alle ehrlich darüber nachdenken, ob eine Seite den Besuchern tatsächlich dabei hilft, das zu tun, wofür sie gekommen sind. Dies ist dieselbe Disziplin, die allem zugrunde liegt, was eine Website konvertieren lässt – Klarheit des Zwecks kommt vor der Perfektion.

Es bringt alle dazu, sich zu einigen, bevor Geld ausgegeben wird

Ein Wireframe ist ein gemeinsamer Bezugspunkt. Der Geschäftsinhaber, der Texter und der Designer können sich alle die gleiche einfache Skizze ansehen und nicken oder Bedenken äußern, bevor die teure Arbeit beginnt. Diese gemeinsame Einigung verhindert die schmerzhafte Überraschung in der Spätphase, wenn jemand sagt „oh, ich dachte, die Preise wären auf der Startseite“, nachdem die Startseite bereits erstellt wurde.

Die drei Detailstufen des Wireframing

Nicht alle Wireframes sind gleich detailliert. Man spricht üblicherweise von drei Stufen, und die Wahl der richtigen spart Zeit. Sie brauchen nicht immer die perfekteste Version.

Eine nützliche Faustregel: Beginnen Sie mit wenig Details und fügen Sie nur dann Details hinzu, wenn eine Entscheidung dies erfordert. Eine Kritzelei auf der Rückseite eines Umschlags ist ein völlig legitimes Wireframe, wenn es drei Personen hilft, sich darauf zu einigen, wo das Kontaktformular platziert wird. Sie können es später immer noch aufräumen. Die Gefahr, direkt zu hoher Detailtreue zu springen, besteht darin, dass es sich so fertig anfühlt, dass die Leute aufhören, es zu hinterfragen, obwohl das Hinterfragen genau das ist, wofür die frühe Phase da ist.

Was in einem Wireframe enthalten ist

Jede Seite ist anders, aber die meisten Wireframes berücksichtigen dieselben Bausteine. Wenn Sie diese als Checkliste durchgehen, vergessen Sie nichts Wichtiges.

Die strukturellen Anker

Beginnen Sie mit den Teilen, die jede Seite umrahmen: dem Header mit Ihrem Logo und Hauptmenü und dem Footer am unteren Rand. Ihr Menü ist eine der wichtigsten Entscheidungen auf der gesamten Website, daher lohnt es sich, es sorgfältig zu skizzieren – die Prinzipien der Best Practices für die Navigation gelten hier direkt. Entscheiden Sie, was ins Menü kommt, bevor Sie entscheiden, wie es aussieht.

Der obere Bereich der Seite

Der Bereich, den ein Besucher vor dem Scrollen sieht, leistet viel Arbeit. Blocken Sie in Ihrem Wireframe die Überschrift, eventuelle Begleitzeilen und die Hauptaktion, die die Leute ausführen sollen. Diesen Bereich richtig zu gestalten, ist eine eigene Disziplin, die in unseren Leitfäden zum Above-the-Fold-Design und zur Gestaltung eines starken Hero-Bereichs behandelt wird. Im Wireframe benötigen Sie lediglich einen klaren Kasten, der angibt, was die Überschrift verspricht und wo sich der Button befindet.

Die Inhaltsblöcke und der weitere Weg

Unterhalb des oberen Bereichs skizzieren Sie die Abfolge der Abschnitte, die Ihre Geschichte erzählen: was Sie anbieten, warum es wichtig ist, Beweise für Ihre Vertrauenswürdigkeit und so weiter. Wichtig ist, dass Sie markieren, wohin jeder Abschnitt als Nächstes führt. Jede Seite sollte einen offensichtlichen nächsten Schritt haben. Wenn ein Besucher das Ende eines Abschnitts erreicht und nichts ihn dazu einlädt, weiterzugehen, ist das eine Lücke, die Ihr Wireframe Ihnen gerade geholfen hat zu erkennen.

Ein einfacher Wireframing-Prozess, den jeder befolgen kann

Sie müssen kein Designer sein, um Wireframes zu erstellen. Hier ist eine freundliche, wiederholbare Reihenfolge.

Schritt 1: Kennen Sie die Aufgabe der Seite

Bevor Sie etwas zeichnen, schreiben Sie einen Satz auf, der beschreibt, wofür diese Seite ist und was ein Besucher nach dem Lesen tun soll. „Einen Kleinunternehmer davon überzeugen, einen kostenlosen Anruf zu buchen“ ist eine klare Aufgabe. Alles, was Sie skizzieren, sollte diesem Satz dienen.

Schritt 2: Sammeln Sie zuerst Ihre Inhalte

Wireframing ist viel einfacher, wenn Sie ungefähr wissen, was Sie sagen wollen. Sie brauchen keinen fertigen Text, aber Sie brauchen den Kern. Genau deshalb zahlt es sich so sehr aus, Ihre Inhalte zu planen, bevor Sie bauen – das Layout folgt der Botschaft, nicht umgekehrt.

Schritt 3: Skizzieren Sie die schmale Ansicht

Zeichnen Sie ein hohes, schmales Rechteck, das einen Telefonbildschirm darstellt, und stapeln Sie Ihre Abschnitte darin in der Reihenfolge ihrer Priorität. Da sich eine responsive Website an jede Bildschirmgröße anpasst, bedeutet das richtige mobile Stapeln zuerst, dass die Desktop-Version größtenteils von selbst passt.

Schritt 4: Auf breitere Bildschirme erweitern

Zeichnen Sie nun die breite Version. Entscheiden Sie, was nebeneinander liegen kann, wo sich das Menü erweitert und wie Weißraum der Seite Raum zum Atmen gibt. Die Art und Weise, wie Sie diesen leeren Raum nutzen, ist von enormer Bedeutung, wie unser Beitrag zum Thema Weißraum erklärt.

Schritt 5: Mit frischen Augen überprüfen

Zeigen Sie Ihr Wireframe jemandem, der es noch nicht gesehen hat. Fragen Sie ihn, wofür die Seite seiner Meinung nach da ist und worauf er klicken würde. Wenn seine Antworten Ihrer Absicht entsprechen, funktioniert das Layout. Wenn nicht, haben Sie sich gerade ein teures Missverständnis erspart.

Wie Wireframing mit dem Rest Ihres Projekts zusammenhängt

Ein Wireframe ist keine Insel. Seine wahre Stärke liegt darin, wie nahtlos es in jede folgende Phase übergeht. Sobald ein Wireframe vereinbart ist, weiß der Texter genau, wie viel Text jeder Abschnitt benötigt und welche Aufgabe dieser Text erfüllen muss. So werden Texte zweckmäßig geschrieben, anstatt später eingefügt und gekürzt zu werden. Der Designer erbt eine festgelegte Struktur und kann seine Energie darauf verwenden, sie schön zu gestalten, anstatt sich damit herumzuschlagen, wo Dinge platziert werden sollen. Und wer auch immer die Website erstellt, hat einen klaren Fahrplan, was seine Schätzungen genauer und seine Arbeit schneller macht.

Deshalb verkürzt Wireframing ein Projekt insgesamt oft, obwohl es am Anfang einen zusätzlichen Schritt darstellt. Die Stunden, die Sie in graue Kästchen investieren, zahlen sich später in erheblich reduziertem Hin und Her vielfach aus. Ein Team, das Wireframing überspringt, tut es oft trotzdem – nur langsam und teuer, in Form von Überarbeitungen eines halbfertigen Designs. Ein Team, das bewusst Wireframes erstellt, verlagert diese Entscheidungen in die Anfangsphase, wenn sie günstig zu ändern sind.

Wireframes machen auch Gespräche mit jedem, den Sie engagieren, viel produktiver. Anstatt zu versuchen, in Worten zu beschreiben, was Sie sich vorstellen, können Sie auf eine einfache Skizze zeigen und sagen: „So, aber mit den Testimonials weiter oben.“ Dieses gemeinsame Bild beseitigt eine enorme Menge an Missverständnissen und ist eines der nützlichsten Dinge, die Sie zu einem Kick-off-Meeting mitbringen können. Wenn Sie Schwierigkeiten haben, zu erklären, was Sie von einer Website erwarten, ist ein grobes Wireframe oft der schnellste Weg, die Lücke zu schließen.

Häufige Wireframing-Fehler, die es zu vermeiden gilt

Einige Fallen tappen Menschen immer wieder hinein. Die erste ist, zu früh visuelle Elemente hinzuzufügen – sobald Sie Farben auswählen, hören Sie auf, über die Struktur nachzudenken. Halten Sie es grau. Die zweite ist, aus Angst, etwas zu vergessen, jedes mögliche Element auf eine Seite zu quetschen; ein Wireframe ist der perfekte Ort, um die Kunst des Weglassens zu üben. Die dritte ist, Wireframes isoliert zu erstellen und dann das fertige Design den Stakeholdern zu präsentieren. Teilen Sie frühzeitig und häufig. Der ganze Wert eines Wireframes liegt in dem Gespräch, das es anstößt.

Behandeln Sie das Wireframe schließlich nicht als einen in Stein gemeißelten Vertrag. Es ist ein Denkwerkzeug. Wenn Tests eine bessere Anordnung ergeben, ändern Sie diese gerne. Das Ziel war nie ein perfektes Dokument; es war ein klarerer Kopf, bevor der eigentliche Bau begann. Wenn Sie bereit sind, ein solides Wireframe zu etwas Poliertem zu machen, sollte die gleiche Sorgfalt, die in das Layout gesteckt wurde, auch in die visuellen Elemente einfließen – und wenn Sie dabei Hilfe benötigen, können Sie uns jederzeit kontaktieren.

Häufig gestellte Fragen

Referenzen

1. Nielsen Norman Group. „Wireframing und Prototyping im UX Design.“ nngroup.com.
2. Interaction Design Foundation. „Was ist Wireframing?“ interaction-design.org.
3. Smashing Magazine. „Ein praktischer Leitfaden zum Mobile-First Responsive Design.“ smashingmagazine.com.