Entwicklung eines Gestaltungskonzepts für eine Webanwendung zur kollaborativen Ad-Hoc-Bearbeitung von Dokumenten in Echtzeit


Ragna Knes

Präsentation
02. February 2021, 09:30 Uhr, Raum https://th-koeln.zoom.us/j/86224491085 (Passwort steht im Ilias) Präsentation
Betreuer
Christian Noss
Kooperationspartner
TH Köln
Stichworte
Frontend-Development, Design, UX/UI, Kollaboratives Schreiben
Bildrechte
https://undraw.co/illustrations | https://icons8.com/icons/set/markdown

Abstract

Das Praxisprojekt befasst sich mit der Entwicklung eines Gestaltungskonzepts für eine Webanwendung zur kollaborativen Ad-Hoc-Bearbeitung von Dokumenten in Echtzeit. Webanwendungen für kollaboratives Schreiben in Echtzeit, ohne notwendige Anmeldung und mit einfachem Markdown, sind im Internet nicht zu finden. Verwandte Webseiten umfassen entweder das kollaborative Schreiben, dies teilweise nicht in Echtzeit, oder nutzen Markdown. Eine Kombination hinsichtlich der beiden Eigenschaften gibt es nicht. \

Das Ziel des Praxisprojekts ist die Entwicklung eines Gestaltungskonzepts einer Webanwendung mit minimalistischem Design, auf der Nutzer zusammen in Echtzeit an Dokumenten arbeiten können. Um die Webanwendung auf jedem Gerät nutzen zu können, wird das Responsive Design angewendet. Dies dient zur Anpassung der Webanwendung an die verschiedenen Displaygrößen.
Der Minimalismus ist ebenfalls ein wichtiger Aspekt bei der Entwicklung, da mit minimalistischem Design der Fokus des Nutzers auf das Schreiben gelenkt wird.
Für Markdown-Unerfahrene werden die wichtigsten Einstellungen und Formatierungsmöglichkeiten in Leisten angezeigt. Jedoch können diese mit dem Fullscreen-Modus ausgeblendet werden, wenn sie nicht benötigt werden. Damit hat der Nutzer eine reine Fläche zum Schreiben ohne Ablenkung. Zusätzlich hat der Nutzer die Möglichkeiten, seinen Namen und eine eigene Farbe anzupassen, sowie einen Dark Mode zu nutzen. \

Ergebnis der Entwicklung ist ein Gestaltungskonzept. Teil dessen ist ein Styleguide, der eine Übersicht über die verschiedenen Umsetzungen der Webseiten-Elemente darstellt, wie Farben, Typografie und Icons.
Die entwickelten Wireframes halten das Layout, Abstände und die Größen der einzelnen Elemente der Webanwendung fest.
Um das finale Design der Webanwendung festzuhalten, wurden Mockups verwendet, welche das aktuelle Design für verschiedene Displaygrößen zeigen. Durch digitale Paper-Testings konnte das Design der Webseite von Stakeholdern getestet und Feedback eingeholt werden. Das ausgewertete Feedback wurde durch eine Überarbeitung des Designs eingebunden.

Material & weiterführende Infos

Falls Sie auf Materialien, z.B. ein Git-Repo verlinken wollen, dann nutzen Sie bitte diesen Abschnitt.

Vorschläge für weitere Arbeiten im Themenfeld

Entwicklung einer Webanwendung für kollaborative Ad-Hoc-Beabeitung von Dokumenten in Echtzeit auf Basis eines gegebenen Gestaltungskonzepts

Evaluation eines bestehenden Gestaltungskonzepts einer Webanwendung für kollaborative Ad-Hoc-Beabeitung von Dokumenten in Echtzeit