Incom ist die Kommunikations-Plattform der Hochschule Hof Kommunikationsdesign

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Hochschule Hof Kommunikationsdesign mehr erfahren

STORYTELLING / UX

1. Grundideen

220323_MZ_Desinformationen.pdf PDF 220323_MZ_Desinformationen.pdf

Slide 16_9 - 4.pngSlide 16_9 - 4.png
Bildschirmfoto 2023-05-15 um 13.14.32.pngBildschirmfoto 2023-05-15 um 13.14.32.png
Slide 16_9 - 6.pngSlide 16_9 - 6.png
Slide 16_9 - 5.pngSlide 16_9 - 5.png

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

Slide 16_9 - 65.pngSlide 16_9 - 65.png
Slide 16_9 - 66.pngSlide 16_9 - 66.png
Slide 16_9 - 71.pngSlide 16_9 - 71.png

5. Storyline, Spannungsbogen, Mindmap

Slide 16_9 - 72.pngSlide 16_9 - 72.png
Slide 16_9 - 74.pngSlide 16_9 - 74.png
Slide 16_9 - 73.pngSlide 16_9 - 73.png
Slide 16_9 - 75.pngSlide 16_9 - 75.png

Slide 16_9 - 88.pngSlide 16_9 - 88.png
Slide 16_9 - 89.pngSlide 16_9 - 89.png
Slide 16_9 - 90.pngSlide 16_9 - 90.png
Slide 16_9 - 34.pngSlide 16_9 - 34.png
Slide 16_9 - 10.pngSlide 16_9 - 10.png

Slide 16_9 - 69.pngSlide 16_9 - 69.png
Slide 16_9 - 70.pngSlide 16_9 - 70.png

6. Moodboard

Slide 16_9 - 80.pngSlide 16_9 - 80.png
Slide 16_9 - 83.pngSlide 16_9 - 83.png
Slide 16_9 - 82.pngSlide 16_9 - 82.png
Slide 16_9 - 81.pngSlide 16_9 - 81.png

7. Skizzen, erste Layouts, erste Prototypen

Slide 16_9 - 76.pngSlide 16_9 - 76.png
Slide 16_9 - 78.pngSlide 16_9 - 78.png
Slide 16_9 - 79.pngSlide 16_9 - 79.png
Slide 16_9 - 77.pngSlide 16_9 - 77.png

8. Designvarianten

1.png1.png
4.png4.png
5.png5.png
2.png2.png
6.png6.png

9. finales Design

finales design.pngfinales design.png

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

styleguide.pngstyleguide.png

14. Screencast

15. Präsentationsvideo

Ein Projekt von

Fachgruppe

Kommunikationsdesign

Art des Projekts

Keine Angabe

Zugehöriger Workspace

UX- und Storytelling (KD6)

Entstehungszeitraum

Sommersemester 2023