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

finales design.png

10. Prototyp

https://www.figma.com/proto/r5akz6bmYtt48BACb7EJQf/Pitches?page-id=199%3A4245&type=design&node-id=693-10121&viewport=-1147%2C141%2C0.08&t=TbvtnSDt3FeTWKIt-1&scaling=min-zoom&starting-point-node-id=693%3A10584&mode=design

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

styleguide.png

14. Screencast

15. Präsentationsvideo