Was ist ein Drahtmodell? Dieses UX Design Tutorial zeigt es Ihnen.

Der erste Schritt zum Entwerfen einer Website: Wireframe.

Ein gutes Drahtmodell kann Ihnen die Vision für das gesamte Layout und die Funktionalität Ihrer Website geben. Es kann auch als erste Stufe eines Entwurfs dienen.

Wireframes geben Ihnen einen Überblick über die Gesamtstruktur der Seiten und den Ablauf der Navigation.

Wenn Sie überlegen, eine Website zu erstellen, können Sie schnell und einfach ein Drahtmodell erstellen. Sie müssen nicht einmal Grafikdesigner sein, um dies zu tun.

Zu Beginn benötigen Sie lediglich einen Bleistift und etwas Papier. (Oder wenn Sie Lust haben, ein iPad und einen iPencil, wie ich sie in meinem Video-Tutorial oben verwendet habe.)

Wir werden ein Drahtmodell erstellen und zeigen, wie es einen schnellen, iterativen Entwurfsprozess ermöglicht. Dadurch wird eine lebendige Dokumentation erstellt, die Sie für sich selbst und für einen Kunden verwenden können. Und Sie können dies nutzen, um Ihre Planung zu überdenken - alles, bevor Sie Zeit in die eigentliche Codierung investieren.

Hier sind einige Schritte, die wir in diesem Artikel (und im zugehörigen Video-Tutorial) behandeln werden:

  1. Sitemap-Planung
  2. Erstellen eines Homepage-Drahtgitters
  3. Markup in Drahtgittern verwenden
  4. Drahtgitterkomponenten (Kopf-, Menü- und Fußzeile)
  5. Wireframing Ihrer Funktionsseite und Kontaktseite
  6. Mobile Responsive Wireframes

Schritt 1: Sitemap-Planung

Der Einstieg in das Wireframing beginnt mit einer guten Sitemap. Bevor Sie ein Seitendrahtmodell erstellen, gibt Ihnen eine Sitemap eine gewisse Struktur. Auf diese Weise verstehen Sie, welche Seiten Sie erstellen und wie sie alle miteinander verbunden werden.

Die meisten kleinen Websites benötigen möglicherweise keine Sitemap. Sie haben normalerweise nur eine einzige Zielseite oder einige allgemeine Seiten wie Funktionen, Info und Kontakt.

Sobald Ihre Website oder Anwendung größer und komplexer wird, benötigen Sie eine Sitemap.

Sitemaps bieten Ihnen einen kurzen Überblick darüber, wo Elemente vorhanden sind und wie sie miteinander verbunden sind.

In unserem Beispiel erstellen wir eine einfache Sitemap, die nur die Startseite, die Funktionsseite und die Kontaktseite enthält.

Sie müssen nicht zu viel Zeit damit verbringen. Fügen Sie einfach ein paar Felder hinzu, um jede Seite anzuzeigen, Zeilen darunter, um Unterseiten anzuzeigen, und fertig.

Schritt 2: Erstellen eines Homepage-Drahtmodells

Wir werden unsere erste Wireframe-Seite erstellen. Wenn Sie zuvor noch kein Drahtmodell erstellt haben, ist der Vorgang recht einfach. Jeder Aspekt einer Website wird mit einer Form oder einer einfachen Grafik dargestellt, z.

  • Kästchen mit diagonalen Linien, um Bilder darzustellen
  • horizontale Linien zur Darstellung von Textabschnitten
  • und einen Kreis mit einem L, um Ihr Logo darzustellen.

Für die Homepage erstellen wir ein Schiebereglerbild, ein Menü und ein Logo. Wir geben ihm auch ein paar Etiketten, um zu zeigen, was jeder Artikel ist.

Dies ist auch nützlich, um jeden Abschnitt in Rechtecken zu organisieren, die wir später kopieren und auf andere Seiten einfügen können (insbesondere für Kopf- und Fußzeile).

Erstellen wir auch einen weiteren Bereich für eine Einführung in das Unternehmen (Über uns) und einen Sponsorenbereich (mit Logos und Bildern unserer Sponsoren).

Während wir das Design durcharbeiten, können wir auch andere Elemente auf der Startseite implementieren, z. B. Handlungsaufforderungsschaltflächen in geeigneten Bereichen.

Wir schließen das Design mit einem Fußzeilenabschnitt ab, in dem wir allgemeine Elemente wie ein Kontaktformular und Kontaktinformationen hinzufügen und das Logo erneut verwenden.

Schritt 3: Verwenden von Markup in Wireframes

Das Drahtmodell wird häufig nicht nur von Designern, sondern auch von Entwicklern, Kunden und dem Management angezeigt. Daher ist es nützlich, jedem Teil des Inhalts ein Markup hinzuzufügen. Dies kann dazu beitragen, dass Personen Ihr Drahtmodell zum ersten Mal anzeigen. Normalerweise mache ich das am Ende einer Seite.

In unserem Beispiel markieren wir die Homepage und beschriften jeden Teil des Inhalts mit rotem Text.

Zu den Aspekten, die Sie markieren möchten, gehören Elemente wie Abschnitte, Titel, Kontaktformulare und mögliche Bilder.

Beachten Sie, dass Markup nicht buchstäblich erklären muss, wie der Inhalt letztendlich aussehen wird - nur was er darstellt. Anstatt das eigentliche "Beispiel für einen Intro-Titel" einzugeben, können Sie den Titel als "Intro-Titel" kennzeichnen.

Schritt 4: Fügen Sie weitere Wireframe-Komponenten wie Kopf-, Menü- und Fußzeile hinzu

Nachdem wir bereits eine Kopf- und Fußzeile erstellt haben, können wir sie für weitere Seiten wiederverwenden. Wenn Sie digital arbeiten, können Sie Kopf- und Fußzeilen sowie andere wiederkehrende Elemente kopieren und in neue Seitendrahtrahmen einfügen. (Und wenn Sie nur Papier und Stift verwenden, können Sie immer einen Rasierer und einen Fotokopierer verwenden, um den gleichen Effekt zu erzielen.)

Dadurch bleibt Ihr Drahtgitterdesign konsistent. Mit Tools wie Figma können Sie Asset-Komponenten erstellen, die Sie auch kopieren und in Ihr Design einfügen können. Sie können sie sogar so konfigurieren, dass andere Teile Ihres Drahtmodells dynamisch aktualisiert werden, wenn Sie Ihre Stammkomponente ändern.

In unserem Beispiel werden wir Komponenten wiederverwenden, um eine Feature-Seite zu erstellen. Durch Erstellen unserer ersten Feature-Section-Komponente können wir sie dann mehrmals kopieren und einfügen, um unsere gesamte Feature-Seite in nur wenigen Minuten zu erstellen.

Schritt 5: Funktionsseite und Kontaktseite

Es wird immer einfacher, zusätzliche Seiten zu erstellen, sobald Sie mit Wireframing beginnen und einige Komponenten erstellen. Wenn die Funktionsseite fertig ist, können wir eine Kontaktseite erstellen. Alles, was wir wirklich tun müssen, ist, einige allgemeine Elemente hinzuzufügen, wie z. B. eine Google Map, ein Kontaktformular und einige grundlegende Kontaktdaten wie eine Telefonnummer und eine E-Mail-Adresse.

In diesem Beispiel habe ich kleine Logos für ein Telefon und eine E-Mail sowie große Blöcke, um darzustellen, wo sie sich auf der Seite befinden.

Das Kontaktformular befindet sich unten (ohne Kastenumriss) sowie eine Google-Karte auf der rechten Seite.

Schritt 6: Erstellen Sie ein Mobile Responsive Wireframe

Ohne eine mobile Version kann es heutzutage kein gutes Drahtmodell geben. Dies liegt daran, dass ein Großteil des heutigen Webs auf Mobilgeräten angezeigt wird.

Es ist gut zu wissen, wie ein Design in kleinere Ansichtsfenster zerfallen kann. Wenn Sie mehr Zeit haben, können Sie auch eine Tablet-Version des reaktionsschnellen Drahtgitters erstellen.

In unserem Beispiel bauen wir das Drahtmodell für das Homepage-Design abschnittsweise aus. Die meisten Zeilen und Spalten sind reduziert. Und da wir uns in einem mobilen Ansichtsfenster befinden, werden viele Bilder, Texte und Blöcke kleiner.

Aus diesem Grund ist es möglich, dass einige Abschnitte immer noch dieselbe Höhe haben wie ihre jeweiligen Desktop-Versionen. Auf der anderen Seite haben einige Abschnitte mit vielen Bildern (wie der Sponsorenbereich) möglicherweise eine viel größere Bildlaufhöhe.

Aus diesem Grund füge ich häufig auch zusätzliche Markups hinzu, um anzuzeigen, welche Desktop-Versionsabschnitte welchen reaktionsfähigen Entsprechungen für die mobile Version entsprechen.

Fazit

Mit Wireframing können Sie sich schnell eine bessere Vorstellung von Ihrer Website oder Anwendung machen. Ich empfehle Ihnen, es für Ihr nächstes Projekt zu versuchen, um zu planen, wie es funktionieren und aussehen könnte.

Wireframing ist hierfür der ideale Ansatz, da es so viel weniger Zeit in Anspruch nimmt, als wenn ein Designer einen vollständigen Prototyp der Benutzeroberfläche erstellt.

Als Entwickler habe ich jahrelang Wireframes für meine Websites erstellt. Ich entwickle fast nie eine Website, ohne zumindest einige meiner Ideen zu skizzieren, wie sie visuell aussehen wird.

Viel Spaß beim Wireframing.

Ich hoffe, Ihnen hat dieser Artikel gefallen. Wenn Sie nicht wissen, wer ich bin, bin ich Adrian aus Australien? Ich habe einen winzigen Kanal auf Twitter und YouTube. Wenn Sie also mehr über mich erfahren oder meine Inhalte genießen möchten, schauen Sie sich mich irgendwann an.

  • Youtube: //youtube.com/adriantwarog
  • Twitter: //twitter.com/adrian_twarog