Skip to content

Changes

Page history
Update Accelerator Redesign_2021 authored by Elma Bajraktari's avatar Elma Bajraktari
Show whitespace changes
Inline Side-by-side
Accelerator-Redesign_2021.md
View page @ c783b8e0
...@@ -14,21 +14,33 @@ Im aktuellen Stand wurden folgende Aspekte abgeschlossen: ...@@ -14,21 +14,33 @@ Im aktuellen Stand wurden folgende Aspekte abgeschlossen:
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 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.
_Material Design_ **_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 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 Icons_ **_Material Design Icons_**
Die neuen Icons sind Material Design Icons und stammen aus folgenden beiden Seiten: Die neuen Icons sind Material Design Icons und stammen aus folgenden beiden Seiten:
- [Google Fonts](https://fonts.google.com/icons) - [Google Fonts](https://fonts.google.com/icons)
- [Material Design Icons](https://materialdesignicons.com/) - [Material Design Icons](https://materialdesignicons.com/)
_Typographie_ **_Material Design Dialogs_**
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:
Dialog "Direct connect!"
![image](uploads/e5b352faad40551b49f6cdd99c673e4b/image.png)
Dialog "Leave Room?"
![image](uploads/8c3fe15ad35182902f93b4c738a449b2/image.png)
**_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.
_Farbschema_ **_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 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:
...@@ -46,7 +58,7 @@ Die einzelnen Farben aus der Farbpalette wurden für bestimmte Icons und Felder ...@@ -46,7 +58,7 @@ Die einzelnen Farben aus der Farbpalette wurden für bestimmte Icons und Felder
| #0C5C83 ![image](uploads/62569c062117fb9dde805102fff11327/image.png) | Anklickbare Icons und Buttons | | #0C5C83 ![image](uploads/62569c062117fb9dde805102fff11327/image.png) | Anklickbare Icons und Buttons |
| #053464 ![image](uploads/27f358f20809e69dc68e15f1ee9f2926/image.png) | Buttons von der Farbe #0C5C83, die angeklickt wurden | | #053464 ![image](uploads/27f358f20809e69dc68e15f1ee9f2926/image.png) | Buttons von der Farbe #0C5C83, die angeklickt wurden |
_Barrierefreiheit_ **_Barrierefreiheit_**
Die Barrierefreiheit wurde anhand des Barrierefreiheitsinspektor des Browsers Firefox überprüft. Für die Verwendung wurde zuerst unter den DevTools der Barrierefreiheitsinspektor eingeschaltet. Anhand vom Barrierefreiheitsinspektor konnten die einzelnen Elemente auf der Webseite ausgewählt werden und auf Barrierefreiheit geprüft werden. Die Barrierefreiheit wurde anhand des Barrierefreiheitsinspektor des Browsers Firefox überprüft. Für die Verwendung wurde zuerst unter den DevTools der Barrierefreiheitsinspektor eingeschaltet. Anhand vom Barrierefreiheitsinspektor konnten die einzelnen Elemente auf der Webseite ausgewählt werden und auf Barrierefreiheit geprüft werden.
Im folgenden GIF wird dieser Prozess beispielhaft an einigen Elementen dargestellt: Im folgenden GIF wird dieser Prozess beispielhaft an einigen Elementen dargestellt:
...@@ -55,7 +67,7 @@ Im folgenden GIF wird dieser Prozess beispielhaft an einigen Elementen dargestel ...@@ -55,7 +67,7 @@ Im folgenden GIF wird dieser Prozess beispielhaft an einigen Elementen dargestel
In diesem Beispiel wird bei den Elementen die Konformitätsstufe AAA angezeigt, welches eine sehr gute Zugänglichkeit der Webseite belegt. In diesem Beispiel wird bei den Elementen die Konformitätsstufe AAA angezeigt, welches eine sehr gute Zugänglichkeit der Webseite belegt.
_Ergebnisse der Umsetzung_ **_Ergebnisse der Umsetzung_**
Im Folgenden werden die Umsetzungsergebnisse des Projektes anhand von Gifs demonstriert. Im Folgenden werden die Umsetzungsergebnisse des Projektes anhand von Gifs demonstriert.
......