Arimo Microsite

darf ich vorstellen? - Arimo (03. April 25)

PDF

Workshop Interaktion - Module im Web

Niklas und ich haben die Module der Website Raycast.com analysiert.

Website-Raster analysieren

Niklas und ich haben Module der Websites GT Ultra, GT America (Max) und GT Pressura (Niklas) analysiert und später abgeleitet, um diese als Wireframe-Kit für unsere eigenen Websites zu verwenden.

Eigenes Wireframe-Kit ableiten (03. April 25)

Rhythmus-Übungen (10. April 25)

Varianten der Modulanordnungen

Die ersten drei Varianten sind die Reinzeichnungen der Rhythmusübungen auf Papier. In der vierten Variante habe ich nun die inhaltliche Gliederung der Typowebsite berücksichtigt.

Moodboards (24. April 2025)

Design der ersten 3 Sections (24. April 2025)

Weiterentwicklung der Sections (08. Mai 2025)

In der letzten Besprechung hatte ich noch überlegt zwei Ansätze - den dunklen und den bunten Stil - weiter auszuarbeiten, da ich bis dahin keinen der beiden verwerfen wollte.

Nachdem ich die beiden Moodboards noch einmal intensiver untersucht habe, habe ich mich nun doch klar für den dunklen Look entschieden, da ich darin viel mehr Elemente gefunden habe, mit denen ich arbeiten kann: Glasmorphisms/-texturen, Blurs, feine Illustrationen, sichtbare Container und evtl. später 3D Glaselemente

Außerdem habe ich nach Farben gesucht, die den schwarz-weiß Look aufbrechen könnten. Zuerst habe ich überlegt, Rot-/Gelb- und Dunkelblau-/Türkistöne als Farben zu verwenden, welche sozusagen durch Glasprismen entstehen. Allerdings bin ich mir noch nicht sicher, wie und wo ich diese Farben unterbringen könnte. Als einstweilige Alternative habe ich mich für ein leuchtendes Gelb entschieden, das stark hervorstechen aber nicht zu aufdringlich wirken soll. Eher will ich damit das Zitat „innovative and refreshing“ unterstützen.

Bildschirmfoto 2025-05-08 um 03.04.02.png

Überarbeitung der Elemente (14. Mai 2025)

Diese Woche habe ich, basierend auf dem letzten Feedback, die Elemente meiner Website in einen einheitlichen, wiederkehrenden Stil bzw. Rhythmus reduziert.

Das UI besteht aus Containern mit abgerundeten Ecken, entweder mit Outlines oder in Glassmorphism-Optik. Als Akzentfarbe verwende ich ein leuchtend-frisches Neongelb. Ich habe einige Elemente in diesen Stil überführt und neue erstellt. Unter anderem neu dazu gekommen ist das Glyphenraster.

Außerdem habe ich mich dafür entschieden, dass die Website futuristisch und clean aussehen, sich in den Interaktionen hingegen organisch und lebendig anfühlen soll. So bestehen anfangs Elemente, die von Glaspanels verdeckt sind (Irritationen) und durch Interaktion aufgelöst werden. Das Auflösen sollte dabei möglichst organisch und lebendig wirken. Ich würde damit gerne eine ähnlich interaktive Umgebung schaffen, wie im Spiel/Film Avatar (https://www.tiktok.com/@ragereviewyt/video/7312547223731195142))

Experimente zu Interaktionsmöglichkeiten (28. Mai 2025)

Damit der Glas-Effekt zur Geltung kommt, sollen sich die sich überlagernden Elemente bei Interaktion verschieben. Entsprechend habe ich viel experimentiert und verschiedene Interaktionsmöglichkeiten in Figma ausprobiert.

Leider gibt es keine on-scroll Funktion in Figma und Parallaxen lassen sich nur on-drag erstellen. Allerdings ist dabei der Glas-Effekt verbuggt. Gleichzeitig haben die restlichen experimentellen Interaktionen Figma technisch und auch die Performance betreffend an die Grenzen gebracht.

Spline (to Figma)

Außerdem habe ich versucht 3D-Interaktionen aus Spline per Anima-Plug-in in Figma einzubinden. Dabei wird der Prototype über Anima als Website gehostet. Das ist allerdings auch eher nur für kleinere Projekte geeignet und nicht sonderlich performant noch elegant.

https://projects.animaapp.com/team/my-team-llhg2wt/project/7kipp9J/screen/spline-header/omniview?platform=figma&traceId=a25ae1925ccf4e248d213a3e3593a6f7-b9e6509b48e04f5a-0&framework=html

Webflow Experiment - Parallaxe (05. Juni 2025)

Anschließend habe ich mir Webflow im Detail versucht anzueignen, um dort on-scroll Interaktionen wie die Parallaxe für den Header umzusetzen. Leider musste ich nachdem die Parallaxe funktioniert hätte feststellen, dass Glaseffekte in Webflow zwar möglich sind, sich allerdings immer nur auf einen Div anstatt auf die tatsächlichen Vektoren der Schrift anwenden lassen. Um das zu schaffen wäre komplexer custom code nötig -> Exkurs Ende.

Restliche Sections erstellen (12. Juni 2025)

Da nun nur noch knappe vier Wochen bis zur Werkschau übrig waren, habe ich mich erst einmal darauf konzentriert eine Optik für die restlichen Sections zu finden - vorerst ohne Inhalte.