1. Grundideen








2. Kurzbeschreibung Projekt
Wer kontrolliert den Diskurs in sozialen Medien? Im Vorfeld von Wahlen stellt sich die Frage, welchen Einfluss Bots und andere Formen auto-matisierter Kommunikation auf das Meinungsbildung haben. Das Projekt »Desinfo« macht die komplexe Problematik, von bewusst verbreiteten Falschinformationen erlebbar. Die interaktive Website lässt User*innen eintauchen, in die Welt der Deepfakes, Lügen und falscher Berichter-stattung. Zusätzlich werden historische Hintergründe chronologisch visualisiert. Das Anliegen ist es, für die Gefahren und Auswirkungen von Desinformationen zu sensibilisieren, sowie die Medienkompetenz im Erkennen von Fakes zu stärken.
3. Ausgangssituation, Problem, Lösung
Problem:
Gezielt gestreute Desinformationen, Feindbilder und Narrative manipulieren demokratische Prozesse und polarisieren die Gesellschaft. Mit dieser Bedrohung sind wir heute mehr denn je konfrontiert.
Lösung:
Eine experimentelle Webstorry zur interaktiven Aufklärung, Sensibilisierung der Thematik »Desinformation« und zum Fördern der korrekten Berichterstattung.
4. Recherche, Inhalte, Daten & Quellen






5. Storyline, Spannungsbogen, Mindmap






















6. Moodboard








7. Skizzen, erste Layouts, erste Prototypen








8. Designvarianten










9. finales Design

10. Prototyp
11. Testing
Während des Seminars hatte ich immer die Möglichkeit, mich mit Kommilitoninnen über die Struktur uns Usability der Website auszutauschen und deren Kommentare und Feedback in den Prototypen einzuarbeiten.
Fragen die dabei diskutiert wurden:
- Bedienbarkeit des draggable Elements
- Feedback-State und Verständlichkeit der Quizfragen
- Hover-Sates der Buttons
- Scrollytelling Intro
Bei der Entscheidung zwischen Onepager oder einem Aufbau als Viewport, war das User Testing essentiell, und machte mir die Entscheidung für den Onepager dadurch einfach.
12. Finaler Prototyp, in Webflow
https://desinfo-europa.webflow.io/
Performant für die Auflösungen: 1440px, 768px (Tablet), 326px (Mobil)
13. Styleguide
