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.

Monatsnotiz Dezember 2021 – Veranstaltungen, Fachreferat und Weihnachtsfeiern

Der letzte Monat des Jahres ist ja traditionell ein eher kürzerer Arbeitsmonat. Weniger zu tun als in anderen Monaten des Jahres 2021 gab es aber dennoch nicht.

Seminar Wissenschaftliches Arbeiten

In unserem Bachelorseminar „Wissenschaftliches Arbeiten“ haben wir uns den Themen Selbstmanagement, Zitieren und Schreiben (Schreibhürden, Schreibblockaden etc.) gewidmet. Da wir natürlich nicht alle in den gleichen Schreibumgebungen unterwegs sind, ist vor allem Letzteres immer ein spannender Punkt, wenn es um Workflows für das wissenschaftliche Arbeiten geht. In diesem Semester sind bei unseren Seminarteilnehmer:innen neben Schreibanwendungen wie Word, Pages oder LibreOffice auch unterschiedliche LaTeX-Editoren wie Texmaker und weitere Texteditoren vertreten. Da es zu Texmaker einige Fragen zur Einbindung von Zitaten gab, habe ich die Chance einmal genutzt, um mich selbst mit Texmaker vertraut zu machen. Erfreulicherweise konnten wir gemeinsam am Ende eine Lösung finden, damit Zitationen wie gewünscht in einem Dokument eingebunden und abgebildet werden. Mittlerweile war für die anzufertigenden Exposés im Seminar auch Abgabe, sodass wir uns in Form eines Sammelfeedbacks über die abgegebenen Texte austauschen konnten. Auch wenn es am Ende des Semesters nochmal viel Arbeit sein wird, die finalen Texte zu „begutachten“ und individuelle Feedbacks zu formulieren: Da sind wieder so viele unterschiedliche Themen und Ideen bei (von Nachhaltigkeit bei Lieferdiensten, Benotungssystemen in der Schule, über Gesundheitsüberwachung mit smarten Geräten und Wildcampen, der medialen Repräsentation von Minderheiten bis hin zu Literaturkonsum sowie unterschiedlichen Facetten der Elektromobilität), dass ich mich vor allem freue, auch dieses Semester wieder viel Neues für mich aus der Veranstaltung mitnehmen zu können.

Vorlesung „Einführung in die VT/ BioVT“

In der vergangenen Monatsnotiz hatte ich bereits berichtet, dass die Bibliothek auch dieses Semester wieder einen Teil zum wissenschaftlichen Arbeiten in der Veranstaltung „Einführung in die VT/ BioVT“ übernimmt. Im Dezember stand hier neben den Themen „Zitieren“ und „Literaturverwaltung“ eine offene Schreibwerkstatt auf dem Programm. Idee der Schreibwerkstatt war, dass wir zunächst im Plenum gemeinsam rausfinden, wer die optionale Schreibaufgabe dieses Semester angeht und was hierbei bisher die größten Herausforderungen rund um die Aufgabe waren. Genannt wurde dabei neben allgemeiner Zeitknappheit auch die Herausforderung, überhaupt erst einmal ins Schreiben zu kommen. Neben der Möglichkeit, frei am eigenen Text weiterarbeiten zu können, und bei Bedarf direkt kurze Beratungen in Anspruch nehmen zu können war es uns ein Anliegen, dass kreative Schreibtechniken wie das „Free Writing“ gemeinsam ausprobiert werden. Zudem wurden Tipps gesammelt, die die Veranstaltungsteilnehmer:innen auf Grundlage eigener Erfahrungen in diesem und anderen Schreibprojekten Ihren Kommiliton:innen ans Herz legen würden. Genannt wurden hier zum Beispiel eine großzügige Zeitplanung (Zeitpuffer) und „Einfach mal anfangen“, um der Sorge vor dem leeren Blatt beim Schreiben entgegenzuwirken. Falls jemand selbst Erfahrung mit der Durchführung von Schreibwerkstätten hat oder an einer teilgenommen hat und gerne Eindrücke oder Konzepte teilen würde: Ich würde mich sehr darüber freuen 🙂

Fachreferatsarbeit

Bei mir im Fachreferat gab es diesen Monat viele unterschiedliche kleinere Aufgaben. Spaß gemacht hat mir vor allem, dass ich im Rahmen eines Praktikums einer Praktikantin aus dem ÖB-Bereich (öffentliche Bibliotheken) einige Einblicke in unterschiedliche Tätigkeiten zeigen durfte. Das war für mich auch eine gute Möglichkeit meine Selbstdokumentation an einigen Stellen zu Themen wie Open Access, Open Education und anderen Tätigkeiten im Nachgang zu erweitern sowie verschiedene Arbeitsschritte zu hinterfragen und auch mal wieder einen (sehr kurzen) Überblick zu Entwicklungen und Trends in der Berufspraxis in ÖBs zu bekommen.

Neben klassischen Arbeiten (Austausch im Bereich Open Access zu möglichen Finanzierungen mit Blick auf unsere Förderkriterien) fiel u.a. auch an:

  • Bearbeitung von Anschaffungsvorschlägen,
  • Abstimmungsrunden mit Kolleg:innen hinsichtlich Festkäufen zum Jahresende,
  • Vor- und Nachbereitung von Lehrveranstaltungen und anderen Terminen im Dezember,
  • Veranstaltungsplanung der kommenden Monate,
  • Weiterdenken einiger Webseiten der tub.,
  • Weiterarbeit an unterschiedlichen OER-Ideen (Blogbeiträge, Seminar- und Veranstaltungsskripte).

Auch die Weiterbildung im Open-Access-Bereich durch Veranstaltungen wie „Wenn du nicht für das Produkt bezahlst, bist du selbst das Produkt?“ Aufzeichnung der Podiumsdiskussion ist bereits über das AV-Portal verfügbar und „Kritische Betrachtungen der Auswirkungen von DEAL auf die Bibliotheken“ spielte eine Rolle.
Sehr gefreut habe ich mich auf das OERcamp.global 2021, es terminlich aber am Ende leider nicht geschafft teilzunehmen. Immerhin lässt sich über das Hashtag #OERcampglobal und diese Playlist einiges nachholen.

Bei der Arbeit rund um TORE (TUHH Open Research) ist eine Aufgabe meiner Kolleg:innen und mir im Rahmen einer Vorabprüfung von Uploads urheberrechtliche Fragen zu klären, was auch im Dezember das eine oder andere Mal der Fall war. Zusätzlich ist es dabei auch immer unser Anliegen Hinweise zu geben, die die Optimierung der Referenzierbarkeit von Veröffentlichungen unterstützen.

Weihnachtsfeiern

Zum Ende des Jahres 2021 gab es noch zwei wunderbare kleinere Weihnachtsfeiern. Mit unserem Bibliotheksteam haben wir einen gemeinsamen Campusspaziergang gemacht, bei dem es an ausgewählten Orten unserer Tour noch einige historische Fakten und Anekdoten zu hören gab.

Mit Isabella, Albert, Axel und Tim von unserem ehemaligen HOS-Team (Hamburg Open Science) Modernes Publizieren haben wir uns online zum weihnachtlichen Klönschnack getroffen. Neben der Offenbarung einiger musikalischer und filmischer „guilty pleasures“ wurde ich dabei leider (mutwillig!) gewhamt. Aber vielleicht schaffe ich es 2022 endlich einmal bis zu den Festtagen 🙂 .

Abbildung: „Weihnachten“ von Florian Hagen (CC BY 4.0)

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: Monatsnotiz Dezember 2021 – Veranstaltungen, Fachreferat und Weihnachtsfeiern von Florian Hagen, Lizenz: CC BY 4.0. Beitragsbild „Weihnachten“ von Florian Hagen (CC BY 4.0). Der Beitrag und dazugehörige Materialien stehen auch im Markdownformat und als PDF zum Download zur Verfügung.