Endergebnis

https://wievielebistdu.netlify.app/

Gecoded mit Cursor

Abschlusspräsentation

Screencast

Styleguide

Flyer

Die Flyer werden zur Werkschau ausgelegt werden. Sie schneiden das jeweilige Kapitel kurz an und machen neugierig, die Webseite zu besuchen. Der QR Code auf der Rückseite führt genau dorthin und sorgt dafür, das Besucher:innen auch nach der Werkschau die Seite noch besuchen können.

Plakate

Erste Entwürfe

Animationen Test

Einstieg aktueller Stand

https://wievielebistdu-einstieg.netlify.app/

Barrierefreiheit

Barrierefreiheit-Checkliste und Testen des Prototypens mit Silktide

User-Testing

Das User Testing wurde mit drei sehr verschiedenen Personen durchgeführt und hat wertvolle Erkenntnisse zur Nutzerführung und Gestaltung geliefert.

Aufgaben:

1. Finde wichtige Informationen / Hinweise zu diesem Projekt

2. Finde heraus, warum Rückzug wichtig ist

3. Spiele das Social-Media-Posting-Spiel

Mama

Meine Mama ist oft unsicher im Umgang mit digitalen Geräten und hat oft Angst, etwas falsches zu machen. Dafür verfügt sie über ein großes Verständnis und Sensibilität zum Thema Identität.

Entdeckungen:
- Kontrolle: deutlicher machen, dass es nur in diesem Kapitel ums Digitale geht

- „Kuratieren“ ändern - schwer verständliches Wort

- Interaktionen: am Ende eine Zusammenfassung oder Feedback, damit es nicht so plötzlich aufhört

- ihre Idee: Glühbirnen an den Buttons aufleuchten lassen, um auf weitere Informationsebene aufmerksam zu machen

Leopold

Ingenieur, sehr Technik-affin und -erfahren. Sicher im Umgang mit Interfaces und großes Verständnis für Logik.

Entdeckungen:

- Info-Button: Reiter farblich hervorheben, Unterstreichung reicht nicht

- Spiel „Passt du dich an?“ - Buttons zum Antworten sollen after delay automatisch erscheinen, evtl kleiner Ladebalken der verrät, das noch was kommt

- hat entdeckt, dass ich eine Figur unsauber ausmaskiert habe :)

- Idee: Infobutton im Home Screen heller (damit man ihn einmal drückt), in den Unterseiten eher dunkler

- Buttons sollten sich bewegen, auch der für die Interaktionen

Viki

Meine Kommilitonin und KD Studentin, sicher im Umgang mit Interfaces und großes Wissen über Nutzerführung und Gestaltung. Hatte als einzige die Ehre, das Testing auf dem Clevertouch durchzuführen.

- Der Anschluss von meinem Laptop an den Clevertouch im Studio funktioniert nicht!

- Interaktionen mit nur 2 Buttons zur Auswahl - sofort danach zur Auswertung springen

ansonsten findet sie es verständlich. Sie findet es toll, dass man sich für die Bedienung so viel bewegen muss und alles so groß ist

> insgesamt haben alle Testende alle Buttons gefunden und verstanden. Trotzdem waren wir uns immer einig, dass es noch besser wäre, wenn sich die Buttons auf den Unterseiten ein wenig bewegen.

Klick-Prototyp

https://www.figma.com/proto/tFrmIrvrsa52GAMvyhLgsR/UX-Storytelling-KD6?page-id=604%3A1038&node-id=639-949&viewport=728%2C560%2C0.05&t=eD7s0k4NHpndxiau-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=639%3A949

Prototyp Korrektur III

- Entfernen der Muster in den Charakteren 

- Test - einheitliche Buttons oder offener Texte > Buttons sind besser, weil sie zum Klicken animieren, offener Text bricht weg

- Neben Disclaimer auch noch Quellen

- Pfeile, Home Icon

- Anpassung des interaktiven Buttons und des Interfaces

- Anpassung mancher Texte: Erwähnung der Wissenschaftler, die die Theorien aufgesellt haben

Prototyp Korrektur II

Link zum Prototypen: https://www.figma.com/proto/tFrmIrvrsa52GAMvyhLgsR/UX-Storytelling-KD6?page-id=181%3A2&node-id=465-39&viewport=-7131%2C-1908%2C0.22&t=J3via6UVpGmQn5tm-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=465%3A39

- Eindruck, es gäbe genau 7 Identitäten > weitere Charaktere schmemenhaft im Hintergrund

- Disclaimer

- Varianten, die Bildchen auf den Overlays anzuzeigen

- kleine Anpassung der interaktiven Screens

Zwischenpräsentation

Prototyp Korrektur

Die zweite Informationsebene wird jetzt als Overlay angezeigt. Bild 1-3 zeigt drei verschiedene Designvarianten. Bild 4 und 5 zeigt die Interaktive Ebene, ebenfalls in Form eines Overlays an der Bildschirmseite.

Prototyp auf Leinwand

Illustrative Ebene

Designvarianten

Midjourney

Noch einmal einen Schritt zurück - ich teste, was Midjourney aus meiner Idee macht (Bild 1). Nebenbei suche ich in der Community Page noch einmal nach Inspiration (Bild 2).

Anschließend bearbeite ich meinen Favoriten noch einmal in Firefly - die Figuren sollen genderneutral aussehen und stehen anstatt zu laufen.
Als nächstes arbeite ich einige Varianten in Photoshop weiter aus. Auch die Figuren vom Anfang werden ausgearbeitet, obwohl meine Favorit eine Firefly Generation ist.

Fun-Fact: Die Figuren auf den Bildern sind (bis auf die beiden Bilder links) fast genauso angeordnet wie die persönlichen Klone aus dem Einstieg.

Wie kann ich die Namen der Kapitel am besten auf die sieben Figuren projizieren?

Interface Varianten

Umfrage

https://docs.google.com/forms/d/e/1FAIpQLSduWk-RzLKYFfnMmPwJTLCM5lfTJ0quGr7SCTL3K6zJ3S2Cyg/viewform?usp=dialog

Einstieg

Step 2

Ich verbessere meinen Prototypen: ich mache die Kanten weicher, dass die Klone keine Pixel-Ränder mehr haben und lasse sie nach und nach auf geisterhafte Art erscheinen. Der Countdown bleibt aktuell aus praktischen Gründen noch drin, damit ich erkennen kann, ob das System läuft.

Step 1

Mit Claude habe ich es geschafft, meine Idee zu Vibe-Coden: Durch die Integration von MediaPipe wird die Person erkannt, mehrmals fotografiert, ausgeschnitten und dem Screen hinzugefügt. So wird die Person 6x vervielfältigt, sodass sie sich am Ende insgesamt 7x sieht.

Gestaltung

Version 1: dunkel, galaxy, glow

Diese Version zeigt Identität als ein fließendes, vernetztes und zugleich mystisches und rätselhaftes System aus Erinnerungen und Einflüssen.

Die organischen Neonformen und diffusen Lichtverläufe erzeugen eine immersive Atmosphäre voller Geheimnisse zum Entdecken.

Zusätzlich wird zwischen dem violetten Galaxy-Style und dem hellblauen Flow-Style unterschieden. Beide Stile werden sich je nach Kapitel farblich an den Charakter auf der Startseite anpassen.

Version 2: fragmentiert, roh, urban

Diese Version zeigt Identität als etwas Fragmentiertes, Überlagertes und ständig Veränderbares, geprägt von äußeren Zuschreibungen und inneren Widersprüchen.

Die rohe, urbane Ästhetik bewirkt eine emotionale, introspektive Atmosphäre.

User Journey

Moodboards

Visuelle Recherche: Darstellung von Identität

Inhalte

Grober Prototyp

Why How What

Konzeptskizzen

Recherche

Pitchdeck

Impulsvortrag