Accelerator-Redesign_2021.md

@@ -8,18 +8,18 @@ Das Ziel der Gruppe Redesign bestand darin, das Design vom Accelerator hinsichtl
 Im aktuellen Stand wurden folgende Aspekte abgeschlossen:
 - Das Farbschema wurden erfolgreich angepasst
 - Alle Icons wurden erfolgreich durch Material Design Icons ersetzt
-- Beim Verlassen des Raumes wird dem Nutzer/der Nutzerin eine Meldung angezeigt, die ihn/sie frägt, ob er/sie den Raum wirklich verlassen möchte
+- Beim Verlassen des Raumes erscheint eine Meldung, die frägt, ob der Raum wirklich verlassen werden soll
 - Die Buttons auf den Notifications wurden angepasst (eigentliche Aktion steht nun immer rechts im Dialog)
 - In der Raumauswahl gibt es die Möglichkeit, die Räume alphabetisch zu sortieren
 
 
 **Umsetzung**
 
-Das Repository des Accelerator wurde lokal auf den Rechnern der Gruppenmitglieder geklont und in Visual Studio Code geöffnet. Auf Basis des Masterbranches wurde ein eigener Branch "Redesign2021" erstellt, der als Entwicklunsgbrach für das neue Design gedient hat. Nach jeder Iteration wurde ein Release im GitLab erstellt, der einen lauffähigen Stand repräsentiert.
+Das Repository des Accelerator wurde lokal auf den Rechnern der Gruppenmitglieder:innen geklont und in Visual Studio Code geöffnet. Auf Basis des Masterbranches wurde ein eigener Branch "Redesign2021" erstellt, der als Entwicklunsgbranch für das neue Design gedient hat. Nach jeder Iteration wurde ein Release im GitLab erstellt, der einen lauffähigen Stand repräsentiert.
 
 **_Material Design_**
 
-[Material Design](https://material.io/design) ist eine sehr berühmte visuelle Designsprache von Google. Da Google zu den [meistgenutzen Suchmaschinen](https://de.statista.com/statistik/daten/studie/225953/umfrage/die-weltweit-meistgenutzten-suchmaschinen/) gehört, entwickeln die Nutzer gegenüber Material-Design-Anwendungen ein Vertrauens- und Sicherheitsgefühl. Sie kennen das Design und schaffen laut [William Woodhead](https://medium.com/pilcro/should-you-use-material-design-bfb596a04bae) eine Verbindung zu Google.  Aus diesem Grund wurde Material Design verwendet.
+[Material Design](https://material.io/design) ist eine sehr berühmte visuelle Designsprache von Google. Da Google zu den [meistgenutzen Suchmaschinen](https://de.statista.com/statistik/daten/studie/225953/umfrage/die-weltweit-meistgenutzten-suchmaschinen/) gehört, entwickeln Nutzer:innen gegenüber Material-Design-Anwendungen ein Vertrauens- und Sicherheitsgefühl. Sie kennen das Design und schaffen laut [William Woodhead](https://medium.com/pilcro/should-you-use-material-design-bfb596a04bae) eine Verbindung zu Google.  Aus diesem Grund wurde Material Design verwendet.
 
 **_Material Design Icons_**
 
@@ -41,7 +41,7 @@ Accelerator nachher
 
 **_Material Design Dialoge_**
 
-Im Accelerator gibt es zwei Dialoge die angepasst wurden. Nach [Material Design](https://material.io/components/dialogs) müssen die Aktionen auf einem Dialog klar sein und zum Kontext passen. Zudem wird nach Material Design die eigentliche Aktion im rechten Button und die nebenläufige Aktion im linken Button dargestellt. Daher wurde auf den Dialogen der Cancel Button nach links verschoben und die eigentlichen Aktionn nach rechts wie auf folgenden Bildern zu sehen ist:
+Im Accelerator gibt es zwei Dialoge, die angepasst wurden. Nach [Material Design](https://material.io/components/dialogs) müssen die Aktionen auf einem Dialog klar sein und zum Kontext passen. Zudem wird nach Material Design die eigentliche Aktion im rechten Button und die nebenläufige Aktion im linken Button dargestellt. Daher wurde auf den Dialogen der Cancel-Button nach links verschoben und die eigentliche Aktion nach rechts wie auf folgenden Bildern zu sehen ist:
 
 Dialog "Direct connect!"
 
@@ -53,11 +53,11 @@ Dialog "Leave Room?"
 
 **_Typographie_**
 
-Die verwendete Schriftart für dieses Projekt war hauptsächlich Roboto, da es das Default System Font vom Material Design ist. Für die Überschriften "Accelerator", "Choose Room" und "Welcome to the Accelerator!" wurde die Schriftart Staatliches verwendet.
+Die verwendete Schriftart für dieses Projekt war hauptsächlich Roboto, da es das Default System Font vom Material Design ist. Für die Überschriften "Accelerator", "Choose Room" und "Welcome to the Accelerator!" wurde die Schriftart Staatliches verwendet, um die Hauptüberschriften der drei Seiten von den restlichen Schriften abgrenzen zu können.
 
 **_Farbschema_**
 
-Das Farbschema des Accelerator war veraltet und sollte durch eine neue Farbgestaltung optimiert werden. Farben lösen bestimmte Gefühle bei Menschen aus und haben unterschiedliche Wirkungen auf diese. Aufgrund dieser Hypothese wurden die [Wirkungen von Farben](https://www.webdesign-journal.de/farbwirkung/) untersucht.  Aus der Untersuchung ergab sich, dass sich die blaue Farbe für Businessseiten gut eignet. Der Grund dafür liegt darin, dass die blaue Farbe durch ihren kühlen Effekt Transparenz und Kontinuität ausstrahlt. Sie wirkt sachlich und vertrauensvoll und wird von vielen größeren Unternehmen verwendet. Zudem wird diese Farbe öfters mit Professionalität und Intelligenz in Verbbindung gesetzt, was in diesem Fall passend wäre. Bei der Optimierung des Farbschemas wurden dunklere Farbtöne gewählt, da sie einen höheren Grad an Konzentration übermitteln. Die Farben Weiß und Grau wurden verwendet, um in die blaue Farbe etwas Neutralität einzubauen. Zudem ist weiß eine beliebte Hintergrundfarbe in Webseiten. Das verwendete Farbschema ist aus der folgenden Abbildung zu entnehmen:
+Das Farbschema des Accelerator war veraltet und sollte durch eine neue Farbgestaltung optimiert werden. Farben lösen bestimmte Gefühle bei Menschen aus und haben unterschiedliche Wirkungen auf diese. Aufgrund dieser Hypothese wurden die [Wirkungen von Farben](https://www.webdesign-journal.de/farbwirkung/) untersucht.  Aus der Untersuchung ergab sich, dass sich die blaue Farbe für Businessseiten gut eignet. Der Grund dafür liegt darin, dass die blaue Farbe durch ihren kühlen Effekt Transparenz und Kontinuität ausstrahlt. Sie wirkt sachlich und vertrauensvoll und wird von vielen größeren Unternehmen verwendet. Zudem wird diese Farbe öfters mit Professionalität und Intelligenz in Verbindung gesetzt, was in diesem Fall passend ist. Bei der Optimierung des Farbschemas wurden dunklere Farbtöne gewählt, da sie einen höheren Grad an Konzentration übermitteln. Die Farben Weiß und Grau wurden verwendet, um in die blaue Farbe etwas Neutralität einzubauen. Zudem ist weiß eine beliebte Hintergrundfarbe auf Webseiten. Das verwendete Farbschema ist aus der folgenden Abbildung zu entnehmen:
 
 ![image](uploads/4345ef1e7d0d6fb2c87b5a82871dbf90/image.png)
 
@@ -88,25 +88,25 @@ Im Folgenden werden die Umsetzungsergebnisse des Projektes anhand von Gifs demon
 
 Startseite
 
-Die Startseite ist die erste Seite, die nach dem Öffnen des Accelerator erscheint. Der Nutzer kann hier den Namen eingeben und wenn das Schloss-Button geklickt wird, öffnet sich die Seite für die Raumauswahl. 
+Die Startseite ist die erste Seite, die nach dem Öffnen des Accelerator erscheint. Nutzer:innen können hier den Namen eingeben und beim Anklicken des Schloss-Buttons, öffnet sich die Seite für die Raumauswahl. 
 
 ![Startseite](uploads/1d753d7659e606e37b808bcf3cd8635c/Startseite.gif)
 
 Raumauswahl
 
-In der Raumauswahl können Räume ausgewählt werden, die betretet werden möchten. Unter der Überschrift hat der Nutzer die Möglichkeit, das Media Setup einzustellen. In der Raumübersicht können die Anzahl der Räume und Teilnehmer eingesehen werden oder ein Raum hinzugefügt werden. Die Erstellung eines Raumes ist mit oder ohne Passwort möglich. Alle klickbaren Elemente wurden hierbei blau und alle nicht klickbaren Elemente grau dargestellt.
+In der Raumauswahl können Räume ausgewählt werden, die betretet werden möchten. Unter der Überschrift haben Nutzer:innen die Möglichkeit, das Media Setup einzustellen. In der Raumübersicht können die Anzahl der Räume und Teilnehmer:innen eingesehen werden oder ein Raum hinzugefügt werden. Die Erstellung eines Raumes ist mit oder ohne Passwort möglich. Alle klickbaren Elemente wurden hierbei blau und alle nicht klickbaren Elemente grau dargestellt.
 
 ![ChooseRoom](uploads/b22b8d3cd714c58efc2bc46f60e65121/ChooseRoom.gif)
 
 Raumauswahl - Sortierfunktion
 
-In der Raumauswahl gibt es zusätzlich die Funktion, die bestehenden Räume alphabetisch von A-Z zu sortieren, in dem der Sortierbutton (AZ-Button) unter Room Overview angeklickt wird. Beim Hinzufügen eines neuen Raumes wird dieser Raum zufällig angeordnet. Um den neuen Raum auch zu sortieren, muss der Button erneut angeklickt werden.
+In der Raumauswahl gibt es zusätzlich die Funktion, die bestehenden Räume alphabetisch von A-Z zu sortieren, in dem der Sortierbutton (AZ-Button) unter Room Overview angeklickt wird. Beim Hinzufügen eines neuen Raumes wird dieser Raum zufällig angeordnet. Um den neuen Raum ebenfalls in der Liste zu sortieren, muss der Button erneut angeklickt werden.
 
 ![Sortierfunktion](uploads/c598c6ad1c2e1f3f220b14911ddbcc28/Sortierfunktion.gif)
 
 Raumansicht - Untere Buttons
 
-Beim Betreten eines Raumes öffnet sich die Raumansicht. Im unteren Menü wurden die Buttons den Material Design Icons angepasst. Es gibt ein Icon für ein eingeschaltetes Mikrofon und für ein ausgeschaltetes Mikrofon. Das Horn wurde somit durch das Mikrofon ersetzt. Der Grund hierfür war, dass die anderen Tools wie Zoom oder Microsoft Teams die Ein- und Ausschalt-funktion anbieten und die Nutzer generell an diese Zeichen gewohnter sind als an das Horn. Die klatschenden Hände wurden ersetzt durch ein Feier-Icon.
+Beim Betreten eines Raumes öffnet sich die Raumansicht. Im unteren Menü wurden die Buttons den Material Design Icons angepasst. Es gibt ein Icon für ein eingeschaltetes Mikrofon und für ein ausgeschaltetes Mikrofon. Das Horn wurde somit durch das Mikrofon ersetzt. Der Grund hierfür war, dass die anderen Tools wie Zoom oder Microsoft Teams die Ein- und Ausschalt-funktion anbieten und Nutzer:innen generell an diese Zeichen gewohnter sind als an das Horn. Die klatschenden Hände wurden ersetzt durch ein Feier-Icon.
 
 ![UnteresMenue](uploads/d63edf6e286b1bf74c2d5881af610ea1/UnteresMenue.gif)