1. Filmische Dokumentation des Projekts

2. Bilder der Umsetzung und Ausstellung

3. Finales Pitch Deck

4. Userflow

5. Links zu Prototyp und Quellcode

https://friendly-boba-e133ee.netlify.app

https://friendly-boba-e133ee.netlify.app/admin 

In der Admin-Version kann über das Einstellungsrädchen das CMS-System der Anwendung geöffnet werden. Um meine finalen Einstellungen im System zu sehen, bitte meine JSON-Datei im CMS unter „Daten“ importieren. Die JSON-Datei und der Quellcode der Anwendung befinden sich im ZIP-Ordner in der Dateiablage des Projekts.

______________________________

Designprozess

29.06.26

Varianten des Interfaces

Variante 1: Gedicht und Lautschrift nebeneinander, Front- und Seitenansicht der Anatomie durch Switchen hintereinander, UI-Buttons unter den Grafiken

Variante 2: Gedicht anfangs eingeblendet, Lautschrift aktiv durch Toggle-Button einblendbar, Front- und Seitenansicht der Anatomie untereinander, UI-Buttons über den Grafiken

22.06.26

Reflexion: Was will ich am Ende Darstellen/Erklären?

In der Anwendung sind nun Front- und Side-View nacheinander zum switchen statt untereinander aufgeführt, um eine Informationsflut zu verhindern und eine Hierarchie bzw. Reihenfolge in der Informationsebene zu schaffen. 

Der Beschreibungstext zur Anatomie ist nun nummeriert und in der Grafik miteingebunden.

Die Front-Ansicht verfügt nun auch über eine selbst-eingefügte Outline, um sich den Stil der Seiten-Ansicht anzupassen. Das Gesicht ist auch verbessert aber gegebenenfalls noch nicht final.

Außerdem habe ich einen externen Info-Punkt mit einem ?-Button hinzugefügt, um Hintergründe zum Projekt zu erklären. Da sowieso schon viele Elemente und Buttons auf der Anwendung auf dem Screen sind, pulsiert der Button, um die Blickrichtung zu lenken. Es öffnet sich ein Overlay mit den Infos zum Projekt.

Hier habe ich die Animation der Zunge mit eigenen SVG-Dateien versucht. Es gibt einen Start- und Endframe, der bei allen Phonemen gleich ist. Den Frame, den ich extra bei jedem einzelnen Phonem hinzufügt habe, ist der Zustand, der den ersichtlichen „Peak“ in der Bewegung der Zunge darstellt. So konnte ich Claude sagen, die SVGs für jedes Phonem zu nutzen und die Frames zu morphen.

15.06.26

Mein Versuch SVG-Dateien für die Seitenansicht selber einzubetten durch Object-IDs:

Ich habe die gewünschte Kopfform, Oberlippe, Unterlippe, das Kinn und die Zunge nochmals in Illustrator selbst gebaut. Danach habe ich alle Elemente einer eigenen Ebene zugeteilt und sie auf eine eigene Zeichenfläche gelegt, um die Elemente einzeln zu exportieren. Beim Export ist darauf zu achten, dass bei den Object-IDs die Ebenennamen verwendet werden. Damit konnte Claude gut umgehen und hat die Pfade farblich sogar an meine restliche UI angepasst. Nicht möglich war leider nur, die Zunge einzufügen, sodass sich diese beim sprechen bewegen kann. Man kann nämlich die eingebettete SVG-Datei nur skalieren oder rotieren lassen, nicht gänzlich transformieren. Also habe ich die Zunge erstmal weggelassen und so wie in meinen vorherigen Versuchen animiert gelassen, was aber nun auch besser aussah.

01.06.26

17.05.26

11.05.26

https://soundsofspeech.uiowa.edu/german/details

04.05.26

Referenz-Sammlung

Prototyp Versuch - Vibe-Coding Experimente

https://editor.p5js.org/kristin.qu/sketches/Q_5oqf51C

Unterschied Englisch - Deutsch der Phoneme des Buchstaben „i“

-> Lautschrift wird rechts oben in real-time dazu gezeigt und unten nochmal genauer erklärt (z.B. offener Vokal)

-> Grafische Darstellung der Seitenansicht des Rachens immer noch zu primitiv. Man erkennt daraus nicht viel. Beschriftung von Zunge und Lippen notwendig.

-> Weitere Tests mit anderen Buchstaben!

https://editor.p5js.org/kristin.qu/sketches/pcIUfy3k4

-> UI-Elemente verschoben/nicht sichtbar

-> Zeichnungen zu einfach

-> Phoneme des Wortes durch Lautschrift in Balken-Darstellung aufgeteilt ist sinnvoll aber kann noch optimiert werden (ist z.B. zu schnell)

-> generell nochmal simpleren Ansatz probieren ohne Wörter

____________________________________________________________

Inspiration: Google Search Pronounciation Tool

-> leider nicht veröffentlicht, welche Engine dafür genutzt wurde

Einschätzung von ChatGPT:

Mein bestes, sauberes Fazit ist daher:

Bestätigt: Google hat Aussprache- und Sprechübungsfunktionen in Search und Translate veröffentlicht.

Nicht bestätigt: welches exakte Authoring-Tool, welche Render-Engine oder welches Produktionsprogramm dahintersteckt. Dafür gibt es öffentlich keine belastbare Google-Angabe.

Plausible technische Einordnung: eher ein internes Google-System für phonem-/visemgesteuerte Gesichtsanimation, nicht zwingend ein frei bekanntes Standardprogramm. Die Animation dürfte aus Lautdaten bzw. Phonem-Timing generiert werden, statt als einzelnes Video manuell produziert zu sein. Diese Schlussfolgerung ist eine Inference, keine bestätigte Google-Aussage. Unterstützt wird sie nur indirekt durch Googles Phonem-Dokumentation und die Beschreibung der Features als KI-/Sprachlern-Funktion.

Recherche Theorie Phoneme und Viseme

„What Are Phonemes, Visemes and Why One Should Care?

Let's understand some basics:

Phonemes are the smallest units of sound in any spoken language, the building blocks of words. They represent how speech sounds are structured, and each phoneme corresponds to a distinct sound rather than a visual shape. There are different formats like IPA and ARPAbet in which phonemes can be represented.

Visemes are the visual representation of speech; they are the mouth shapes formed when sounds are spoken. They act as the visual counterpart to phonemes, translating audio into motion. While phonemes define audio articulation, visemes translate those sounds into visible mouth movements for lip-sync animation.

Because many speech sounds appear identical on the lips, one viseme can represent several phonemes. For example, p, b, and m all involve closed lips and hence visually they look the same when spoken. As a result, most systems rely on a compact visual library of around 12-20 core viseme shapes to cover the full range of human speech.“

Quelle: https://springct.com/technicalarticles/visemes-bringing-digital-humans-to-life/ (abgerufen 01.05.26)

27.04.26

Recherche & Experimente

Aktuelle Leitfrage:

-> Kann ich Lautschrift grafisch darstellen/abwandeln und verständlicher machen?

abhängig von:

Zungenstellung zum Beispiel in der Google Darstellung nicht ersichtlich!

-> Vergleich Vokale im Deutschen (zu viele, nur Auswahl?)

-> Vergleich ein Wort/Zitat/Gedicht im britischen vs. amerikanischen Englisch?

-> Vergleich Englisch und Deutsch

-> Idee: Kann ich Lautschrift grafisch darstellen/abwandeln und verständlicher machen?

____________________________________________________________

Aussprache im Duden (Lautschrift) -> interessant: deutsch vs. englisch

Aussprache erklärt in Google (Sound und Video) -> interessant: britische und amerikanische Aussprache

Spektogram Art

Adobe Audition

PRAAT - Dialog (formants und pitch)

PRAAT - Ein Wort (Münchberg) laut und leise -> Betonung verändert sich

PRAAT Test mit Musik

PRAAT - Fotofunktion

20.04.26

Pitch Deck

13.04.26

Recherche

30.03.26

Projektideen