Incom ist die Kommunikations-Plattform der Hochschule Augsburg Gestaltung

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Hochschule Augsburg Gestaltung mehr erfahren

shadespeare

Dieses Projekt übersetzt William Shakespeares Sonette in Farben, um seine Poesie auf die etwas andere Art interaktiv erfahrbar zu machen.

shadespeare

— explore William Shakespeare's poetry through colour

Sprache ist ein komplexes System. Literatur ist konservierte Sprache.

Durch die systematische Zuordnung zwischen Farben und lexikalischen Kategorien soll shadespeare die literarische Sprache vereinfachen, Vergleichbarkeit schaffen und Literatur auf eine andere Art und Weise zugänglich machen – ungelesen.

Hintergrund

Mit dem Erwerb der Lesekompetenz erhalten Zeichen und ihre Kombinationen eine Bedeutung. Es wird beinahe unmöglich Buchstaben und Wörter einfach nur anzusehen. An das Lesen eines Wortes, oder eines Satzes, ist das Verstehen geknüpft und mit dem Verstehen geht meist auch eine gewisse Bewertung oder Interpretation einher. Um diesen Automatismus – wenn man so will – zu umgehen, werden in diesem Projekt Wörter entsprechend ihrer Wortart in Farben übersetzt.

Im Folgenden sollen Ablauf, Umsetzung und Gestaltung genauer erläutert werden.

Ablauf

shadespeare verfügt über zwei verschiedene Sonett-Ansichten: Die erste erlaubt einen Überblick über die Farbübersetzungen aller 154 Sonette, die zweite zeigt ein einzelnes mit Detailinformationen zum jeweiligen Gedicht.

ablauf_1.1.jpgablauf_1.1.jpg
Unbenannt.JPGUnbenannt.JPG
Screenshot (384).pngScreenshot (384).png
2Unbenannt.JPG2Unbenannt.JPG
Screenshot (386).pngScreenshot (386).png
Screenshot (383).pngScreenshot (383).png
Screenshot (388).pngScreenshot (388).png
Shadespeare_Einführung.pngShadespeare_Einführung.png
Screenshot (389).pngScreenshot (389).png
Screenshot (390).pngScreenshot (390).png

Der Startscreen – wenn man so will – zeigt das Logo und umreißt in einem Satz, was Betrachter:innen erwartet. Die Animation der Kreislinien um das S, sollen den Fokus darauf lenken und dazu animieren, daraufzuklicken. Diese Interaktion führt zur Überblicksansicht, in der die Farbstruktur des Sonetts, über dem sich der Mauszeiger befindet, vergrößert angezeigt wird. Ein Klick darauf bestätigt die Auswahl und bringt Nutzer:innen zur Detailansicht des jeweiligen Sonetts.

In dieser Detailansicht werden Metadaten wie zum Beispiel das Versmaß angezeigt. Außerdem besteht die Möglichkeit über Buttons zwischen unterschiedlichen Detailansichten zu wechseln. Wird die Wortlänge berücksichtigt, passt sich die Breite der farbigen Rechtecke der Länge des jeweiligen Wortes an. Der „Sortieren-Button“ ordnet die Farben zeilenweise entsprechend des Farbspektrums. Ein Klick auf die Schriftrolle zeigt schließlich das Sonett in schriftlicher Form an.
Diese Reihenfolge wurde bewusst gewählt, um den Fokus auf die Farbvariationen zu legen und Rezipient:innen einen „unvoreingenommenen“ Blick auf die Farben des Sonettes zu ermöglichen.
Mithilfe der Leertaste ist es möglich zwischen Detail- und Überblicksansicht zu wechseln.

Das Logo erscheint sowohl in der Gesamt- als auch in der Detailansicht und offenbart beim Darüberhovern Hinweise zur Nutzung.

Umsetzung

Screenshot (371).pngScreenshot (371).png
Screenshot (373).pngScreenshot (373).png
Unbenannt-1.jpgUnbenannt-1.jpg

RITA.js

Als Instrument zur „Gedichtanalyse“ dient RITA.js. Eine _JavaScript_-Library, die dafür ausgelegt ist, Computerliteratur zu generieren. Das heißt, sie ist in der Lage, Strings hinsichtlich ihrer grammatikalischen Eigenschaften zu untersuchen. Diese Eigenschaft bildet die technische Grundlage für das Projekt. Denn dadurch ist es möglich, Informationen über die Struktur der einzelnen Sonette und die darin vorkommenden Wortarten zu gewinnen.

RiTa.pos("I am a cat."); // returns -> [ "prp", "vbp", "dt", "nn", "." ]

Diese Funktion schlüsselt die acht im Englischen vorhandenen Wortarten in insgesamt 46 Part-of-speech-Tags auf. Aufgrund der Tatsache, dass Satzzeichen keine Wortarten sind, wurde die Liste um diese erweitert, damit die Verse vollständig in Farben dargestellt werden können.

Wahl des Datensatzes

Hinsichtlich der mithilfe der Library zu analysierenden Daten, fiel die Wahl auf Shakespeares Sonette. Dies liegt darin begründet, dass Sonette aufgrund ihrer – für gewöhnlich – immer gleichen Struktur, gut miteinander verglichen werden können. Neben den Farbübersetzungen stehen Rezipient:innen auch die wesentlichen gedichtspezifischen Informationen zur Verfügung. Sie umfassen den Namen des jeweiligen Sonetts, die Anzahl der Verse, die Wortzahl, das Metrum sowie den Charakter, auf den das lyrische Ich Bezug nimmt.

Farbspektrum

Insgesamt 47 verschiedene Farben, die sich in sieben Gruppen gliedern lassen, visualisieren die einzelnen Wortarten und Satzzeichen. Das Erzielen einer Farbharmonie stand dabei im Vordergrund, wobei die Farben möglichst neutral sein und zur Shakespeare-Materie passen sollten.

Legende.jpgLegende.jpg

Gestaltung

Was die Gestaltung anbelangt, lag das Hauptaugenmerk darauf, das Gesamtbild auf die Farben zu konzentrieren. Aus diesem Grund sind alle übrigen Elemente in schwarz-weiß gehalten.

Typografie

Auch die Wahl der Typografie fügt sich in diesen Kerngedanken. Schriftelemente sollen eine das Verständnis unterstützende Wirkung entfalten und keine Ablenkung darstellen. Deshalb fiel die Entscheidung auf eine serifenlose Schrift: Roboto. Sie wird im Projekt in den Schnitten regular und bold verwendet, um an bestimmten Stellen zu hierarchisieren.

Um aus typografischer Perspektive trotz aller klassizistischer Eleganz das Thema Shakespeare aufzugreifen, dient im finalen Entwurf des Prototypen HamletOrNot. Eine Schriftart mit historischem Touch, die an die Ham_let von Edward Johnston aus dem Jahr 1929 angelehnt ist. In _shadespeare findet sie sich als Zierinitiale in der Textansicht sowie als Logo wieder.

Logo

Bei der Reise zum finalen Logo lässt sich von einer Odyssee sprechen: Sie führte von zu viel „shade“ über sehr viel „speare“ und einer Mischung aus beidem schließlich zu einer Wortmarke. In der Einleitungssequenz zum Demovideo soll erklärt werden, wie das Logo zustande kommt: ein HamletOrNot S mit den Tintenspritzern.

Wie bereits erwähnt, ist das Logo das zentrale Element der Startansicht – und ihre einzige Interaktionsmöglichkeit. Damit soll es sich Nutzer:innen „vorstellen“ und ihnen durch seine Wiederholung in Gesamt- und Detailansicht ein Begleiter sein – wenn man so will – der ihnen im übertragenen Sinne mit Rat und Tat zur Seite steht (Hilfestellung für die Nutzung beim Darüberhovern).

S.jpgS.jpg
Icons 1.pngIcons 1.png
icons2.pngicons2.png
Element 2logogroß.jpgElement 2logogroß.jpg
IconIdeas.pngIconIdeas.png
222.png222.png

Ein Projekt von

Fachgruppe

Interaktive Medien

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuung

foto: Prof. Daniel Rothaug

Zugehöriger Workspace

Interfacedesign / Mensch und Maschine / IA

Entstehungszeitraum

Wintersemester 2020 / 2021