PINGDOM_CANARY_STRING
So erstellen Sie ein Wireframe

So gestalten Sie ein Wireframe in Lucidchart

Lesedauer: etwa 6 Min.

Gepostet von: Lucid Content Team

Sie sind kein Wireframer, aber Sie brauchen ein Wireframe? Nur etwas Einfaches, um dem Webentwickler zu zeigen, was Sie sich vorstellen. Ein handgezeichnetes Wireframe wird nicht ausreichen. Sie sind kein Künstler und Sie haben auch nicht die Zeit, mehr über komplizierte Wireframe Softwares zu lernen?

Mit Lucidchart können Sie unabhängig von Ihrer Designerfahrung Wireframes und Mockups schnell online erstellen und mit anderen teilen. UX-Designer benötigen wahrscheinlich ein komplexeres Wireframing-Tool, aber Lucidchart hat die perfekte Lösung für Anwender, die keine Designer sind. Erstellen Sie ausgefeilte Wireframes und Mockups, um Webentwicklern und UX-Designern Ihre Ideen ganz genau vorzustellen.

Und das Beste daran? Es ist völlig kostenlos!

So gestalten Sie ein Wireframe in Lucidchart

Mit Lucidchart können Sie sowohl Wireframes als auch Mockups für Websites und Mobilgeräte erstellen. Mockups sind visuelle Modelle von Ihren Vorhaben. Sie sehen dem Endprodukt sehr ähnlich, haben aber nicht dieselbe Funktionalität. Wireframes hingegen simulieren die Funktionalität, dienen jedoch nicht so sehr der Veranschaulichung der Form.

Beide Diagrammtypen sind nützlich, wenn Sie sich zu UI/UX-Eigenschaften Gedanken machen. Sie können Ihre Wireframes und Mockups optimieren, indem Sie sie koordiniert einsetzen. In diesem Leitfaden erfahren Sie, wie Sie in Lucidchart Wireframes aus Vorlagen und von Grund auf neu erstellen.

Zeit sparen mit Wireframe-Vorlagen

Egal, ob Sie ein Anfänger im Wireframing sind oder einfach nur Zeit sparen wollen, die Verwendung einer Vorlage ist immer eine gute Option. Die Vorlagen sorgen mit einfachen, voreingestellten Formen für die Grundlagen – Sie müssen nur noch Inhalte hinzufügen. Lucidchart bietet eine Reihe von Wireframe-Vorlagen und deckt damit alles von Website-Startseiten bis mobile Anwendungen ab.

Navigieren Sie zu Ihrer Dokumentenbibliothek und klicken Sie auf den Pfeil neben „+Dokument“, um die Vorlagenbibliothek von Lucidchart zu öffnen. Scrollen Sie durch die Kategorien auf der linken Seite, bis Sie den Abschnitt zum Wireframe finden.

Klicken Sie auf eine Vorlage, um sie sich anzusehen. Wenn Sie gefunden haben, wonach sie suchen, klicken Sie auf „Dokument erstellen“. (Alternativ können Sie auch einfach auf eine Vorlage doppelklicken, um ein neues Dokument zu öffnen.) Sobald Sie eine Vorlage ausgewählt haben, können Sie zu Schritt 3 übergehen.

Weitere Informationen zur Verwendung von Wireframe-Vorlagen von Lucidchart finden Sie in unserem Video Tutorial.

Startseite Grundlage Wireframe Beispiel
Wireframe-Vorlage für Startseiten (Klicken Sie auf das Bild, um es vergrößert in Lucidchart anzuzeigen)

Möchten Sie Ihr Wireframe lieber von Grund auf erstellen? In dieser Anleitung wird Schritt für Schritt erklärt, wie Sie Ihr eigenes Wireframe mithilfe von Lucidchart gestalten können.

1. Wählen Sie Ihre Formenbibliotheken aus

Bevor Sie Ihr Wireframe erstellen, müssen Sie Ihren Arbeitsplatz vorbereiten, indem Sie die benötigten Formenbibliotheken an Ihre Symbolleiste anheften. Öffnen Sie im Editor von Lucidchart ein leeres Dokument und drücken Sie „M“, um die Formenbibliotheken zu öffnen. Wählen Sie die Formenbibliotheken, die Sie verwenden möchten, und klicken Sie auf „Speichern“.

Je nach Projekt möchten Sie vielleicht mehrere verschiedene Bibliotheken nutzen. Hier ist eine Auswahl:

  • Flussdiagrammformen: Diese standardmäßigen geometrischen Flussdiagrammformen sind bereits an Ihre Symbolleiste angeheftet und könnten sich als nützlich erweisen. Verwenden Sie Rechtecke, um eine Website in Abschnitte zu gliedern, oder verwenden Sie Pfeile, um einen Fluss von einem UI-Element zu einem anderen zu illustrieren.
  • UI-Mockups: Diese Formenbibliothek bietet den standardgemäßen Array von UI-Containern und Widgets. Hier finden Sie leere Formen für Websites sowie Platzhalter für Videos, Karten, Diagramme, Bilder und Kalender.
  • Android-Mockups: Wenn Sie eine App oder eine Seite für ein Android-Gerät erstellen, finden Sie hier Android-Telefone und -Tablets sowie Dialoge und Symbole, die für das Betriebssystem spezifisch sind.
  • iOS-Mockups: Wenn Sie mit iPhones und iPads arbeiten, finden Sie diese in der iOS-Formenbibliothek zusammen mit für iOS spezifische UI-Komponenten.
  • Bilder: Vergessen Sie nicht die Bildergalerie. Egal, ob Sie einen stilvollen Hintergrund oder ein bestimmtes Logo brauchen, Sie können direkt auf Lucidchart danach suchen und es hinzufügen.

Dieses Mockup wurde aus einer Kombination grundlegender Flussdiagrammformen, Bildern und der Formenbibliothek für UI-Mockups zusammengestellt.

So erstellen Sie ein Mockup

2. Fügen Sie Formen zu Ihrem Wireframe-Diagramm hinzu

Beginnen Sie bei der Gestaltung Ihres Wireframes mit der grundlegendsten Form – dem Container, der alle anderen Elemente enthält. Je nach Art Ihres Designs könnte dies eine Silhouette eines mobilen Geräts oder ein Browserfenster sein. Erstere kann in den Formenbibliotheken „iOS-Geräte“ und „Android-Geräte“ gefunden werden. Browserfenster finden Sie in der Bibliothek „UI-Containers“.

Beim Hinzufügen von zusätzlichen Elementen, sollten Sie allgemeine Elemente vor spezifischen und größere Designelemente vor kleineren platzieren. Verwenden Sie Containers, um Abschnitte innerhalb Ihres Diagramms zu erstellen – dabei könnte es sich um Symbolleisten, Seitenmenüs usw. handeln.

Sobald Sie die größeren Elemente platziert haben, können Sie einzelne Schaltflächen und Textblöcke hinzufügen. Bearbeiten Sie zuletzt bestimmte Designdetails wie Schriftarten, Farben, Fotos und Logos.

3. Verwenden Sie zur Erweiterung der Funktionalität Links, Ebenen und Hotspots

Wenn Sie mit der Gestaltung Ihres Wireframes fertig sind, können Sie die Websiten-Funktionalität mit Links, Ebenen und Hotspots simulieren. Mit diesen drei Funktionen können Sie tatsächlich funktionierende Schaltflächen und Pop-ups erstellen, diese mit externen Inhalten verlinken und von einer Seite eines Wireframes zu einer anderen navigieren. Probieren Sie es jetzt im interaktiven Diagramm aus!

Erfahren Sie mehr über Links, Ebenen und Hotspots.

4. Veranschaulichen Sie User-Journey-Abläufe mithilfe von Mockups

User-Journey-Abläufe zeigen den Verlauf der Interaktion eines Benutzers mit einer Anwendung. Sie können auf die Front-End-Oberfläche, die der Benutzer sieht, oder die vom Entwickler gebaute Back-End-Infrastruktur gerichtet sein. Anstatt einen Nutzerablauf mit Flussdiagrammformen zu skizzieren, sollten Sie Mockups einbauen. So bekommen Ihre Teammitglieder eine Vorstellung, wie die Anwendung aussieht.

Wireflow für Bank-App – Beispiel
Vorlage für den Wireflow einer Bankanwendung (Klicken Sie auf das Bild, um es vergrößert in Lucidchart anzuzeigen)

5. Veröffentlichen, Teilen oder Präsentieren

Mockups und Wireframes zu erstellen, kann sehr zeitaufwendig sein. Wenn Sie fertig sind, können Sie Ihre harte Arbeit auf verschiedene Weisen präsentieren:

  • Verwenden Sie den Präsentationsmodus von Lucidchart um eine Live-Website zu simulieren. Hotspots und Links sehen wie Schaltflächen und Pop-ups aus und verhalten sich auch so.
  • Betten Sie auf Ihrer Website ein dynamisches Diagramm ein. Wenn Sie Ihr Lucidchart-Dokument aktualisieren, werden die Änderungen überall dort übernommen, wo Ihr Dokument eingebettet wurde.
  • Veröffentlichen Sie Ihr Wireframe als PDF oder als Website. Jeder, der über die URL verfügt, kann Ihr Diagramm ansehen und damit interagieren.
  • Geben Sie den Link zu Ihrem Dokument an die Mitwirkenden weiter. Sie können die Mitwirkenden um Feedback zu Ihrem Design bitten und für sie Fragen als Kommentare hinterlassen.

Sind Sie ein erfahrener Wireframer? Teilen Sie uns Ihre besten Tipps und Tricks in den Kommentaren mit!

Holen Sie sich gleich die kostenlose Lucidchart-Testversion und beginnen Sie noch heute mit dem Erstellen Ihrer Diagramme!

Kostenlos registrieren

Jetzt beliebt

what does HR do

Wofür ist die Human Resources eigentlich verantwortlich? Die 11 wichtigsten Aufgaben

Über Lucidchart

Lucidchart ist die intelligente Diagramm-Anwendung, die Teams dabei unterstützt, komplexe Konzepte zu bewältigen, ihre Erkenntnisse und Sichtweisen aufeinander abzustimmen und die Zukunft mitzugestalten – und das effizienter als je zuvor. Diese intuitive, Cloud-basierte Lösung ermöglicht visuelles Arbeiten, Kooperation in Echtzeit und das Erstellen von Flussdiagrammen, Mockups, UML-Diagrammen und vielem mehr.

Die beliebteste Online-Alternative zu Visio: Lucidchart wird in über 180 Ländern von Millionen von Nutzern verwendet – von Vertriebsmanagern, die Zielorganisationen abbilden möchten, bis hin zu IT-Direktoren, die ihre Netzwerkinfrastruktur visualisieren möchten.

Loslegen

  • Preise
  • Einzelperson
  • Team
  • Unternehmen
  • Vertrieb kontaktieren
Deutsch
DatenschutzRechtliches
Herunterladen auf Apple App StoreHerunterladen auf Google Play Store
© 2022 Lucid Software Inc.