In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
Eine Website, die die Schriftart Roboto vorstellt.
In dieser Übung haben Maxi und ich die verschiedenen Module der Website Drops in die verschiedenen Kategorien (Navigation, Call-to-Action, Text- und Bildelemente, Filter-Elemente, Formular-Elemente, Animations-Elemente und Teaser-Elemente) eingeteilt.
Anschließend haben wir zugeordnet, welche der wichtigen Kriterien für Interaktionsdesign in den einzelnen Modulen vorkommen.
Als Zielgruppe legten wir uns auf jüngere Personen fest, die eine Sprache lernen wollen. Die Website ist modern gestaltet, mit vielen Illustrationen, Animationen und einem starken Kontrast zwischen gelb und violett.
Bei der Übung Raster ableiten, haben Maxi und ich uns für die Website DROPS entschieden und sind zu dem Schluss gekommen, dass es sich um ein 12-Spalten Raster handelt.
Ich habe für die Modulableitung die Webseiten
https://fonts.ninja/font/Blaze-Type-Khalos-Display-558854
https://forum-typografie.de/schriftwechsel/nn-konrad/
https://f37foundry.com/fonts/f37-bergman
herausgesucht.
Schlussendlich habe ich mich für F37 foundry entschieden. Es war nicht möglich, ein normales Raster herauszufinden, weshalb ich die Elemente in ein 12-Spalten-Raster eingepasst habe, um die Module später besser verwenden zu können.
Maxi hat die Website fontwerk (https://fontwerk.com/de/fonts/nice-collection)) abgeleitet, zusammen hatten wir dann folgende Module:
https://www.figma.com/design/ixoP7rV4A0zKfx6mMiLADH/Untitled?node-id=73-505&t=63JZm8DqgqOcgJza-1
Wir haben mit der ausgedruckten Version der Module verschiedene Anordnungen ausprobiert und angepasst und diese anschließend in figma nachgebaut.
Nach den ersten drei Varianten ist uns aufgefallen, dass wir keine Textfelder in unseren Modulen haben, und haben diese in Version 4 hinzugefügt.
https://www.figma.com/design/ixoP7rV4A0zKfx6mMiLADH/Untitled?node-id=123-2
aus den Modulen habe ich dann eine Website gebaut, die der vorgegebenen Gliederung entspricht.
Meine Anordnung der Module nach der Gliederung.
https://www.figma.com/design/ixoP7rV4A0zKfx6mMiLADH/Untitled?node-id=150-3372
Beim Gestalten der ersten drei Sections meiner Website nach den unterschiedlichen Mooboards sind mir folgende Dinge aufgefallen.
- die linke Variante gefällt mir ganz gut, allerdings weiß ich noch nicht, ob es nicht zu langweilig wird, und wie ich die gelben Akzente setzen soll.
- bei der mittleren Variante kann ich mir gut vorstellen, dass interessante Animationen und andere Eye-Catcher möglich sind, allerdings wirkt es mir so noch zu aufgeräumt.
- die rechte Variante, die vor allem aus Linien bestehen soll, ist schwierig umzusetzen, da die Linien sehr dünn und dadurch schwierig zu erkennen sind. Außerdem bin ich hier noch nicht zufrieden mit der Farbkombination.
Ich habe das erste Moodboard gewählt und mein Mockup weiter erstellt. Die ersten drei Sections habe ich nochmal überarbeitet, sodass es besser zum Moodboard passt und spannender aussieht.
Ich habe die Linien-Idee durch Auflockerung anhand von großer Typographie ersetzt und mein Mockup bis zum Kapitel Geschichte erstellt. In den Textfeldern steht jetzt sinnvoller Inhalt und ich habe bereits einige Ideen für Animationen.
Das Glyphenraster muss ich noch einmal überarbeiten und in mehrere Teile unterteilen, wahrscheinlich als Dropdown Elemente.
Bis zur Zwischenpräsentation habe ich verschiedene Dinge überarbeitet und noch fehlende Inhalte eingefügt.
Das Element zum Einblick in die verschiedenen Schriftschnitte ist jetzt keine Interaktion mehr, sondern wird eine Animation, die automatisch zwischen den verschiedenen Schnitten wechselt.
Die zentrierten Texte sind jetzt linksbündig.
Das Glyphenraster habe ich in mehrere Dropdowns unterteilt und die Rahmenlinien habe ich gelöscht.
Bis zur Abschlusspräsentation habe ich vor allem Animationen und Interaktionen, sowie die noch fehlenden Inhalte der Gliederung eingebaut und die Abstände versucht anzupassen.
Außerdem ist die Interaktion zu den Merkmalen rausgefallen.
Alle Textfelder sind am linken Rand linksbündig angeordnet.
Ich habe einen Darkmode/invertierten Modus eingefügt und eine Handyversion erstellt.
Das Type-Tester Modul ist jetzt funktionstüchtig und nochmal in der Anordnung angepasst.
Das Menü habe ich überarbeitet, sodass die Schrift noch größer ist.
Beim Portrait des Designers hatte ich Schwierigkeiten, es an die Website anzupassen, nach einigen Versuchen habe ich dann jedoch eine Version erstellt, die gut gepasst hat.
Zudem habe ich ein Logo erstellt.
Bei den Merkmalen habe ich mich dazu entschlossen, die Felder so klein zu lassen und dafür ein Overlay einzubauen, mit dem man sie auch in groß anschauen kann.
Nach der Abschlusspräsentation habe ich noch mein Logo und die Handyversion überarbeitet.
Prototyp:
Prototyp Handyversion: