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:
...
...
@@ -25,7 +25,6 @@ Während dieses Semesters wurde der Fokus auf die Hauptziele gelegt, da sie esse
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, 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:
-**venue-meeting-room:** Hier wurden die grundlegenden Funktionen für die Meetingräume entwickelt.
...
...
@@ -35,8 +34,6 @@ Um eine strukturierte Entwicklung zu gewährleisten, wird im Projekt der Feature
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>
...
...
@@ -73,63 +70,63 @@ Für Venue wurde ein ansprechendes Dark-Mode Farbschema gewählt, das ein modern
| 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. |
| **Hintergrund** | <imgsrc="uploads/78e658a6c3bffa98944f71b030df6339/image.png"width="90"/> | Dieses Grau/Schwarz symbolisiert den Masterstudiengang Human-centered Computing, weshalb für den Hintergrund diese Farbe genutzt wurde. Der dunkle Hintergrund bietet einen hohen Kontrast zu anderen UI-Elementen und verbessert dadurch die Lesbarkeit. |
| **Boxen** | <imgsrc="uploads/d7ffe123facd4f801a83b9937c05deea/image.png"width="90"/> | Die etwas hellere Farbe für Boxen und Container sorgt für eine klare Abgrenzung der verschiedenen Bereiche innerhalb der Benutzeroberfläche. |
| **Buttons** | <imgsrc="uploads/68e512fbb615053aa936d51fc883d666/image.png"width="90"/> | Dieses Gelb symbolisiert die Fakultät Informatik, weshalb für die Buttons diese Farbe genutzt wurde. Diese sind so gestaltet, dass sie interaktive Elemente hervorheben und die Navigation für den Benutzer erleichtern. |
| **Button Hover** | <imgsrc="uploads/88cd111ace2d7484f5bf04b86bea0dea/image.png"width="90"/> | Bei Maus-Hover über Buttons wird eine hellere Gelbfarbe angezeigt, die den interaktiven Zustand visuell hervorhebt und dem Benutzer Rückmeldung gibt. |
| **Deaktivierte Elemente** | <imgsrc="uploads/00c2e769ad4284d60dd655415fa28ba1/image.png"width="90"/>| Die Farbe für deaktivierte Elemente zeigt an, welche Optionen derzeit nicht verfügbar sind. |
| **Chat** | <imgsrc="uploads/e82b3a953a9eaa9d48a64af935bf5f0e/image.png"width="90"/> | Die im Vergleich zum Hintergrund hellere Farbe für den Chat-Bereich verbessert die Lesbarkeit von Nachrichten und sorgt für eine klare Trennung von anderen Inhalten. |
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.
Das neue Logo von Venue ist eine stilisierte Audiowelle, die mit einem Farbverlauf der Hauptfarben aus dem Farbschema gestaltet ist. Mit diesem neuen Logo soll die Identität von Venue gestärkt werden.
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"/> |
| **AddAPhotoIcon** | Dieses Icon symbolisiert das Hinzufügen von Fotos oder Bildern. | <imgsrc="uploads/ef4feb60f538781f8be1a4051748bf49/image.png"width="40"/> |
| **AddCircleIcon** | Dieses Icon symbolisiert das Hinzufügen von Inhalten. | <imgsrc="uploads/64f0b9b30cb7b02a2793c5695cca60ca/image.png"width="40"/> |
| **BackHandIcon** | Dieses Icon symbolisiert eine Meldung. | <imgsrc="uploads/ef38e649c843c95f7e85f155e79b63d3/image.png"width="40"/> |
| **CheckCircleIcon** | Dieses Icon symbolisiert eine Bestätigung oder das Speichern von Einstellungen. | <imgsrc="uploads/6635bce651fd95ea34b5d6d5a461a51d/image.png"width="40"/> |
| **ChevronLeftIcon** | Dieses Icon symbolisiert die Navigation nach links. | <imgsrc="uploads/7b4777c8d732c78742ce236ca16d8fc5/image.png"width="40"/> |
| **ChevronRightIcon** | Dieses Icon symbolisiert die Navigation nach rechts. | <imgsrc="uploads/b351c1d8f62cc7adec1137b0fc2addca/image.png"width="40"/> |
| **DeleteIcon** | Dieses Icon symbolisiert die Löschfunktion. | <imgsrc="uploads/4360acbdd3fd9f782022f48f07412f07/image.png"width="40"/> |
| **DescriptionIcon** | Dieses Icon symbolisiert ein Dokument/ den Bereich, wo die Dokumente sind. | <imgsrc="uploads/3f6c7a1e3c50b1ca71119efa7947550d/image.png"width="40"/> |
| **ErrorOutlineIcon** | Dieses Icon symbolisiert einen Hinweis oder ein Problem. | <imgsrc="uploads/8fdd5fe3d5c972668504ad7204df86aa/image.png"width="40"/> |
| **FirstPageIcon** | Dieses Icon symbolisiert die Navigation zur ersten Seite. | <imgsrc="uploads/b9c45d321ebc29f17fe4f3ab666905b5/image.png"width="40"/> |
| **GroupsIcon** | Dieses Icon symbolisiert den Meetingraum. | <imgsrc="uploads/39b41e92eb5fd008c8c7eb8db8d5e4ea/image.png"width="40"/> |
| **HomeIcon** | Dieses Icon symbolisiert den Home-Bereich. | <imgsrc="uploads/0fb37b258c5a4777184736a0860ff8f5/image.png"width="40"/> |
| **LoginIcon** | Dieses Icon symbolisiert den Anmeldevorgang. | <imgsrc="uploads/df231c5c6b209a11d09ef3050d15d645/image.png"width="40"/> |
| **LocalCafeIcon** | Dieses Icon symbolisiert, dass sich jemand in der Pause befindet. | <imgsrc="uploads/42dad6da2bacf0c238c177627c986290/image.png"width="40"/> |
| **ManageAccountsIcon** | Dieses Icon symbolisiert die Settings. Sproch die Einstellungen für das Benutzerkonto sowie dem Set-Up. | <imgsrc="uploads/0bec92489f8ad735c294c14deba7fba3/image.png"width="40"/> |
| **MicNoneIcon** | Dieses Icon symbolisiert, dass das Mikrofon aktiviert ist. | <imgsrc="uploads/4677428ef335e41792b0e2abe8330c68/image.png"width="40"/> |
| **MicOffIcon** | Dieses Icon symbolisiert, dass das Mikrofon deaktiviert ist. | <imgsrc="uploads/fb12ce50cf52f26bc0a4771ea43ffc6c/image.png"width="40"/> |
| **NearMeIcon** | Dieses Icon symbolisiert die Navigation. | <imgsrc="uploads/de4de1ec1712589b2368b5e2e2bf08aa/image.png"width="40"/> |
| **NoteAltIcon** | Dieses Icon symbolisiert ein Textfeld. | <imgsrc="uploads/c1306810419a642741b55d5ff7bcc13c/image.png"width="40"/> |
| **PersonIcon** | Dieses Icon symbolisiert einen Benutzer oder ein Benutzerkonto. | <imgsrc="uploads/f02f3c36e0e55be5055924e3e8735261/image.png"width="40"/> |
| **PresentToAllIcon** | Dieses Icon symbolisiert die Funktion für die Bildschirmpräsentation. | <imgsrc="uploads/ef75951e3a47ab102d2e18852e784356/image.png"width="40"/> |
| **SaveIcon** | Dieses Icon symbolisiert die Speicherfunktion. | <imgsrc="uploads/bfeb0f16d2e6f0aad1eb2393f71ed4ac/image.png"width="40"/> |
| **ScreenshotMonitorIcon** | Dieses Icon symbolisiert die Funktion für das Teilen vom Bildschirm. | <imgsrc="uploads/5795611c13ce99ae60b94b6f5835595a/image.png"width="40"/> |
| **SendIcon** | Dieses Icon symbolisiert den Sendevorgang im Chat. | <imgsrc="uploads/84e381fac7372480fd3c6110bc30cb51/image.png"width="40"/> |
| **SentimentSatisfiedAltIcon** | Dieses Icon symbolisiert das Emoji Set für den Chat. | <imgsrc="uploads/b050549336cbaf9bb75db83671a0d897/image.png"width="40"/> | | Icon | Beschreibung | [Darstellung](https://mui.com/material-ui/icons/)
| **SignLanguageIcon** | Dieses Icon symbolisiert das Klatschen. | <imgsrc="uploads/ad2fceda787a50d30f268a6ae255ab03/image.png"width="40"/> |
| **SpatialAudioIcon** | Dieses Icon symbolisiert die Testfunktion für den Audio-Input. | <imgsrc="uploads/385cd3e85f1569e36efb5eef2ff35497/image.png"width="40"/> |
| **SpatialAudioOffIcon** | Dieses Icon symbolisiert die Testfunktion für den Audio-Output. | <imgsrc="uploads/ee1bebe320cad7053fae25449e21fb61/image.png"width="40"/> |
| **ThumbDownAltIcon** | Dieses Icon symbolisiert eine negative Bewertungen oder nicht Zustimmung. | <imgsrc="uploads/6e30fdbe5a17b7c8f59ba49de532fd8d/image.png"width="40"/> |
| **ThumbUpIcon** | Dieses Icon symbolisiert eine positive Bewertungen oder Zustimmung. | <imgsrc="uploads/6ba2c8a1348cdde172a82a66b2734b3f/image.png"width="40"/> |
| **UnfoldMoreIcon** | Dieses Icon symbolisiert die Funktion mehr anzeigen zu können. | <imgsrc="uploads/d75471f4f22e81c5e566fa9b01bad814/image.png"width="40"/> |
| **ViewInArIcon** | Dieses Icon symbolisiert die Funktion zum Hinzufügen von 3D-Modellen. | <imgsrc="uploads/460d361e463ac8cf9a203af6f147e1c8/image.png"width="40"/> |
| **VideoCallIcon** | Dieses Icon symbolisiert das Hinzufügen einer Kamera. | <imgsrc="uploads/b98cbda74f48bf8640345f3f14b9f99a/image.png"width="40"/> |
| **VideoCamIcon** | Dieses Icon symbolisiert die Aktivierung der Kamera. | <imgsrc="uploads/2748dd26b839d6764630dbdd59e74598/image.png"width="40"/> |
| **VideocamOffIcon** | Dieses Icon symbolisiert die Deaktivierung der Kamera. | <imgsrc="uploads/5976a9468b5eadb28bb9c5629cb53705/image.png"width="40"/> |
| **VolumeUpIcon** | Dieses Icon symbolisiert das Einschalten von Ton. | <imgsrc="uploads/ec0f1249f31bcce9257d2eda393ffb1e/image.png"width="40"/> |
| **VolumeOffIcon** | Dieses Icon symbolisiert das Abschalten von Ton. | <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.
