6 Vorteile der Erstellung von Wireframes vor dem Design einer Website (+ Beispiele)

Das Entwerfen einer effektiven Website erfordert viele Elemente – das Erstellen des Layouts, die Berücksichtigung der Benutzererfahrung (UX), das Wissen, wie bestimmte Funktionen implementiert werden, das Schreiben von Inhalten und das Einbeziehen von Best Practices für die Suchmaschinenoptimierung (SEO), um nur einige zu nennen. Und alles beginnt mit einer Brainstorming-Sitzung, bei der alle beteiligten Kreativen mit einem Kunden zusammenkommen, um festzulegen, was sie brauchen und was sie in die Website aufnehmen möchten.

Sobald alle diese Anforderungen aufgelistet sind, können Sie auf zwei Arten fortfahren: Sagen Sie Ihren Kreativen, sie sollen sich an die Arbeit machen und ihren Teil des Projekts erledigen (z. B. Inhalte schreiben, Mockups entwerfen usw.) und bei Gott hoffen, dass Sie alle sind auf derselben Seite, ODER Sie könnten Wireframes erstellen, um sicherzustellen, dass jeder an die Arbeit geht, indem er genau der gleichen Vorstellung davon folgt, wie die Website aussehen wird. Letzteres kann durch die Erstellung von Wireframes erreicht werden.

Was sind Wireframes?

Wireframes sind ein visueller Leitfaden für die wichtigsten Webseiten, die gestaltet werden sollen. Sein Zweck ist es, als Blaupause für alle zu dienen, die an dem Projekt arbeiten. Auf diese Weise wissen alle Beteiligten genau, wohin jede Komponente gehört – Hero-Banner, Navigationsleiste, Überschriften, Unterüberschriften, Inhalte, Bilder, Videos, Calls-to-Action-Schaltflächen, Grafiken usw.

Sie sind aus gestalterischer Sicht ziemlich einfach. Sie müssen noch keine Farbe oder tatsächliche Bilder oder spezifischen Text hinzufügen. Stattdessen fügen Sie Platzhalter dafür ein, wo überall sein wird, sobald die Site fertig ist. Dazu gehören Quadrate oder Rechtecke zur Darstellung von Bildern, Lorem-Ipsum-Text für Inhalte und H1-, H2- und H3-Schriftgrößen für Überschriften und Unterüberschriften.

Quelle: Balsamik

Arten von Wireframes

Es gibt eine Vielzahl von Möglichkeiten, Wireframes zu erstellen. Wenn Sie möchten, können Sie mit einem Bleistift auf einem Notizbuch skizzieren. Schließlich ist dies nichts, was Sie bei einem Kunstwettbewerb einreichen. Wenn Sie jedoch Software verwenden, um sie zu erstellen, ermöglichen verschiedene Softwareprogramme unterschiedliche Arten von Wireframes:

Low-Fidelity-Drahtgitter

Low-Fidelity-Drahtgitter zeigen einfache Bilder an. Einleitender Absatz kommt hierher. Produktbeschreibung kommt dort hin. Dieses Quadrat mit einem quer darüber gezeichneten X soll schließlich ein Bild Ihres Büros mit lächelnden Mitarbeitern sein, die begeistert sind, in Ihrem Unternehmen zu arbeiten. Sie können diese Bilder Ihrem Kunden erklären, aber alles auf der Seite ist sehr einfach.

High-Fidelity-Drahtgitter

High-Fidelity-Wireframes spiegeln ein realistischeres Erscheinungsbild der Website wider. Sie umfassen tatsächliche Website-Inhalte und -Funktionalitäten – wie z. B. anklickbare CTA-Schaltflächen, die den Leser auf die Seite leiten, auf die ihn der CTA führen soll. Sie können auch Logos, Typografie, Bildabmessungen usw. enthalten.

6 Vorteile der Erstellung von Website-Drahtmodellen

Sobald Sie anfangen, diese Praxis in Ihren Website-Designprozess zu integrieren, werden Sie sofort die vielen Vorteile erkennen:

1. Sie stellen einen Website-Entwurf bereit

Sie können 10 Personen im selben Raum zusammenbringen, um zu besprechen, wie man eine Website gestaltet. Sie können sich alle auf die Seiten einigen, die die Website benötigt, die Informationen, die in jeder von ihnen enthalten sein sollen, und die Funktionalitäten, die die Website von der Konkurrenz abheben. Aber das bedeutet nicht, dass sie alle genau die gleichen Bilder im Kopf haben werden, wie das aussehen wird.

Wenn Content also einen Homepage-Text schreibt, der deutlich länger ist als von den Webentwicklern vorgesehen, wird das Projekt entweder an Content zurückgesendet, um ihn zu kürzen, oder das Design benötigt zusätzliche Zeit, um das Layout zu überarbeiten. Durch Wireframes wird dieser Prozess effizienter.

2. Sie ermöglichen es Ihnen, die Benutzererfahrung (UX) besser zu bewerten

Manche Dinge klingen in der Theorie großartig, funktionieren aber in der Praxis nicht so gut. Angenommen, Ihr UX-Designer möchte eine Anzahl von X Elementen in die Navigationsleiste aufnehmen, zusammen mit Dropdown-Menüs für untergeordnete Seiten. Aber wenn alles fertig ist, merkt man, dass es dadurch nur verwirrend wird.

Indem Sie alle Elemente zu Papier bringen, können Sie diese Probleme sehen, bevor der Designprozess beginnt. Auf diese Weise können Sie sie in einer Phase ansprechen, in der dies viel einfacher ist.

3. Sie stellen sicher, dass alle auf derselben Seite sind

Da jeder im Designteam genau weiß, wie jede Webseite aussehen wird, bevor sie erstellt wird, können alle mit einem besseren Orientierungssinn an die Arbeit gehen. Und wenn jemand Fragen oder Zweifel hat, wie sich das alles entwickeln würde, kann er sie während dieser ersten Brainstorming-Sitzung zur Sprache bringen.

Dieser Prozess ermöglicht es allen, von Bedenken zu hören und gemeinsam Ideen vorzuschlagen und den Denkprozess hinter jeder Entscheidung gründlich zu verstehen.

4. Sie rationalisieren den Designprozess

Wenn Wireframes erstellt werden, wird keine Zeit mehr verschwendet, um Änderungen vorzunehmen. Während dieser Schritt immer noch Teil jedes Projekts ist, bedeutet es, dass jedes Teammitglied effizienter arbeiten kann, wenn sich alle vor Beginn des Projekts auf Blaupausen geeinigt haben.

Dies bedeutet auch, dass Sie weniger Zeit für die Arbeit an jeder Website benötigen, was die Wahrscheinlichkeit erhöht, dass Sie vor Ablauf der Frist fertig sind und Ihre Kunden glücklich machen.

5. Sie erleichtern die Entwicklung von Website-Inhalten

Das Schreiben von Inhalten ist ein subjektiver Prozess. Einige Best Practices umfassen das Befolgen eines Styleguides, der Markenstimme und das Schreiben mit Blick auf bestimmte Käuferpersönlichkeiten. Es kann jedoch immer noch erheblich in Länge und Format variieren.

Die Entwicklung von Wireframes gibt Autoren eine Vorstellung davon, wie Längenbeschränkungen oder bevorzugte Formatierungen gelten. Sie müssen keine Wortzahl angeben, aber Wireframes, die zwei oder drei kurze Lorem-Ipsum-Absätze zeigen, lassen sie wissen, dass sie den Tolstoi-Roman für eine andere Gelegenheit verlassen sollen.

6. Sie können Ihren Kunden zeigen, bevor die Website erstellt wird

Eine der enttäuschendsten Erfahrungen beim Entwerfen einer Website ist, wenn Sie von dem, was Sie erstellt haben, begeistert sind, nur damit Ihr Kunde das Gesicht verzieht und sagt, dass dies nicht genau das ist, was er sich vorgestellt hat. Das bedeutet nicht, dass das, was Sie geschaffen haben, nicht gut war, aber dass Sie sich beide sehr unterschiedliche Ergebnisse vorgestellt haben.

Durch das Erstellen von Wireframes haben Kunden eine ziemlich klare Vorstellung davon, wie eine Bare-Bones-Version ihrer Website aussehen wird, bevor sie erstellt wird.

Best Practices für Wireframing

Obwohl es verschiedene Möglichkeiten gibt, Wireframes zu erstellen, empfiehlt es sich, bestimmte Schritte zu befolgen, um die besten Ergebnisse zu erzielen:

Brainstorming mit Ihrem Team

Wie bereits erwähnt, besteht der erste Schritt darin, sich mit allen zusammenzusetzen, die am Webdesign arbeiten werden. Auf diese Weise können Sie alle Ideen einwerfen und allen anderen die Gründe dafür mitteilen. Jeder kann auch Faktoren berücksichtigen, die sich auf seine spezifische Rolle im Projekt auswirken und die möglicherweise nicht auf dem Radar eines anderen liegen.

Zeichnen Sie zuerst die Ideen

Während Sie technisch gesehen damit beginnen könnten, Wireframes auf einem Notizbuch zu zeichnen, während Sie ein Brainstorming durchführen (oder indem Sie eine Wireframing-Software verwenden), ist es möglicherweise einfacher, eine trocken abwischbare Tafel oder sogar Stift und Papier zu verwenden, um die ersten Iterationen fertigzustellen. Sobald Sie fertig sind, können Sie Fotos davon machen und sie per E-Mail an das Teammitglied senden, das die Wireframes erstellt. Es empfiehlt sich auch, sie zur einfacheren Bezugnahme in die Aufgabenbeschreibungen auf Ihren Projektmanagementkarten aufzunehmen.

Quelle: WhatPixel

Farben minimieren

Beim Wireframing müssen Sie nicht ins Detail über Farben und bestimmte Bilder gehen. Die Blaupausen sind genau das – nackte Knochendarstellungen dessen, wie die Site aussehen wird. Sie können richtungsweisende Hinweise einfügen (z. B. Markenfarben hier, Weißraum dort), aber konzentrieren Sie sich auf die wichtigsten Designelemente.

Machen Sie sich Notizen zu Funktionalitäten

Machen Sie sich Notizen darüber, wie bestimmte Bereiche der Webseite funktionieren werden. Zum Beispiel, wenn etwas ein Dropdown-Menü, ein Bilderkarussell, ein Besucherquiz oder eine Art Tool sein soll. Allgemeine Details, die dem Webdesigner eine klare Anleitung geben, was wohin gehört.

Erstellen Sie Desktop- und mobile Wireframes

Jede einzelne Website sollte ein responsives Design haben. Und da Websites auf einem Desktop-Computer nicht auf die gleiche Weise geladen werden wie auf einem Smartphone, erstellen Sie Wireframes, die zeigen, wie beide Displays aussehen werden. Vielleicht wird die Navigationsleiste zu einem Burger-Menü, oder Karten, die auf größeren Bildschirmen nebeneinander lagen, erscheinen auf mobilen Geräten gestapelt. Sie können diesen Schritt umgehen, wenn Sie mit einer Website-Vorlage arbeiten, die bereits responsiv ist.

Was Sie beim Wireframing nicht tun sollten

In Ordnung. Jetzt, da Sie wissen, was zu tun ist, finden Sie hier eine Liste, was Sie überspringen sollten.

Gestalten Sie nicht jede einzelne Seite per Wireframe

Beim Wireframing geht es darum, Zeit zu sparen. Wenn Sie also eine Website mit 42 verschiedenen Produkten entwerfen, erstellen Sie einfach ein Drahtmodell für eine Produkt-/Dienstleistungsseite. Konzentrieren Sie sich dann auf die großen Ticket-Elemente, wie z. B. die Startseite, die Seite „Über uns“, die Preise, den Blog und die Seiten „Kontakt“.

Verbringen Sie nicht zu viel Zeit damit, sie perfekt zu machen

Wireframes müssen nicht beeindruckend aussehen. Sie müssen nur zeigen, wie das Skelett der Webseiten aussehen wird. Geben Sie sich die Mühe, sie zu verschönern, wenn Sie die Website tatsächlich entwerfen.

Geben Sie nicht jedes kleinste Detail an

Obwohl Sie hilfreiche Notizen zur Bedeutung jedes Elements hinzufügen sollten, verlieren Sie sich nicht in den Details. Seien Sie unkompliziert und fahren Sie mit der Gestaltung der nächsten Seite fort. Ihr Art Director oder Webdesigner kann später alles erweitern.

Tools zum Erstellen von Wireframes

Das Zeichnen in einem Notizbuch ist ein einfacher und unkomplizierter Vorgang. Und auf jeden Fall, wenn das für Sie funktioniert, machen Sie es. Aber für diejenigen, die leicht zu teilende Medien bevorzugen, gibt es viele Softwareprogramme, die Sie verwenden können. Einige der beliebtesten sind:

Balsamico

Balsamiq ist so benutzerfreundlich, dass es kaum eine Lernkurve gibt. Es erlaubt nur die Erstellung von Low-Fidelity-Drahtmodellen, aber das reicht aus, um die Arbeit zu erledigen. Sie bieten auch mehrere abgestufte Pläne und ermöglichen die Zusammenarbeit, indem sie Ihnen die Möglichkeit geben, Teammitglieder einzuladen, um Ihnen bei der Erstellung in Echtzeit zuzusehen.

Adobe XD

Mit Adobe XD können Sie High-Fidelity-Drahtmodelle entwerfen und Kunden Zugriff auf die Drahtmodelle gewähren. Sie können dann Notizen hinterlassen, die ihr Feedback für jedes Element des Drahtmodells geben, ohne tatsächlich Änderungen daran vorzunehmen. Es enthält auch Tutorials zur Verbesserung des UX- und UI-Designs.

Quelle: xd.adobe.com

Skizzieren

Sketch ist nur für Mac-Benutzer verfügbar. (Ich meine, es ist, was es ist). Sie können mit Ihrem gesamten Team in Echtzeit zusammenarbeiten, um High-Fidelity-Wireframes zu erstellen. Und obwohl es keine Vorlagenbibliothek hat, ist es mit vielen Plug-Ins kompatibel.

MockFlow

MockFlow ist ein digitales Zeichenwerkzeug, das sich anfühlt wie das Skizzieren auf einer trocken abwischbaren Tafel. Sie enthalten auch eine umfangreiche Vorlagenbibliothek und ermöglichen den Export der Wireframes in andere Plattformen wie PowerPoint und Adobe PDF. Sie bieten eine kostenlose Version an, aber die kostenpflichtigen Stufen enthalten viel nützlichere Tools.

Quelle: MockFlow

Framer

Framer ist ein gutes Tool für Startups und Unternehmen mit einem knapperen Budget, da es eine kostenlose Option mit einer großen Auswahl an Tools bietet. Sie können auch einfache Wireframes erstellen, die Sie in Ihrer Bibliothek aufbewahren und als Layouts für zukünftige Projekte wiederverwenden können.

Zeit ist Geld; und wenn es verloren geht, wirst du es nie zurückbekommen. Durch die Implementierung von Wireframing in Ihren Webdesignprozess können Sie es effizienter nutzen. Arbeite klüger. Vermeiden Sie Frustrationen. Schließen Sie Ihre Projekte schneller ab. Es ist eine Win-Win-Lösung, egal wie man es betrachtet.