Recherche Websites

Website 1: https://belangerfaucets.com/en

Die Website von Bélanger hat sehr schöne Scrollanimationen, sowohl horizontal, als auch vertikal. Sie ist schön illustriert mit Fotos und Zeichnungen, Texten, Überschriften und Pastellfarben. Meiner Meinung nach illustriert sie das Produkt des Wasserhahnes sehr schön und informativ.

Website 2: https://sites.research.google/languages/

Diese Google-Website über Sprachinklusion lässt sich gänzlich durch Scrollen steuern. Dabei ist sie ausgestattet mit einer Vielzahl an Animationen, welche sowohl Fotos, als auch Informationen und Grafiken übersichtlich, interessant und spannend darstellen. 

Website 3: https://laserbysonymusic.com

Diese Website setzt auf moderne typografische Gestaltung, interaktive Grafiken und Schwarz-Weiß-Fotografien. Eine Besonderheit der Website ist es, dass man sich durch Scrollen horizontal durch die Seite und ihre Informationen bewegen kann.

Personensuche

Person 1: Helga Zöphel

Helga ist meine Oma und kommt für mich in die Auswahl der Alltagsheld*innen. Sie ist 76 Jahre alt, hat früher ein eigenes Modegeschäft geleitet und ist ein ordentlicher, aufgeschlossener und teils etwas sturer Mensch. Ich denke, dass ihr diese Sturheit sicher auch dabei geholfen hat, warum sie für meine Aufgabe in Frage kommen würde. Helga hat mit ihren beiden Geschwistern zusammen über viele Jahre deren Mutter gepflegt und ihre gesamte Freizeit dafür aufgebracht. Ihre Mutter war bettlägerig und konnte sich die letzten Jahre gar nicht mehr um sich selbst kümmern. Statt sie aber in ein Pflegeheim zu geben, haben dich ihre Kinder dafür entschieden sie in ihrer Wohnung gemeinsam mit einem Pflegedienst voll zu verpflegen. Alle drei Kinder haben täglich ihre Mutter besucht und ihr bei allen Lebensaufgaben geholfen, obwohl sie aufgrund ihrer ganzen Situation oft grantig und unfair ihrer Kinder gegenüber sich verhalten hat. Teilweise wurden sie von ihr angeschrien und wegen kleinster Dinge beschuldigt. Trotzdem haben sie bis zum Ende weiterhin ihre Mutter gepflegt mit großer Liebe und Fürsorglichkeit.

Persin 2: Katja Gerber

Katja ist meine Mutter und käme aufgrund ihres Berufes auch in die Auswahl für mein Projekt. Sie ist gelernte Kinderkrankenschwester, hat jedoch nach ihrer Ausbildung nicht auf der Kinderstation arbeiten können, da diese voll besetzt waren. Deshalb arbeitet sie seither auf der Neurologie, einer Halbintensiv-Station. Um noch besser qualifiziert im Bereich der Neurologie zu sein, hat sie vor ca. 10 Jahren eine mehrwöchige Weiterbildung zur Strake-Nurse gemacht. Trotz dessen, dass es eigentlich ihr Wunsch war, auf der Kinderstation zu arbeiten, ist sie auf ihrer jetzigen Station geblieben und damit auch zufrieden. Eine Herausforderung ihres Berufes sind die Menschen, die aufgrund eines Schlaganfalls oder einer Hirnblutung sich nicht zurecht finden, nicht wissen wo sie sind und sich teilweise auch gegen jegliche medizinische Maßnahmen wehren. Auch ist die steigende Respektlosigkeit eine zunehmende Herausforderung.

Person 3: Maria Gerber (siehe unten)

Maria Gerber ist die Person, für die ich mich letztendlich entscheiden habe.

Hilfsbereite Floristin Maria

Ordnungssysteme

Moodboard

Struktur

Bildschirmfoto 2025-02-04 um 20.31.08.png

Erste Entwürfe

Bildschirmfoto 2024-11-27 um 09.48.30.png

Weiterentwicklung

Weiterarbeit mit Entwurf 1 und 3

Entwurf 1: https://www.figma.com/proto/ZYSV9EjtYSIpLWl0EYtX1y/Storytelling?page-id=0%3A1&node-id=41-136&viewport=69%2C-163%2C0.05&t=eFA3rN3m1mbVFKMa-1&scaling=scale-down-width&content-scaling=fixed&starting-point-node-id=41%3A136

Entwurf 3: https://www.figma.com/proto/ZYSV9EjtYSIpLWl0EYtX1y/Storytelling?page-id=0%3A1&node-id=65-14&viewport=69%2C-163%2C0.05&t=eFA3rN3m1mbVFKMa-1&scaling=scale-down-width&content-scaling=fixed&starting-point-node-id=58%3A377

Bildschirmfoto 2025-02-04 um 20.37.50.png
Bildschirmfoto 2024-12-18 um 10.40.36.png

Veränderungen: 

-von einer Seite auf einzelne Unterseiten (Hauptaugenmerk Navigation über die Blütenblätter)

-von verspielter Schrift zu gerader Grotesk

Bildschirmfoto 2024-12-18 um 10.40.58.png

Zwischenpräsentation

Präsentation: https://www.figma.com/proto/ZYSV9EjtYSIpLWl0EYtX1y/Storytelling?page-id=265%3A110&node-id=265-111&p=f&viewport=323%2C408%2C0.27&t=dgyBjK8rHF45IiOi-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=265%3A111

Stand: https://www.figma.com/proto/ZYSV9EjtYSIpLWl0EYtX1y/Storytelling?page-id=160%3A494&node-id=160-495&p=f&viewport=1177%2C-328%2C0.08&t=3U0GryqLHlRj4og7-1&scaling=scale-down-width&content-scaling=fixed&starting-point-node-id=160%3A495

Endpräsentation

https://www.figma.com/proto/ZYSV9EjtYSIpLWl0EYtX1y/Storytelling?page-id=&node-id=476-386&viewport=83%2C163%2C0.04&t=577pTEYN6OdbN3Wa-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=476%3A386&show-proto-sidebar=1

Figma Änderungen und finaler Stand

Um den Unterseiten meiner Website einen einheitlicheren Look zu geben und das ganze generell etwas ordentlicher zu gestalten, habe ich noch einige Änderungen vorgenommen. Ich habe die Schrift des Fließtext, durch eine etwas engere, geradere Schrift getauscht und alle Bilder einheitlich in der jeweiligen Farbe des Frames bearbeitet, sodass man das Originalbild per Hover sehen kann.

Bildschirmfoto 2025-02-04 um 20.21.19.png

Figma final:

File Link: https://www.figma.com/design/ZYSV9EjtYSIpLWl0EYtX1y/Storytelling?node-id=503-2272&t=mFomSwcccVpk1Ya7-1

Prototype Link: https://www.figma.com/proto/ZYSV9EjtYSIpLWl0EYtX1y/Storytelling?page-id=&node-id=503-2273&p=f&viewport=130%2C216%2C0.06&t=5FaYLQYHxJpSMfEO-1&scaling=scale-down-width&content-scaling=fixed&starting-point-node-id=503%3A2273

Webflow Final

Preview: https://preview.webflow.com/preview/maria---storytelling-kd3?utm_medium=preview_link&utm_source=designer&utm_content=maria---storytelling-kd3&preview=ecdaa9393022393d57a6a8f07449b709&workflow=preview

Published: https://maria---storytelling-kd3.webflow.io 

Breakpoint: 1678px

Styleguide

Styleguide.jpg

Präsentationsvideo