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
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
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
- 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
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
