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:

https://www.figma.com/proto/NBznL2XKMVFcMIrhdyEuC0/Papa?page-id=209%3A2061&node-id=403-1163&p=f&viewport=4813%2C-3745%2C0.5&t=gV1fFoexoCCfif1X-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=403%3A1163

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)

Präsentationsvideo