1. Workshop Interaktion/Module Web

In einer Dreiergruppe zusammen mit Hannah und Minou haben wir die Website von Atmoslamp ausgewertet. Anhand der Kategorien Vorhersagbarkeit, Konsistenz, Feedback, Raum, Zeit, Bewegung und Aussehen, haben wir unsere die Website untersucht und die Punkte zugeordnet.

2. Übung: Raster-Ableitung

3. Raster und Rhythmus: Raster Ableitung & Rasterzusammenfügung

Ich habe nur eine Website: https://exat.hottype.co/ abgeleitet. Da diese sehr lang war und genügend Module zur Verfügung stellte, habe ich keine zweite Website abgeleitet.

Fertiges Wireframe-Kit (12-Spalten-Raster, 80px Margin und 20px Gutter):

Rhythmusübung: Wireframe-Kit-Erstellung

Hier haben wir zusammen mit Hannah, Minou und Kim unsere abgeleiteten und ausgeschnittenen Website-Module verglichen und versucht, daraus ein möglichst harmonisches Wireframe-Kit zu erstellen. Am Ende sind von uns zwei verschiedene Wireframes entstanden.

4. Meine Typo-Website

Hier habe ich mit meinem Wireframe-Kit für meine Typo-Website, eine Grundstruktur aufgebaut, wie sie am Ende aufgebaut sein könnte. Einen Großteil habe ich auch so übernommen, nur ein paar Designs/ Module habe ich angepasst.

Typo-Website Moodboards

3 Sections:

Styleguide

Aktueller Stand 21.05.2025

https://www.figma.com/proto/Lwm2l6Yq4Ka2CXJPkkCxfK/3-Sections-Typo-Website?page-id=0%3A1&node-id=1-2&viewport=-1944%2C-1316%2C0.33&t=IwQAmzvifWrD1Tb2-1&scaling=min-zoom&content-scaling=fixed

Reinzeichnung

Plakate für die Werkschau

Verbesserungen:

Links: alte Version   Rechts: neue Version

Animationen

Für meine Animationen  habe ich Storyboards erstellt, da sie inhaltlich etwas komplex sind. So konnte ich besser planen, wie ich das Projekt angehe und umsetze – sowohl inhaltlich als auch technisch. Dabei habe ich überlegt, mit welchen Tools ich am besten arbeiten sollte für die Animationen. Am Ende habe ich sowohl Figma als auch After Effects verwendet.

Animationen:

1. Riesenrad-Animation:

Meine Riesenrad-Animation, die die verschiedenen Schriftschnitte darstellt, war ursprünglich als Kapselautomaten-Animation geplant. Aufgrund von Zeitmangel konnte ich diese Idee jedoch nicht vollständig umsetzen und habe mich stattdessen für die Riesenrad-Variante entschieden. Umgesetzt habe ich das Ganze auf Figma.

2. Glyphen-Animation:

Meine aufwendige Glyphenanimation habe ich in After Effects & Figma umgesetzt.

3. Hammer-Animation:

Um auf kreative Weise zu zeigen, wie oft Playfair Display bereits eingesetzt wurde, habe ich eine Hammer-Animation entworfen – umgesetzt in Figma.

Playfair Display Merkmale Animation:

Um die verschiedenen typografischen Merkmale der Schriftart darzustellen, habe ich mit Spielkarten gearbeitet und eine Animation erstellt, die anhand von sechs Buchstaben verschiedene Eigenschaften durch Bewegung zeigt.

Bei der Umsetzung gab es einige Schwierigkeiten:

Ein Problem besteht darin, dass mein Pfeil, der die Animation abspielt, einen Hover-State besitzt. Wenn man klickt, um die Animation zu starten, und direkt wieder darüber hovert verschwindet der Pfeil für ein paar Sekunden. Ich habe einiges probiert und geschaut wo der Fehler liegen könnte, habe das Problem nicht lösen können.

Außerdem beschleunigt sich die Animation merkwürdigerweise, wenn man über dem Pfeil hin- und herhovert, obwohl ich dafür keinen Prototyping-Trigger angelegt habe.

Ein weiteres Problem betrifft die Skalierung: In der 100 %-Ansicht läuft die Animation normal. Sobald man aber auf „Fit Width“ wechselt, beginnt sie zu verwackel, obwohl auf den einzelnen Frames 100% nichts verschoben wurde.

5. Dart-Animation:

Screencast

Figma-Link Prototyp

https://www.figma.com/proto/CJ3RWM9DKGf89qD6dcRwuJ/Typo-Website?page-id=0%3A1&node-id=61-19&viewport=-1071%2C-1832%2C0.12&t=KSziw5qTXjERMchH-1&scaling=scale-down-width&content-scaling=fixed&starting-point-node-id=61%3A19