Hair&Skin

Das Thema

Unser Projekt begann mit einer zufällig ausgewählten Buchseite aus einem Lexikon, die als Grundlage für unsere Arbeit diente. Das Thema unserer Seite lautete „Haut und Haare“. Unsere Aufgabe war es, ein interaktives und informatives Ausstellungskonzept zu entwickeln, das dieses Thema ansprechend vermittelt.

Um eine spannende und vielschichtige Darstellung zu gewährleisten, haben wir das Thema in vier wesentliche Aspekte unterteilt:
1. Colors - Die Vielfalt der Haut- und Haarfarben
2. UV-Light - Die Auswirkungen von UV-Strahlung auf Haut und Haare
3. Anatomy - Die Anatomie der Haut
4. Ageing - Der Alterungsprozess der Haut

Diese Unterteilung ermöglichte es uns, verschiedene Facetten des Themas aufzugreifen und ein abwechslungsreiches Ausstellungskonzept zu entwickeln. Zu dem fand der Kurs komplett auf Englisch statt, da wir Unterstützung von Erasmus Studenten aus dem Ausland bekommen haben.




Das Konzept

Unser Konzept besteht aus einer interaktiven Tischinstallation, die das Thema Haut visuell und haptisch erfahrbar macht. Im Zentrum steht das Model eines Kopfes, welcher durch sein Äußeres die menschliche Haut repräsentiert. Um genau zu sein besteht dieser aus Styropor, das mit Clay verkleidet wurde, um eine organische Form zu erzeugen. Die Oberfläche wurde mit einer Mischung aus Acrylfarbe und Sand bemalt, um eine interessante, texturierte Haptik zu schaffen.

Der Tisch hat eine drehbare Platte, an der ein iPad befestigt ist. Durch das Drehen dieser Tischplatte bewegt sich das iPad synchron mit und umkreist den Kopf in einem 360-Grad-Radius. Auf dem Bildschirm wird stets die aktuelle Perspektive von dem Kopf angezeigt, ergänzt durch thematische Informationen (mehr dazu in den Designfiles).

Der Kreis ist in vier Abschnitte unterteilt. Jeder dieser 90-Grad-Abschnitte widmet sich einem der vier von uns gewählten Schwerpunkte. Die Themenwechsel sind sowohl auf dem Screen als auch physisch auf dem Tisch selbst gekennzeichnet. Und zwar, befindet sich über der drehbaren Platte eine feststehende Iconplatte, die sich nicht mitdreht. Auf dieser haben wir die thematisch passenden Icons platziert, welche als visuelle Orientierungspunkte für die verschiedenen Themenabschnitte dienen.

Die Icons sind ein wichtiger Bestandteil unseres Konzepts und wurden in ihrer Basis auf den runden Cocktailtisch abgestimmt. Alle Icons haben eine kreisförmige Form, um sich harmonisch in das Gesamtbild der Installation einzufügen.

Für das Thema Haut- und Haarfarben haben wir vier Kreise in unterschiedlichen Brauntönen gestaltet, inspiriert von verschiedenen Hautnuancen. Das Thema UV-Light wird durch eine stilisierte Sonne dargestellt, während die Anatomie der Haut mit einem DNA-Strang symbolisiert wird. Für das Thema Hautalterung haben wir eine Textur aus Clay geformt, die an Falten erinnert und den Alterungsprozess der Haut visualisiert.

Alle Icons wurden im selben Stil gehalten wie das zentrale Headmodel: Sie sind aus Clay geformt und mit einer Mischung aus Acrylfarbe und Sand bemalt. Diese einheitliche Gestaltung schafft eine visuelle und haptische Verbindung zwischen den Icons und dem Kopfmodell und verstärkt die organische, greifbare Ästhetik der Installation.




Moodboard

Für unsere Designfiles auf dem Bildschirm erstellten wir ein Moodboard, das uns bei der visuellen Gestaltung inspirieren sollte. Besonders beeinflusst wurden wir von Beauty- und Skincare-Kampagnen, die durch einen cleanen und eleganten Look überzeugen. Wir orientierten uns an natürlichen Farbtönen, die an verschiedene Hautnuancen angelehnt sind, sowie an einer hellen, filigranen Typografie. Ergänzt wurde das Design durch schlichte, dünne geometrische Formen, die eine minimalistische und moderne Ästhetik unterstützen und außerdem im Kontrast zu den sonst organischen und weichen Formen der Haut stehen.




Style Guide

Auf Basis des Moodboards entwickelten wir einen Styleguide. Als Hintergrund wählten wir kühle Brauntöne, inspiriert von verschiedenen Hautfarben, und ergänzten diese mit einer grainy Texture, die an die natürliche Unperfektheit von Haut erinnert.

Die Icons und Illustrationen sind in warmen Braunabstufungen gestaltet, sodass sie sich harmonisch, aber dennoch kontrastreich vom Hintergrund abheben. Für die Typografie setzten wir auf eine leichte und helle Schriftführung. Die Headlines wurden mit der fast dekorativen, kursiven Serifenschrift „Scotch Display“ gestaltet, während der Fließtext in der gut lesbaren Groteskschrift „Outfit“ gehalten ist.




Designfiles

Unsere Designfiles folgen einem klar strukturierten Layout, das eine intuitive und ansprechende Nutzerführung ermöglicht. Ein zentrales Gestaltungselement ist die Titelsequenz jedes Themas, in der stets der Modellkopf im Mittelpunkt steht. Dies unterstützt die Illusion, dass sich das iPad wie eine 360-Grad-Kamera um den Kopf dreht und sorgt für eine immersive Darstellung.

Das übergeordnete Thema „Hair & Skin“ ist in jeder Datei oben links platziert, um unabhängig von der Position des iPads eine klare thematische Orientierung zu gewährleisten. Die Überschrift des jeweiligen Unterthemas befindet sich immer prominent über dem Kopf in der dekorativen Serifenschrift, groß inszeniert als Eye-Catcher.

Zur Navigation gibt es am unteren Bildschirmrand eine Menüleiste in Form eines Kreissystems. Ein ausgefüllter Kreis zeigt den aktuellen Standpunkt innerhalb der Designfiles an. Die großen Kreise repräsentieren die vier Hauptthemen, während die kleineren Kreise die einzelnen Kapitel innerhalb eines Themas visualisieren. Zusätzlich befindet sich unten rechts eine Nummerierung, die eine klare chronologische Reihenfolge der Themen unterstützt.

In unseren Content-Files haben wir die Informationen gezielt um den zentral platzierten Kopf angeordnet oder, wenn es inhaltlich sinnvoll war, direkt darüber gelegt. Dies sorgt für eine klare Struktur und eine visuelle Verbindung zwischen den Informationen und dem dargestellten Model.

Bei den Themen „Anatomy“ und „UV Light“ war eine zusätzliche Illustration erforderlich, um komplexe Sachverhalte verständlich darzustellen. Zunächst stand die Überlegung, auch hier das bestehende Layout beizubehalten und alle Inhalte über dem Kopf anzuordnen. Allerdings hätte dies zu einer überladenen Darstellung geführt.

Daher entschieden wir uns bewusst für einen Stilbruch: Statt heller Schrift auf dunklem Hintergrund, wie im restlichen Design, kehrten wir hier das Farbschema um und verwendeten dunkle Schrift auf hellem Hintergrund. Dieser Wechsel hebt die Illustration deutlich hervor und signalisiert, dass es sich um eine „Closer Look“-Ansicht handelt – eine detaillierte, alternative Perspektive innerhalb der Ausstellung.




Bau des Modells

Der Modellbau war deutlich herausfordernder als zunächst erwartet. Die größte Schwierigkeit bestand darin, eine technische Lösung zu finden, um die Drehrichtung und die genaue Position des iPads zuverlässig zu erfassen. Letztendlich entschieden wir uns für einen Rotary Encoder, der genau diese Anforderungen erfüllt. Er kann die Drehrichtung, die Drehgeschwindigkeit und – am wichtigsten – die exakte Position des iPads pro Umdrehung aufzeichnen.

Um den Encoder in die Konstruktion zu integrieren, mussten wir die bewegliche Drehplatte mit der Grundplatte verbinden, während sich darüber die feststehende Icon-Platte befinden sollte. Die Herausforderung bestand darin, eine stabile, unbewegliche Struktur über der drehbaren Platte zu installieren.

Zunächst befestigten wir die Drehplatte mit einem Kugellager an der Grundplatte, sodass sie sich flüssig drehen konnte. Da das Kugellager eine große Öffnung in der Mitte hat, sägten wir zusätzlich ein Loch in die Drehplatte, um diesen freien Raum zu nutzen. Durch diese zentrale Öffnung konnten wir einen metallenen Möbelfuß direkt mit der Grundplatte verschrauben. Dieser Möbelfuß dient als feste Verbindung zur Grundplatte und bildet das Fundament für die unbewegliche Icon-Platte. Über den Möbelfuß stülpten wir ein Rohr, auf das schließlich die Icon-Platte aufgesteckt wurde. Dadurch bleibt sowohl das Kopfmodell als auch die Icon-Platte unbeweglich, während die Drehplatte frei um sie herum rotieren kann.

Die nächste Herausforderung bestand darin, den Rotary Encoder so anzubringen, dass er präzise Signale aufzeichnet. Dafür befestigten wir ihn seitlich am Metall-Möbelfuß, nachdem wir ihn mit einem zusätzlichen Gummimöbelfuß präpariert hatten. Diese Gummifläche liegt an der Innenseite des Lochs in der drehbaren Platte an, sodass beim Drehen der Platte die Spitze des Encoders mit dreht und die gewünschten Signale erfasst werden können.




Was an Technik drinne steckt

Obwohl der finale Aufbau auf den ersten Blick simpel erscheinen mag – ein iPad, das sich um ein Kopfmodell dreht und dabei den Bildschirm verändert, steckt hinter diesem Mechanismus eine komplexe technische Umsetzung. Um zu veranschaulichen, welche Prozesse im Hintergrund ablaufen- hier einmal eine Aufzählung:

1. Nutzerinteraktion (Input): Der Nutzer dreht die Platte nach links oder rechts.

2. Erfassung der Bewegung: Der Rotary Encoder misst die Drehrichtung und zählt die Position des iPads in Frames mit.

3. Signale an den Arduino: Der Encoder ist mit einem Arduino Leonardo verbunden. Der Arduino besitzt einen vorprogrammierten Code, der die Encodersignale in sogenannte „TIME“-Signale umwandelt: Ein negatives Signal (-) für eine Drehung nach links und ein positives (+) für eine Drehung nach rechts. Diese Signale sind essenziell für die spätere Steuerung des Videos.

4. Steuerung der Videoabspielung in Protopie:

• Protopie ist ein Tool zur Erstellung interaktiver Prototypen. In unserem Fall verwenden wir es, um die Bewegung der Platte mit einer Videoabspiel-Funktion zu verknüpfen.
• In Protopie haben wir eine Funktion erstellt, die die „TIME“-Signale verarbeitet: Bei einem positiven Signal (+) läuft das Video vorwärts, bei einem negativen Signal (-) rückwärts.
• Unsere Designfiles wurden in Figma erstellt, anschließend in CapCut exportiert und zu einer durchgehenden Videosequenz zusammengesetzt. Dieses Video bildet die Basis für die iPad-Anzeige.

5. Verbindung zwischen Arduino und Protopie über Protopie Connect:

• Protopie Connect ist eine Schnittstelle, die es ermöglicht, externe Daten in Protopie zu integrieren.
• Sie kann serielle Daten aus dem Arduino auslesen und an das Protopie-Projekt weitergeben, um das Video basierend auf der Drehbewegung abzuspielen.

6. Ausgabe auf dem iPad (Output):

• Protopie Connect gibt den Video-Screen im Browser auf einem MacBook aus.
• Über die iOS-Bildschirmsynchronisierung wird dieser Bildschirminhalt in Echtzeit auf das iPad übertragen, sodass die Bewegung der Drehplatte sofort auf dem iPad-Display sichtbar wird.

Durch diese mehrstufige technische Umsetzung entsteht eine nahtlose, interaktive Erfahrung, die die Illusion vermittelt, dass das iPad tatsächlich eine 360-Grad-Kamera um das Kopfmodell simuliert.

Ausblick - Inszenierung in einem realen Umfeld

Da es sich bei unserer Konstruktion lediglich um einen Prototypen handelt, gibt es verschiedene Möglichkeiten, das Konzept weiterzuentwickeln und in einem realen Ausstellungsumfeld – beispielsweise in einem Museum über den menschlichen Körper – zu inszenieren.

Ein zusätzliches gestalterisches Element wäre die Verkleidung des unteren Tischbereichs. Dazu könnte ein zylindrisch gespannter Stoff in einem beigen Ton verwendet werden, der nicht nur optisch zur Ästhetik des Projekts passt, sondern auch die Technik im Inneren des Tisches elegant versteckt.

Zentral könnte die gesamte Installation durch einen umlaufenden Fransenvorhang ergänzt werden, der auf einem Ring über dem Tisch gespannt ist. Dieser würde den Tisch und das Kopfmodell teilweise verbergen, sodass Besucher erst wirklich in diesen neu geschaffenen Raum eintreten müssen, um das Exponat vollständig zu erfassen. Dadurch entsteht ein bewusstes Erleben des Moments, in dem sich der Bezug zum Thema „Haut und Haare“ offenbart.

Der Vorhang selbst symbolisiert die Haare, während der Kopf als zentrales Element für die Haut steht – so würde sich thematisch ein geschlossener Kreis ergeben. Dieses Konzept könnte nicht nur visuell ansprechend, sondern auch immersiv wirken, indem es die Besucher aktiv in das Ausstellungserlebnis einbindet.