Im Rahmen des Projekts Venue (ehemals "Accelerator") haben wir uns zum Ziel gesetzt, das Frontend einem umfassenden Redesign zu unterziehen. Hierfür haben wir eine moderne UI mit einem neuen Logo gestaltet, um die Benutzerfreundlichkeit zu steigern. Zur Erreichung unserer Ziele in diesem Semester haben wir diese wie folgt priorisiert:
Im Rahmen des Projekts Venue (ehemals "Accelerator") wurde das Ziel verfolgt, das Frontend einem umfassenden Redesign zu unterziehen. Hierfür wurde eine moderne UI mit einem neuen Logo gestaltet, um die Benutzerfreundlichkeit zu steigern. Zur Erreichung der Ziele in diesem Semester wurden diese wie folgt priorisiert:
| Hauptziele | Nice-to-haves |
| ------ | ------ |
...
...
@@ -13,42 +13,39 @@ Im Rahmen des Projekts Venue (ehemals "Accelerator") haben wir uns zum Ziel gese
| Benutzerfreundlichkeit | Weitere Funktionalitäten (Video etc.) |
| Neues Design | Testing aufsetzen |
Während dieses Semesters wurde der Fokus auf die Hauptziele gelegt, da sie essenziell für die Weiterentwicklung sind. Im Rahmen der Verbesserungsmaßnahmen wurden verschiedene Bereiche identifiziert, in denen weiteres Optimierungspotenzial besteht:
Während dieses Semesters haben wir uns auf die Hauptziele konzentriert, da diese essenziell für die Weiterentwicklung sind. Des Weiteren haben wir im Rahmen der Verbesserungsmaßnahmen verschiedene Bereiche identifiziert, in denen weiteres Optimierungspotential besteht:
-**Icons und ihre Interpretation**: Einige Icons, wie beispielsweise das Icon für das Mikrofon, können missverstanden werden.
-**Fehlende Anleitung**: Eine ausführliche Anleitung fehlt, insbesondere für spezifische Funktionen wie die 3D-Objekt-Funktion.
-**Moderatorenrechte**: Derzeit kann der Moderator ohne Vorwarnung das Mikrofon eines Teilnehmers einschalten. Dies sollte überdacht werden, da ähnliche Funktionen bei anderen Plattformen wie Teams oder Zoom auch nicht existieren.
-**Mikrofon-Berechtigung**: Nutzer haben oft Probleme mit Mikrofon-Berechtigungen.
-**PowerPoint-Upload**: In einigen Fällen konnte eine PowerPoint-Datei nicht hochgeladen werden, obwohl dies in eigen erstellten Räumen funktioniert.
-**Sichtbarkeit von Räumen**: Eigene Räume sollten für andere Nutzer unsichtbar sein, um die Privatsphäre zu gewährleisten.
-**Icons und ihre Interpretation:** Einige Icons, wie beispielsweise das Icon für das Mikrofon, können missverstanden werden.
-**Fehlende Anleitung:** Eine ausführliche Anleitung fehlt, insbesondere für spezifische Funktionen wie die 3D-Objekt-Funktion.
-**Moderatorenrechte:** Derzeit kann der Moderator ohne Vorwarnung das Mikrofon eines Teilnehmers einschalten. Dies sollte überdacht werden, da ähnliche Funktionen bei anderen Plattformen wie Teams oder Zoom auch nicht existieren.
-**Mikrofon-Berechtigung:** Nutzer haben oft Probleme mit Mikrofon-Berechtigungen.
-**PowerPoint-Upload:** In einigen Fällen konnte eine PowerPoint-Datei nicht hochgeladen werden, obwohl dies in eigen erstellten Räumen funktioniert.
-**Sichtbarkeit von Räumen:** Eigene Räume sollten für andere Nutzer unsichtbar sein, um die Privatsphäre zu gewährleisten.
In dieser Dokumentation geben wir eine Übersicht über unser Vorgehen, dem Aufbau und Design von Venue sowie unsere Vision für die zukünftige Weiterentwicklung. Zudem haben wir uns mit den genannten Herausforderungen und Verbesserungsmöglichkeiten beschäftigt, um die Benutzererfahrung zu optimieren.
In dieser Dokumentation wird eine Übersicht über das Vorgehen, den Aufbau und das Design von Venue sowie ein Ausblick für die zukünftige Weiterentwicklung gegeben.
## Vorgehen
### Branching-Strategie
Um eine strukturierte Entwicklung zu gewährleisten folgen wir im Projekt der Feature-Branch-Strategie. Die gesamte Feature Entwicklung erfolgt somit in einem gesonderten Branch und nicht im main-Branch. Diese Einkapselung erleichtert die Arbeit an einem bestimmten Feature, ohne die Haupt Codebasis zu stören.
Im Master-Branch befindet sich die Hauptversion von Venue.
Für die Entwicklung neuer Funktionen verwenden wir Feature-Branches, die mit "venue-" beginnen, gefolgt von einer kurzen Beschreibung des Features, also "venue-featurebeschreibung".
Um eine strukturierte Entwicklung zu gewährleisten, wird im Projekt der Feature-Branch-Strategie gefolgt. Die gesamte Feature-Entwicklung erfolgt somit in separaten Branches und nicht im main-Branch. Diese Vorgehensweise ermöglicht es, an einem bestimmten Feature zu arbeiten, ohne die Haupt-Codebasis zu beeinträchtigen. Im Master-Branch befindet sich die Hauptversion von Venue. Für die Entwicklung neuer Funktionen werden Feature-Branches verwendet, die mit "venue-" beginnen, gefolgt von einer kurzen Beschreibung des Features, z. B. "venue-featurebeschreibung". Feature-Branches, die während der Entwicklung erstellt wurden:
**Featur-Branches die wir beim Entwickeln erstellt haben:**
-**venue-meeting-room:** Hier arbeiten wir an den grundlegenden Funktionen für die Meeting Räume.
-**venue-settings:** Dieser Branch ist für die Profil und Setup Einstellungen zuständig.
-**venue-home:** Hier entwickeln wir die Startseite von Venue.
-**venue-backend:** Dieser Branch ist für Backend-Anpassungen gedacht.
-**venue-meeting-room:** Hier wurden die grundlegenden Funktionen für die Meetingräume entwickelt.
-**venue-settings:** Dieser Branch war für die Entwicklung von Profil- und Setup-Einstellungen zuständig.
-**venue-home:** In diesem Branch erfolgte die Entwicklung der Startseite.
-**venue-backend:** Auf diesem Branch wurden die Backend-Anpassungen durchgeführt.
Durch diese Struktur können wir neue Funktionen isoliert entwickeln und gleichzeitig die Stabilität des Master-Branches aufrechterhalten.
Durch diese Struktur können neue Funktionen isoliert entwickelt und gleichzeitig die Stabilität des Master-Branches aufrechterhalten werden.
### Guidelines
## Dependencies
### Frontend
**[React](https://react.dev/)**<br>
Nach sorgfältiger Abwägung der verfügbaren Optionen standen wir vor der Entscheidung zwischen zwei Frameworks: React und Vue. Vue ist bekannt dafür, das am einfachste zu erlernende JavaScript Framework zu sein. React hingegen zeichnet sich durch Leistungsfähigkeit, Skalierbarkeit und die Unterstützung durch eine große Entwickler-Community aus. Letztendlich fiel unsere Wahl auf React.
Nach sorgfältiger Abwägung der verfügbaren Optionen stand die Entscheidung zwischen zwei Frameworks an: React und Vue. Vue ist bekannt dafür, das am einfachste zu erlernende JavaScript Framework zu sein. React hingegen zeichnet sich durch Leistungsfähigkeit, Skalierbarkeit und die Unterstützung durch eine große Entwickler-Community aus. Letztendlich fiel unsere Wahl auf React.
React bietet eine große und aktive Community sowie eine breite Palette an Ressourcen und Modulen und ermöglicht die Erstellung wiederverwendbarer, maßgeschneiderter Komponenten. Die komponentenbasierte Architektur von React ist hilfreich bei der Entwicklung, da sie eine effiziente Code-Organisation und eine gute Wiederverwendbarkeit von Code ermöglicht.
Ein weiterer Entscheidungspunkt war die Performance. Die Verwendung des virtuellen DOMs in React gewährleistet eine flüssige Benutzererfahrung, da nur die veränderten Komponenten aktualisiert werden müssen, was zu schnelleren Ladezeiten führt. Zudem unterstützt React die Einweg Datenbindung, was die Datenflüsse leichter zu handhaben macht.
Wir haben uns dafür entschieden, TypeScript in unserem Projekt zu verwenden. TypeScript fügt JavaScript statische Typisierung hinzu, was die Entwicklung erleichtert und dabei hilft, viele Fehler bereits zur Entwicklungszeit zu erkennen. Dies führt zu einer verbesserten Entwicklererfahrung und macht den Code besser skalierbar und strukturierter.
Es wurde entschieden, TypeScript in diesem Projekt zu verwenden. TypeScript fügt JavaScript statische Typisierung hinzu, was die Entwicklung erleichtert und dabei hilft, viele Fehler bereits zur Entwicklungszeit zu erkennen. Dies führt zu einer verbesserten Entwicklererfahrung und macht den Code besser skalierbar und strukturierter.
Tailwind CSS ist ein fortschrittliches CSS-Framework, das auf dem Utility-First-Ansatz basiert und Low-Level-CSS-Klassen in PostCSS bereitstellt. Tailwind wurde für das CSS-Styling verwendet, um das Erstellen separater CSS-Dateien zu vermeiden und stattdessen ausschließlich mit Klassen zu arbeiten.
...
...
@@ -57,7 +54,7 @@ Tailwind CSS ist ein fortschrittliches CSS-Framework, das auf dem Utility-First-
Shadcn/UI ist eine Sammlung von UI-Komponenten, die speziell für die Integration mit React-Anwendungen entwickelt wurden. Diese Komponenten sind Barrierefrei implementiert, anpassbar und Open Cource, was uns eine große Flexibilität bietet. Die Bibliothek bietet eine Vielzahl vorgefertigter Komponenten, darunter Dashboards, Karten, Formulare und mehr. Dabei können die Komponenten leicht an spezifische Designanforderungen angepasst werden.
**[MUI (Material UI)](https://mui.com/)**<br>
MUI ist eine beliebte React-Komponentenbibliothek, die auf Google's Material Design basiert. Sie bietet eine breite Palette an vorgefertigten, stilvollen und anpassbaren UI-Komponenten. Eine Alternative, die wir für die Icons in Betracht gezogen hatten, war das [Set von Lucide](https://lucide.dev/icons/). Jedoch haben wir uns aufgrund der Auswahl an benötigten Icons und der etwas anschaulicheren Darstellung für das Material Icons entschieden.
MUI ist eine beliebte React-Komponentenbibliothek, die auf Google's Material Design basiert. Sie bietet eine breite Palette an vorgefertigten, stilvollen und anpassbaren UI-Komponenten. Eine Alternative, die für Venue in Betracht gezogen wurde, war das [Set von Lucide](https://lucide.dev/icons/). Jedoch wurde aufgrund der Auswahl an benötigten Icons und der etwas anschaulicheren Darstellung für die Icons von MUI entschieden.
### Backend
**[Socket.IO](https://socket.io/)**<br>
...
...
@@ -72,66 +69,67 @@ Die Socket.IO-Codebasis ist in zwei unterschiedliche Ebenen aufgeteilt: die Low-
In diesem Abschnitt werden die Designprinzipien des Venue-Frontends beschrieben.
### Farbschema
Wir haben uns bei Venue für ein ansprechendes DarkMode Farbschema entschieden, welches ein einheitliches, modernes Erscheinungsbild darstellt.
Für Venue wurde ein ansprechendes Dark-Mode Farbschema gewählt, das ein modernes Erscheinungsbild bietet. Die Farbpalette umfasst die folgenden Hauptfarben:
Unsere Farbpalette umfasst die folgenden Hauptfarben:
| Element | [Farbcode](https://encycolorpedia.com/) | Beschreibung |
| **Hintergrund** | <imgsrc="uploads/78e658a6c3bffa98944f71b030df6339/image.png"width="90"/> | Dunkler Hintergrund für hohen Kontrast zu anderen UI-Elementen, verbessert die Lesbarkeit. |
| **Boxen** | <imgsrc="uploads/d7ffe123facd4f801a83b9937c05deea/image.png"width="90"/> | Farbe für Boxen und Container, klare Abgrenzung der verschiedenen Bereiche. |
| **Buttons** | <imgsrc="uploads/68e512fbb615053aa936d51fc883d666/image.png"width="90"/> | Gelbe Buttons zur Hervorhebung interaktiver Elemente, erleichtert die Navigation. |
| **Button Hover** | <imgsrc="uploads/88cd111ace2d7484f5bf04b86bea0dea/image.png"width="90"/> | Hellere Gelbfarbe bei Maus-Hover über Buttons, visuelle Hervorhebung des interaktiven Zustands. |
| **Deaktivierte Elemente** | <imgsrc="uploads/00c2e769ad4284d60dd655415fa28ba1/image.png"width="90"/>| Farbe für deaktivierte Elemente, zeigt nicht verfügbare Optionen an. |
| **Chat** | <imgsrc="uploads/e82b3a953a9eaa9d48a64af935bf5f0e/image.png"width="90"/> | Farbe für den Chat-Bereich, verbessert die Lesbarkeit von Nachrichten. |
| Element | [Farbcode](https://encycolorpedia.com/) | Beschreibung
| **Hintergrund** |  | Dunkler Hintergrund für hohen Kontrast zu anderen UI-Elementen, verbessert die Lesbarkeit. |
| **Boxen** |  | Farbe für Boxen und Container, klare Abgrenzung der verschiedenen Bereiche. |
| **Buttons** |  | Gelbe Buttons zur Hervorhebung interaktiver Elemente, erleichtert die Navigation. |
| **Button Hover** |  | Hellere Gelbfarbe bei Maus-Hover über Buttons, visuelle Hervorhebung des interaktiven Zustands. |
| **Deaktivierte Elemente** | | Farbe für deaktivierte Elemente, zeigt nicht verfügbare Optionen an. |
| **Chat** |  | Farbe für den Chat-Bereich, verbessert die Lesbarkeit von Nachrichten. |
Mit diesem Farbschema wird eine benutzerfreundliche und visuell ansprechende Oberfläche geschaffen, die den Nutzern eine angenehme Interaktion ermöglicht.
Mit diesem Farbschema wird eine visuell ansprechende Oberfläche geschaffen, die den Nutzern eine angenehme Interaktion ermöglicht.
### Logo
Das neue Logo von Venue ist eine stilisierte Audiowelle, die mit einem Farbverlauf in unseren Hauptfarben aus dem Farbschema gestaltet ist. Mit diesem neuen Logo möchten wir die Identität von Venue stärken.
Icons spielen eine wichtige Rolle in unserem Design, da sie zur visuellen Darstellung und Benutzerführung beitragen. Wir haben eine Vielzahl von Icons aus der MUI-Icon-Bibliothek verwendet, um verschiedene Funktionen/Aktionen in Venue zu repräsentieren. Hier ist eine Auflistung der Icons, die wir eingesetzt haben:
Icons spielen eine wichtige Rolle im Design, da sie zur visuellen Darstellung und Benutzerführung beitragen. Für das Design von Venue wurde eine Vielzahl von Icons aus der MUI-Icon-Bibliothek verwendet, um verschiedene Funktionen/Aktionen zu repräsentieren. Hier ist eine Auflistung der Icons, die eingesetzt wurden:
| **PersonIcon** | Symbolisiert einen Benutzer oder ein Benutzerkonto. | <imgsrc="uploads/f02f3c36e0e55be5055924e3e8735261/image.png"width="40"/> |
| **PresentToAllIcon** | Zeigt die Funktion für die Bildschirmpräsentation an. | <imgsrc="uploads/ef75951e3a47ab102d2e18852e784356/image.png"width="40"/> |
| **SaveIcon** | Symbolisiert die Speicherfunktion. | <imgsrc="uploads/bfeb0f16d2e6f0aad1eb2393f71ed4ac/image.png"width="40"/> |
| **ScreenshotMonitorIcon** | Symbolisiert die Funktion für Bildschirm teilen. | <imgsrc="uploads/5795611c13ce99ae60b94b6f5835595a/image.png"width="40"/> |
| **SendIcon** | Symbolisiert den Sendevorgang. | <imgsrc="uploads/84e381fac7372480fd3c6110bc30cb51/image.png"width="40"/> |
| **SentimentSatisfiedAltIcon** | Symbol für positive Stimmung oder Zufriedenheit. | <imgsrc="uploads/b050549336cbaf9bb75db83671a0d897/image.png"width="40"/> | | Icon | Beschreibung | [Darstellung](https://mui.com/material-ui/icons/)
| **SignLanguageIcon** | Symbole für Klatschen. | <imgsrc="uploads/ad2fceda787a50d30f268a6ae255ab03/image.png"width="40"/> |
| **SpatialAudioIcon** | Symbole für Klatschen. | <imgsrc="uploads/385cd3e85f1569e36efb5eef2ff35497/image.png"width="40"/> |
| **SpatialAudioOffIcon** | Symbole für Klatschen. | <imgsrc="uploads/ee1bebe320cad7053fae25449e21fb61/image.png"width="40"/> |
| **ThumbDownAltIcon** | Symbol für negative Bewertungen oder nicht Zustimmung. | <imgsrc="uploads/6e30fdbe5a17b7c8f59ba49de532fd8d/image.png"width="40"/> |
| **ThumbUpIcon** | Symbol für positive Bewertungen oder Zustimmung. | <imgsrc="uploads/6ba2c8a1348cdde172a82a66b2734b3f/image.png"width="40"/> |
| **UnfoldMoreIcon** | Symbol für "Mehr anzeigen". | <imgsrc="uploads/d75471f4f22e81c5e566fa9b01bad814/image.png"width="40"/> |
| **ViewInArIcon** | Symbol für 3D Objekte. | <imgsrc="uploads/460d361e463ac8cf9a203af6f147e1c8/image.png"width="40"/> |
| **VideoCallIcon** | Symbol für Video an. | <imgsrc="uploads/b98cbda74f48bf8640345f3f14b9f99a/image.png"width="40"/> |
| **VideoCamIcon** | Symbol für Video an. | <imgsrc="uploads/2748dd26b839d6764630dbdd59e74598/image.png"width="40"/> |
| **VideocamOffIcon** | Symbol für Video aus. | <imgsrc="uploads/5976a9468b5eadb28bb9c5629cb53705/image.png"width="40"/> |
| **VolumeUpIcon** | Symbol für Lautstärke erhöhen. | <imgsrc="uploads/ec0f1249f31bcce9257d2eda393ffb1e/image.png"width="40"/> |
| **VolumeOffIcon** | Symbol für stummschalten. | <imgsrc="uploads/3ef22f89d390b3100f52c4f737d95303/image.png"width="40"/> |
Mit diesem Styleguide wird sichergestellt, dass das Design von Venue nicht nur ästhetisch ansprechend, sondern auch benutzerfreundlich ist.
...
...
@@ -163,10 +161,9 @@ Die Einstellungen zum Set-Up und das Nutzerprofil können im Hauptmenü über de
-**Chat-Funktion:** Bietet eine Echtzeit-Kommunikationsmöglichkeit zwischen den Nutzern im selben Raum.
