Finaler Prototyp

https://comfortsystem.netlify.app/

Präsentationsvideo

Bilder von der Werkschau

Endpräsentation

Vortrag Cursor

Dokumentation

Ab hier startet die Dokumentation

Impulsvortrag

Pitches

Prompting

Ideen/Skizzenausarbeitung

3 Skizzen Fokus auf Spiritualität

Konkretere Zielgruppenanalyse

HOUSE OF GOD Moodboard, Skizze, Explained

Das Triptychon Variante 1 Moodboard, Skizze, Explained

Das Triptychon Variante 2 Moodboard, Skizze, Explained

Triptychon Insizinierung

Überdenkung Inszinierung, mehr digital

Struktur auf der Technischen Seite ist wie folgt:

Das System besteht aus drei zentralen Komponenten: einem Controller (z. B. Smartphone, ipad, etc), einem lokalen Server und einer Projektionsanzeige (Rechner mit Beamer). Der Server (Node.js mit Express und WebSocket) fungiert als zentrale Schnittstelle und hostet sowohl die Steuerungsoberfläche (/phone) als auch die Anzeige (/projection).

Der Controller sendet abhängig von der Nutzerinteraktion Daten an den Server. Dieser verarbeitet die Eingabe und überträgt sie in Echtzeit an alle verbundenen Clients.

Die Projektionsseite empfängt diese Daten und passt die Darstellung entsprechend an.

Hardware

• Handy bzw. Ipad
• Rechner/Laptop am Beamer
• Beamer
• HDMI/USB-C-Kabel
• Gleiches WLAN

Software

• Cursor 
• Node.js
• npm
• Browser

Code/Techstacks

• HTML
• CSS
• JavaScript
• Node.js Server
• Express
• WebSocket Library

Prototyp Demonstration 1

Prototyp mit Handy, da ich kein Tablet besitze

Themenrecherche und Ausarbeitung von Inhalt

Mir fiel es relativ schwer mein Thema in eine klare Drei-Akt-Struktur und eine überzeugende Dramaturgie zu übersetzen. Um dafür ein besseres Gefühl zu entwickeln, habe ich mir noch einmal angesehen, wie andere Künstler*innen die Dreiteiligkeit des Triptychons nutzen, um starke Geschichten, Spannungen und Entwicklungen sichtbar zu machen.

Dafür habe ich mir bei jedem Werk dieselben Fragen untersucht:

1. Wie heißt das Triptychon?
2. Was zeigt es?
3. Wie ist die Komposition aufgeteilt — links, Mitte, rechts?
4. Welche Geschichte oder Entwicklung wird durch diese Dreiteilung erzählt?

So wollte ich herausfinden, auf welche unterschiedlichen Arten sich eine Geschichte, ein Konflikt oder ein Gedankengang in drei Bildfeldern darstellen lässt.

Danach habe ich die Triptychen noch einmal gezielt daraufhin verglichen, wie ihre Dreiteiligkeit funktioniert und wie dadurch eine Geschichte für den Betrachter erzählt wird.

Dafür habe ich zwei Fragen gestellt:

1. Wie wird die Dreiteiligkeit genutzt?
2. Wie wird die Geschichte erzählt?

Anschließend habe ich daraus eine allgemeinere Zusammenfassung abgeleitet: Wie kann man die Dreiteiligkeit kompositorisch nutzen?

1. 3. Wie kann man die Dreiteiligkeit kompositorisch nutzen?

So konnte ich verschiedene Erzählmodelle unterscheiden.

Danach habe ich die zentralen Themen meines eigenen Projekts gesammelt und in Ober- und Unterthemen geordnet. So konnte ich die verschiedenen Aspekte des Themas klarer voneinander trennen und sehen, welche inhaltlichen Schwerpunkte sich ergeben.

Anschließend habe ich diese Themen in eine dramatische Struktur überführt. Das diente einerseits der Übersicht, andererseits wollte ich herausfinden, welche Thematik die interessanteste und stärkste Geschichte erzählt.

Für meine Favoritenthemen habe ich danach mögliche Darstellungsformen im Triptychon abgeleitet, basierend auf den zuvor untersuchten kompositorischen Modellen. Schließlich habe ich ausgewählt, welche Darstellung visuell am überzeugendsten wäre, eine interessante Geschichte entfaltet und zugleich die wichtigsten inhaltlichen Fakten vermittelt.

Whitelabel

Wireframes C-Touch

Wireframes Ipad Var 1

Wireframes Ipad Var 2

Vibecode Wireframes

https://funny-taffy-3d6969.netlify.app/

Sammlung Tablet Elemente

Varianten Wireframes für Tablet (Kein One Pager)

Vibecode Wireframes 2

Zwischenpräsentation

Prototyp Stand 03.06.2026

Recherche/Info (Screenshots von Figjam)

Re-Styling

Anpassung des Designs aus den Gründen:

- Wenn ich händischer an die Illustrationen rangehe dann kann ich diese kohärenter gestalten, sodass sie wirklich aussehen wie eine Serie 

- Wenn diese händisch, und auf verschiedenen Layers sind, dann kann ich diese auch besser und einzeln animieren 

- Die Qualität der Illustration geht nicht so schnell verloren

- Anpassung des Designs an den Illustrationen, sodass alles kohärent aussieht

Dinge die mir während des experimentellen Prozesses passiert sind, die diese Entscheidung verstärkt haben:

- DALL·E weigerte sich das „Classroom“ Bild mehr zu editen, da es gegen die Datenschutzrichtlinien verstößt, Jugendliche zu bearbeiten (obwohl das Bild KI generiert ist)

- Qualitätsverlust bzw. komische Texture über Bildern nach mehreren prompten 

- Qualitätsverlust in Cursor wenn man die generierten Bilder benutzt

- Wenn kleinere Anpassungen gemacht werden müssen bei der Komposition, wäre es schneller gegangen es händisch in z.B. Photoshop nachzuziehen, wenn man es auf Layers hätte

- Animationsgenerationen auf Midjourney komisch/teils nicht konsistent / unsinnig

- Farben bei den Bildern waren nicht wirklich konsistent und es sah nicht aus wie eine Serie

Re-Styling: Illustration "The Lover"

Die, von DALL·E und dem Figma background remover, ausgeschnittenen Teile der Illustration. Diese habe ich dann in CSP weiter bearbeitet.

Re-Styling: Illustration "The Classroom"

Die, von DALL·E und dem Figma background remover, ausgeschnittenen Teile der Illustration. Diese habe ich dann in CSP weiter bearbeitet.

Re-Styling: Illustration "The Disciple"

Die, von DALL·E und dem Figma background remover, ausgeschnittenen Teile der Illustration. Diese habe ich dann in CSP weiter bearbeitet.

Alle 3 Illustrationen

Re-Styling: Design

Prototyp Stand 17.06.2026

Leider hat es mir am 16.6. Meinen Laptop lahm gelegt, musste den resetten, aber alle lokalen files (unter anderem der prototyp) wurden gelöscht. Ich muss diesen also nochmal von vorn bauen und versuche es aber viel ordentlicher (Ordnerstruktur!) Anzugehen. Ich werde bis Morgen (17.06.) Mein bestes geben es wieder auf einem guten Stand zu haben.

Prototyp zur Testung verschiedener Controller und Projektions UIs

Ich habe einen kleinen Prototypen gevibe-coded um mir sehr simpel verschiedene UIs zu veranschaulichen, welche am Ende besser Sinn für mein Projekt ergeben.

Pain Point welcher gelöst werden musste: UI auf Tablet ist zu kompliziert

Also habe ich mehrere Ideen mir ausgedacht (und unter anderem auch generieren lassen) um zu schauen was am besten funktioniert.

Um die Varianten einzuschränken habe ich eine Person den Prototypen ausprobieren lassen, die dieses Projekt noch nicht kennt. Sie hat sich auf 2 Varianten festgelegt, welche am intuitivsten waren: „Swipe Cards“ (man muss die Karten hochswipen um mehr Infos zu bekommen) und „Scroll only“ (Drag top to bottom)

Als ich gefragt habe warum sie diese am einfachsten fand bzw. ob sie diesen Mechanismus schon mal gesehen hat, dann meinte sie, dass die Mechanismen viel in Videospielen sind.

Testsituation sah so aus:

Ipad mit den Controller-versionen

27 zoll Monitor auf der die Projektion lief 

Person saß auf einen Stuhl am Schreibtisch

Prototyp 20.6. in der Hochschule

Skizzen reduzierteres UI Tablet

Überarbeitung der Illustrationen

Überarbeitung des Contents / Figma Frames

Cursor Prototyp Stand 30.06.2026

Stand auf C-Touch und Änderungen welche gemacht werden müssen

- Layout muss angepasst werden

- Margin nach Unten ist zu klein, awkward zu erreichen 

- Elemente wo man einfach nur tapped funktionieren am Besten -> Slider weg und eventuell mehr „Tap to Reveal“ Elemente wenn Interaktiv

- Maus cursor ändern, da dieser ja immer zu sehen ist

Anpassung des UI

Zur veranschaulichung der Anpassung habe ich dieses Mock Up und eine Person die 170cm ist und neben dem C-Touch steht. Mir ist bewusst, dass wenn ich Anpassungen anhand dieses Mock-Ups mache, dann ist mein Prototyp auf der Werkschau NICHT barrierefrei.

Hier sieht man, dass die Button-Placements sehr weit unten wären, weswegen das Grid bzw das ganze Layout nochmal angepasst werden muss, damit die Person NICHT so weit nach unten greifen muss um einen Button zu bedienen.

Zusammenfassung Recherche UI für große Touchscreens

Gamification Einstieg in die Panels

Die Figma Frame Skizzen für einen gamifizierten Einstieg in jedes Panel. Die Antworten spiegeln sich dann auch teilweise in den Informationen der Panele wieder. Außerdem habe ich zwei Varianten erstellt, wie jeweils das Quiz-Element aussehen könnte.

UX Testing

Ich habe ein UX-Testing mit einer Person gemacht.

Testaufgaben waren wie folgt:

„Stell dir vor, du kommst an dieser Installation vorbei. Fang einfach an.„

„Schau dir die Installation an um und geh dem nach, was dich am meisten interessiert.“

„Sag mir, wann du das Gefühl hast, hier fertig zu sein. Und mach dann, was du tun würdest.„

Ich habe Sam auch gesagt, dass Same alle Gedanken bitte laut sagen soll, sodass ich den Gedankengang nachvollziehen kann.

Debriefing-Fragen:

„Was war dein erster Eindruck?“ 

„Wie hat sich die Größe des Bildschirms angefühlt?„

„War immer klar, was du antippen kannst und was nicht?“

„Waren Texte und Elemente gut lesbar aus deiner Position?„

„Hat die Bedienung schnell reagiert – oder musstest du mal doppelt tippen / warten?“

„Wo hast du wichtige Buttons oder Infos erwartet, und waren sie dort?„

„Wie haben sich die Übergänge/Animationen angefühlt – flüssig, zu schnell, zu langsam?“

Auswertung und was ich noch nachgefragt habe:

- Performant

- Gut zurechtgefunden

- man ist zu nah am C-Touch -> Typo zu groß

- Das Projekt wäre besser wenn man einen Schritt zurückgehen würde (bestätigt aber meinen initialen Prototyp mit dem Ipad)

- „Exit“ fehlt, scroll-Indikator fehlt

- Sam hat nicht geshen, dass die Antworten einen Einfluss auf die Panels hatte

Änderungen nach UX Testing

- Button der zum Startbildschirm führt

- Besser indiziert in den Infos was man selber angetippt hat

- Swipe down-Indikator

- Results vom Quiz 

- User-Journey angepasst

Animationen

Poster

Styleguide

Storyboard Case Film