Accelerator-Redesign.md

@@ -20,7 +20,9 @@ Zeroheight ist ein Online Tool um Design Systeme zu erstellen und bietet die Mö
 # Redesign Tour
 
 ### Start und Onboarding
-![Start](uploads/719a250d6162f78068797caa53c2d522/Start.gif)
+
+![Starten](uploads/2c019444a725e99d3fd782f6b5031962/Starten.gif)
+
 Bei der ersten Anmeldung im Accelerator muss der Nutzer seinen Namen angeben und kann optional ein Profilbild hochladen. Außerdem kann er hier die Zeichensprache für Gehörlose durch einen 3D Avatar aktivieren.
 
 #### Raumauswahl
@@ -94,9 +96,9 @@ Die Draggables können von einem/einer Moderator*in für alle Teilnehmer eines R
 
 Als neue Funktion im Rahmen des Redesigns wurden einige Überlegungen zu Gruppenräumen gemacht.
 
-![Gruppenräume_Start](uploads/ccfb66491ce87e152b13a55ec010d83d/Gruppenräume_Start.gif)
+![Gruppenräume_Erstellen](uploads/0010b77576fc798028df0a48942643a3/Gruppenräume_Erstellen.gif)
 
-Erstellt ein/e Moderator*in Gruppenräume so kann er dies tun ohne dass die Gruppeneinteilungen für die restlichen Teilnehmer sichtbar sind. Er kann die Gruppeneinteilung sichtbar machen, sobald er bereit ist (Auge in der Moderatorenleiste). Die anderen Teilnehmenden sehen den Empty State in der Animation unten. 
+Erstellt ein/e Moderator*in Gruppenräume so kann er dies tun ohne dass die Gruppeneinteilungen für die restlichen Teilnehmer sichtbar sind. Er kann die Gruppeneinteilung sichtbar machen, sobald er bereit ist (Auge in der Moderatorenleiste). Die anderen Teilnehmenden sehen den Empty State in der Animation oben. 
 
 ![Teilnehmer-zuordnen](uploads/aff67ba5b6288bfa44245b9036360a05/Teilnehmer-zuordnen.gif)
 
@@ -118,9 +120,113 @@ Als Zugeordnete*r wird die eigene Gruppe im Vergleich zu den anderen Gruppen her
 
 Ein Raum kann über den roten Floating Action Button links unten verlassen werden. Bevor ein/e Teilnehmer*in einen Raum verlassen kann muss er dies erst in einem Dialog bestätigen um den Raum nicht ausversehen zu verlassen.
 
-
-
 # Design System
 Das Design System soll dem Accelerator ein neues Look & Feel geben und Usability Probleme beheben. Die Evaluierung dieses Redesigns wurde durch Nutzertests durchgeführt um die Probleme zu identifizieren und in mehreren Iterationen zu verbessern.
 
 Das Design System basiert auf den Grundlagen und Richtlinien der [Material Design](https://material.io/) Guidelines auf dem Stand vom Januar 2021.
+
+## Farben
+
+### Primärfarben
+Primärfarben finden Verwendung in unterschiedlichen Buttons (Verlassen & Betreten eines Raumes) und Gestaltungselementen (Tabs, Create Room Button)
+
+![Primary](uploads/902ce85834f80aa3b4b27e8499b5a9b3/Primary.png)
+
+### Neutrale Farben
+
+#### Light Mode
+![Neutrals_Light](uploads/e6f8cd5e690552ae78781033da8b62ba/Neutrals_Light.png)
+#### Dark Mode
+![Neutrals_Dark](uploads/d996c5d0b801008b04fefb162c1637c7/Neutrals_Dark.png)
+
+### Schriftfarben
+
+#### Light Mode
+![Schrift_Light](uploads/5b7289fec69fa403e5784558aa98ccab/Schrift_Light.png)
+#### Dark Mode
+![Schrift_Dark](uploads/5bb4e49f6060210b57342b0ab066f8f4/Schrift_Dark.png)
+
+### Barrierefreiheit
+![Barrierefreiheit](uploads/1c9ff047b6d7b84de6ebaf52798f723e/Barrierefreiheit.png)
+
+## Typografie
+
+#### Header
+![Header_font](uploads/466b1ead47652e312a48ae0b6954a6be/Header_font.png)
+#### Body
+![Body_font](uploads/c864c7c0b8c3a3db2beb620ca44dbf1b/Body_font.png)
+
+## Icons
+Alle Icons entstammen bis auf die unten beschriebenen Ausnahmen aus dem [Material Design](https://material.io/resources/icons/?icon=settings&style=baseline). Dadurch erfolgt ein einheitliches Gestaltungsschema und die Erwartungskonformität nach der Norm ISO 9241-110 wird erfüllt, da die Icons der Zielgruppe weitgehend bekannt sind.
+
+Die beiden Icons "Klatschen" und "Zeichensprache" sind unter Angabe des Autors von [Flaticon](https://www.flaticon.com/) zu verwenden.
+![Icons](uploads/32d0dcce911de73544f34c418fd7054b/Icons.png)
+
+Sign Language (Modifiziert): https://www.flaticon.com/free-icon/sign-language_1467254?term=sign%20language&page=1&position=79&page=1&position=79&related_id=1467254&origin=search 
+
+Clapping Hands: https://www.flaticon.com/free-icon/clapping-hands_103856?term=clapping%20hands&page=1&position=33&page=1&position=33&related_id=103856&origin=search
+
+## Komponenten
+
+###Buttons
+
+####  Extended Floating Action Button (FAB)
+![FAB_ext](uploads/43efe21b039f651c56fa30d26a3dfa5e/FAB_ext.png)
+
+#### Double Button
+![Double_Button](uploads/2b03090c0227f0d8a47bb345029fb4c1/Double_Button.png)
+
+#### FAB
+![FAB](uploads/663421173570be1d124f654902d23537/FAB.png)
+
+#### Toggle/Switches
+![Toggles_Switches](uploads/fc7c0f4ba218b32a09936bbecedf77a9/Toggles_Switches.png)
+
+### Anwendung
+
+![Button_Anwendung](uploads/db49513b77e973987858d7f99591148f/Button_Anwendung.png)
+
+![Button_Anwendung1](uploads/e1cf9bf2284a6caac7cc50d0fc8e4813/Button_Anwendung1.png)
+
+![Button_Anwendung2](uploads/af6b3f65c164a007080e344b37ba7463/Button_Anwendung2.png)
+
+### Moderator Bühne
+
+![Moderatorbühne](uploads/301c39768d5a61d17d1ad9b354324cd6/Moderatorbühne.png)
+
+### Textfelder
+
+![Textfields](uploads/8b39dd17c3c3cbb7b5f1a08b65dbb521/Textfields.png)
+
+### Dialog
+
+![Dialog](uploads/fe29afed8734f20a718ec71a1929472d/Dialog.png)
+
+### Listen
+
+![Listenelement](uploads/6e9d0898b447c051055663cd7dea6e04/Listenelement.png)
+![Listen](uploads/2e6aa27a4dee2e3b1ffae4222bfbd0b3/Listen.png)
+
+### Snackbar/Info
+
+![Snackbar_Info](uploads/922404364929b67a58f49d6e62fcaca8/Snackbar_Info.png)
+
+### Notification
+
+![Benachrichtigung](uploads/19a58a4e003651e8feeafa4f35755eba/Benachrichtigung.png)
+
+### Tabs
+
+![Tabs](uploads/ed2d3d755aefc1d02a7604b3fd0b2df9/Tabs.png)
+
+### Empty States
+
+![Empty_States](uploads/3b0c6e24a577c9104c5cc4aa591b82c3/Empty_States.png)
+
+### Layoutbereiche
+
+![Layoutbereiche](uploads/7b4b18cfe1400143cf4c28f07aeb158c/Layoutbereiche.png)
+
+### Onboarding
+
+![Screenshot_2021-01-31_233205](uploads/a652598a27da86462914483d3ecbd0d9/Screenshot_2021-01-31_233205.png)
\ No newline at end of file