Referat

1. Workshop Interaktion/Module Web

In dem Workshop zu Interaktionen und Module im Web haben wir uns in Gruppen verschiedenste Webseiten angeschaut. Hierfür haben Melissa und ich die Webseite von Ikea zur Hand genommen und anhand der Kategorien Vorhersagbarkeit, Konsistenz, Feedback, Raum, Zeit, Bewegung und Aussehen untersucht und gegliedert. Diese Kategorien sind grundlegende Facetten des Interaktionsdesign.

2. Website-Raster

Analyse Webseite (allgemein):

Für die Analyse der Raster von Webseiten haben wir 2 verschiedene Webseiten rausgesucht und diese versucht in ein einheitliches Raster zu bringen.

erste Webseite: Booking.com

zweite Webseite: Städel-Museum

3. Raster und Rhythmus

3.1 Raster Ableitung

Um erste Ideen und Module für unsere eigenen Webseiten zu finden, haben wir uns Typografie Webseiten angeschaut, Raster erstellt und Module abgeleitet. Diesen Vorgang haben wir mit mehreren Webseiten wiederholt bis wir eine breite Auswahl an Optionen hatten.

Webseite: https://vj-type.com/

ergänzt durch: https://www.dardenstudio.com/

3.2 Rasterzusammenfügung

Anschließend haben wir diese Module in ein einheitliches Raster zusammengefügt. Daraus haben wir durch die Raster und Rhythmusübung verschiedene Varianten erstellt und uns auf 2 fertige geeinigt. Diese haben wir dann in Figma übertragen.

3.3 Varianten (Raster/Rhythmusübung)

3.4 Reinzeichnung

Für meine Typografie Webseite habe ich mich dann für eine der beiden entschieden. Meine Wahl fiel auf die rechte Variante, da ich mir dort meine Schriftart gut vorstellen konnte.

4. Typo-Website

4.1 Moodboards

Um einen Eindruck über stilistische Merkmale sowie Farben zu bekommen, haben wir Moodboards erstellt. Diese sollten möglichst trennungsscharf sein. Daher habe ich mich dafür entschieden statt drei noch ein paar mehr zu machen. Nach diesem Schritt habe ich dann drei ausgesucht, die ich gut gelungen empfande.

4.2 Entwurf

Während ich die ersten Sections aus den Moodboards erstellte, visualisiert ich daran gleichzeitig meine Gliederung. Dadurch veränderte sich auch ein bisschen mein Rhythmus, da die Module und Gliederungspunkte möglichst gut zusammenpassen sollten.

4.3 Prozess

Zu meinen Moodboards habe ich neben der Gliederung auch angefangen die Sections in Figma zu übertragen. Dabei habe ich versucht, sie spannend zu gestalten und aus jedem einen eigenen Stil zu entwickeln.

Anschließend habe ich dann an zwei verschiedenen Moodboards weitergearbeitet um herauszufinden welche ich weiterführen will. Dafür hab mich mich für das schwarz/bunte und das beige-farbige entschieden

Danach habe ich mich dann endgültig für das Schwarze entschieden und habe dann damit weitergearbeitet.

In den Wochen vor der Zwischenpräsentation habe ich dann versucht Stil und Module zu verbinden. Mit meinem Fortschritt war ich auch sehr zufrieden, außer bei dem Punkt der Animationen. Öfter haben Animationen und mein stilistische Auswahl nicht übereingestimmt.

Der Stand während der Zwischenpräsentation war um einiges weiter als davor. Die Modulanordnung stand, ein Logo war schon erstellt und der Rhythmus hat gepasst. In den nächsten Schritten mussten dann noch Prototyping und Animationen angepasst werden.

4.4 Animationen

4.5 Reinzeichnung

5. Designsystem/Styleguide

5.1 Styleguide

5.2 Poster

Für die Werkschau Sommersemester 2025 haben wir für unseren Stand noch Poster entworfen. Diese passten visuell zu unseren Webseiten und enthielten ein paar Informationen zur Schrift.

6. Screencast

7. Figma-Link Prototyp

7.1 Laptop-Version

7.2 Handy Version