Website Recherche
https://legends-six.vercel.app/
Die Website dreht sich um Fußball und wie dieser Sport Menschen verbindet. Dabei werden aus verschiedenen Ländern und Mannschaften die Geschichten von Fusballlegenden/Besonderen Ereignissen aufgezeigt.
- verschiedene Hover und Scroll-Animationen
- Bildergalerie als Art Diashow
- Zeitstrahl mit Bilder Cover-Animation
https://www.mathieu-crepel.com/
Diese Website dreht sich um einen Snowboarder/Surfer, welcher sich für die Umwelt einsetzt. Die Website Zeigt verschiedene Sportliche Erfolge und Umweltschutzaktionen.
- andere Position der Navigationsbar
- Scrolling-Animationen
- interessante Aufteilung von den Projekten
- Übergangsanimationen
- große/viele Bilder/Clips
https://yauch.oscilloscope.net/panorama/main_01
Diese Website zeigt auf interaktiven Weg den Aufbau des legendären Oszilloskopstudios der Beastie Boys. Es ist eine Art digitale Zeitkapsel, welche Filme Erinnerungstücke und Geschichten enthält.
- Startanimation
- 360˚ Rundgang (interaktiv)
- Ton bei Mausclick
- Ladeanimationen
Auswahl an Alltagshelden
Wolfgang Stefan
Lorenz & Claus Phillip Stefan
David Jakob
Kai Buschmeyer
Pflegekraft im Altenheim, spezieller Pliativbegleiter
Recherche Teil 1 - Wolfgang Stefan
Ansätze zur Strukturierung
Brainstorming
Heir sind Ansätze für die Strukturierung und Aufbau der Website
https://www.figma.com/design/NBznL2XKMVFcMIrhdyEuC0/Papa?node-id=13-2&t=ukmpFtUHHr5L1jnp-1
Moodboards
Aufbau Entwürfe
Erste Ansätze Aufbau
https://www.figma.com/design/NBznL2XKMVFcMIrhdyEuC0/Papa?node-id=13-2&t=ukmpFtUHHr5L1jnp-1
Weiterentwicklung
https://www.figma.com/design/NBznL2XKMVFcMIrhdyEuC0/Papa?node-id=13-2&t=ukmpFtUHHr5L1jnp-1
Pages:
-> Kreis, Timeline
Umdenken - Finales Design Anfang
Weg von der Idee des Diagramms als Navigation.
Für mein Finales Design konzentriere ich mich jetzt vollkommen auf die Weiterentwicklung der „Zeitstrahl-Idee“
Bei der Farbgestaltung habe ich mich gleich am Anfang auf das Grau und Grüntöne meiner vorherigen Gestaltungsexperimente festgelegt.
Weterentwicklung des Finalen Designs
alle Entwicklungen des „Zeitstrahls“ sieht man unter folgendem Link:
https://www.figma.com/design/NBznL2XKMVFcMIrhdyEuC0/Papa?node-id=209-2061&t=N5aI2iuJCV4QlMcG-1
In der Page: Timeline
Der obige Aufbau ist Grundlage für alle weiteren Entwicklungen. Jedoch bin ich schell zu dem Entschluss gekommen, dass dieser Aufbau langweilig wirkt durch die vier aufeinanderfolgenden Element welche gleich aufgebaut sind (Kindheit & Jugend, Wehrdienst, Studium & Lehrtätigkeit)
Daher habe ich als nächstes versucht mein Design aufzubrechen:
Bei dieser Variante habe ich eine Navigation eingebaut, welche der Frosch in der oberen rechten Ecke ist. Klickt man auf diesen öffnet sich ein Burger-Menü.
Styleguide
Finales Design
Bei meinen Finales Design sind die Letzten zwei Section hinzugekommen, die Navigation hat sich verändert zu einer Nav-Bar und der Ortstrahl ist dezenter geworden. Und eine Animation welche durch klicken mehr Infos/Gedanken zu dem Material Stein gibt. Zu dem habe ich den einzelnen Elementen mehr Raumgegeben/ den Abstand zwischen den Sections vergrößert.
Link zum Prototypen:
Der Prototyp des Finalen designs hat den Flow FinalesDesign
Screencast
Leider lädt die Section Philosophie nicht immer gleich.
Webflow
Herausforderungen zu Begin
- Horizontale Scroll-Elemente mit Startanimation
- Bildelemente, die animiert und scrollbar sind
- Diagramm, das klickbar ist
- Philosophie-Abschnitt mit Overlays
Umsetzung
- der horizontale Scroll funktioniert ohne Startanimation
- Bildelemente, die zum Aufbrechen des Designs dienen, sind nicht scrollbar, haben aber eine durchlaufende Animation, durch die man alle Bilder sehen kann
- Das Diagramm wurde zu einem Sliderelement, welches man durchklicken kann, um die einzelnen Diagramme zu sehen.
- Beim Philosophie-Abschnitt konnte ich leider kein Overall erstellen, daher besitzt dieser Teil nur einen Hover-Effekt, bei dem die Texte vergrößert werden, um sie besser lesen zu können
Screencast
Link zur veröffentlichten Website:
https://alltagsheldenstorytelling-ws24-25-stefa.webflow.io/
optimales Ergebnis in Chrome Vollbild auf Macbook Pro 16zoll
Link Webflow:
https://alltagsheldenstorytelling-ws24-25-stefa.design.webflow.com/?workflow=canvas
optimal 1728 px (Macbook Pro Browser im Vollbildmodus)
