MEAK_Dokumentation_Timo_Albrecht

AUFBAU
Typografie
Wie bereits erwähnt wird für MEAK die Lato verwendet. Auf der Webseite werden die Headlines
in Versalien geschrieben, da sie so besser lesbar sind und sich optisch besser abheben.
Aufbau der Webseite
Wie in den Wireframes bereits erwähnt, befindet sich die Navigation ganz oben im Headerbereich.
Das Logo ist auf der Webseite immer oben links platziert. Die Navigation ändert sich
nach der Anmeldung des Nutzers. Ohne Anmeldung kann ein potenzieller Nutzer nicht alle
Navigationspunkte sehen wie den Homescreen und die Kategorien (Lernstoff). Es gibt keine
Dropdownstruktur, da die Liste der Kategorien sonst zu lang werden würde.
Grafische Elemente
MEAK ist auf geometrischen Elementen aufgebaut. Die Grundformen sind dabei Rechtecke
und Quadrate worauf die ganze Webseitengestaltung basiert. Als Akzentelemente dienten
dazu der Kreis, der sich in verschiedenen Grafiken, z. B. bei den Kategorien, bei den Übungen
und bei der Fortschrittskala oder im Countdown wieder findet. Zur bessere Visualisierung und
Abgrenzung werden außerdem Linien verwendet.
Ohne Nutzerkonto
Mit Nutzerkonto
Die Navigation hat einen Mouseovereffekt. Fährt der Nutzer mit den Mauscursor über den
Navigationspunkt wird der Navigationsbereich in einem anderen Farbton eingeblendet.
30
Der Footerbereich ist der Abschlussbereich. Hier ist außer dem Impressum, dem Kontakt und
dem Datenschutz nichts weiter zu finden.
Raster
Das Raster, worauf die ganze Gestaltung basiert, ist auf einer Kästchenteilung aufgebaut. Die
Kästchen variieren bei der Webseite und der App. In der Webseite wurde eine 16x16 Teilung
der Kästchen angelegt. Somit gibt es eine große Fläche über die ganze Breite und Höhe der Gestaltung.
In der App wurde dagegen eine 25x25 Teilung gewählt. Da die Fläche im Gegensatz zur
Webseite kleiner ist, muss die Größe der Kästchen dementsprechend angepasst werden.
Der gesamte Webauftritt ist so angelegt, dass er responsive funktioniert. Dabei ist es wichtig,
dass die Funktionen und Inhalte sowohl am Computer als auch am Tablet funktionieren. Die
Inhalte haben dabei immer einen genau definierten Abstand zum Rand. Sowohl der Header als
auch der Footer überstreckt sich über die gesamte Breite des Gerätes.
Raster der Webseite
Raster der App
30
31