Schnell und einfach Webseitenentwürfe anfertigen – Wireframes mit diagrams.net

Diagrams.net (ehemals draw.io) ist eine Open-Source-Anwendung zum schnellen Erstellen von verschiedenen Diagrammtypen. Die TU-Bibliothek nutzt diese beispielsweise zur Abbildung von Arbeitsabläufen wie in diesem Flussdiagramm zur Finanzierung von Zeitschriftenartikeln. Ich nutze diagrams.net auch öfter, um meine Kladde (meist handschriftliche Aufzeichnungen) aus Sitzungen, Veranstaltungen und Brainstormings durch eine Mindmap zu strukturieren oder einfach in eine übersichtlichere Form zu bringen. Gerade, wenn kein Tablet mit Stift zur Hand ist oder ich eine kleinere Schreib- und Arbeitsblockade habe, eine willkommene Abwechslung. Genutzt werden kann sowohl eine Online-Variante (keine Registrierung nötig) als auch eine Desktop-Version.

Was bei mir bislang völlig unter dem Radar geflogen ist: diagrams.net ist eine gute Möglichkeit, um Wireframes zu erstellen. Mit Wireframes lassen sich Strukturen, Inhalte, Funktionen und weitere Ideen zu Webseiten durch eine grobe Skizze veranschaulichen, bevor es nach einigen Feedbackrunden zur Umsetzung von visuell aufwendigeren Mockups und schließlich interaktiven Prototypen kommen kann. Alternativ reichen für erste Wireframes natürlich auch Stift und Papier.

Diagrams.net ist eine gute digitale Alternative zu Entwürfen mit Stift und Papier (Abbildung von Florian HagenCC0/Public Domain)

Gestoßen bin ich auf die Wireframe-Optionen der Anwendung im Rahmen der Arbeit in der Webseiten AG der TU-Bibliothek, in der wir uns regelmäßig zu Ideen für unser Webangebot austauschen. Einige Schritte zur Erstellung von Wireframes mit diagrams.net habe ich nachfolgend festgehalten.

Wireframes auf Basis einer Wireframe-Vorlage gestalten

Nach dem Aufruf von diagrams.net wird zunächst über einen Klick auf „Create New Diagram“ eine Auswahlmaske für unterschiedliche Vorlagen geöffnet.

Diagramm erstellen (Screenshot von Florian HagenCC0/Public Domain)

In der linken Auswahlspalte findet sich am Ende der Liste der Punkt „Wireframes“ (in der Desktop-Variante befinden sich die Wireframevorlagen in der Kategorie „Drahtgittermodelle“), der nun ausgewählt wird. Derzeit (Stand: 30.01.2022) gibt es fünf Webseitenvorlagen, aus denen ausgewählt werden kann. Die Auswahl wird mit einem Klick auf „Create“ bestätigt.

Diagrammvorlage auswählen (Screenshot von Florian HagenCC0/Public Domain)

Der Entwurf lässt sich nun mit den Formoptionen auf der linken Seite ergänzen und anpassen. Alternativ kann der eigene Wireframe-Ansatz auch über ein komplett leeres Arbeitsblatt gestartet werden. Hierzu wird nach Aufruf der Seite und Wahl der Option „Create New Diagram“ die Option „Blank Diagram“ gewählt.

Zusätzliche Formwerkzeuge freischalten

Diagrams.net bietet neben zahlreichen Standardformen, die zur Visualisierung genutzt werden können, auch spezielle Formen für Webseiten und Apps. Diese sind zunächst nicht aktiv, was nun über „More Shapes…“ (links unten im Anwendungsfenster), Auswahl von „Mockups“ und Bestätigung über „Apply“ geändert werden sollte.

Die verschiedenen Mockup-Funktionen können nun wie andere Formen per „Drag-and-drop“ mit der Maus genutzt werden. Mit diesen Werkzeugen lassen sich nach kurzer Zeit bereits erste simplere Entwürfe umsetzen.

Ein einfacher Webseitenentwurf entsteht mit wenigen Klicks (GIF von Florian HagenCC0/Public Domain)

Im obigen GIF werden zur Veranschaulichung die Elemente „Browser Window“ (Kategorie: Mockup Containers), „Menu Bar“ (Kategorie: Mockup Forms), „Icon Placeholder“ (Kategorie: Mockup Graphics) und „Paragraph of Text“ (Kategorie: Mockup Text) verwendet. Nach einer gewissen Eingewöhnungsphase dürften so auch kreativere Ideen umsetzbar sein.

Speicheroptionen

Abgespeichert werden können Entwürfe nach einem Klick auf „File“ und Auswahl von „Save as…“ in unterschiedlichen Formaten wie PNG, JPG oder XML. An Speicherorten stehen u.a. mit GitHub, GitLab, der lokalen Speicherung, Google Drive und Dropbox verschiedene Optionen zur Verfügung. Der späteren Weiterarbeit an einem Projekt steht also nichts im Wege.

Fazit

Diagrams.net bietet zur Erstellung von Diagrammen zahlreiche Formvorlagen. Auch spezielle Objekte für die Webseitengestaltung werden angeboten. Ideen lassen sich so schnell und unkompliziert visualisieren. Je nach Anwendungsfall also eine gute Möglichkeit ohne lange Ideen- und Anforderungslisten oder ganze „Textwüsten“ in den Austausch zu kommen. Habt ihr diagrams.net für die Webseitenkonzeptionierung und andere Diagrammoptionen ausprobiert oder alternative Anwendungen im Einsatz? Teilt eure Erfahrungen doch gerne offen über die Kommentarfunktion.


CC BY 4.0
Weiternutzung als OER ausdrücklich erlaubt: Dieses Werk und dessen Inhalte sind – sofern nicht anders angegeben – lizenziert unter CC BY 4.0. Nennung gemäß TULLU-Regel bitte wie folgt: Schnell und einfach Webseitenentwürfe anfertigen – Wireframes mit diagrams.net von Florian Hagen, Lizenz: CC BY 4.0 (Evtl. enthaltene Logos ausgenommen). Der Beitrag und dazugehörige Materialien stehen auch im Markdownformat und als PDF zum Download zur Verfügung.