Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

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

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

LYRE - Plattform für junge Lyrik

Gestaltung einer Website für die Gedichtsammlung von lyrix, dem Bundeswettbewerb für junge Lyrik.

lyrix: Bundeswettbewerb für junge Lyrik

Der Bundeswettbewerb zeichnet seit 2007 die besten Gedichte in den Altersgruppen 10-14 und 15-20 aus. Jeden Monat gibt es Impulse bestehend aus einem Monatsthema, Informationen zu bestimmten Sachlagen und der Vorstellung einer Dichter*in und eines Gedichts. Aus diesen monatlich entstandenen Gedichten werden aus den Altersgruppen jeweils sechs ausgewählt. Zusätzlich werden aus denen auch sechs pro Gruppe als Jahresgewinner*innen gekürt.

Die Präsentation dieser Gedichte ist momentan in den jeweiligen Wettbewerbsmonaten enthalten und nicht besonders übersichtlich oder wirklich auffindbar. Unsere Aufgabe bestand darin die Sammlung zugänglich zu gestalten und ebenfalls ein Konzept für eine interaktive Schreibwerkstatt vorzuschlagen.

Screenshot from 2023-01-29 23-13-16.pngScreenshot from 2023-01-29 23-13-16.png
Screenshot from 2023-01-29 23-13-37.pngScreenshot from 2023-01-29 23-13-37.png


Konzept

Der Grundsatz des Konzeptes liegt darin, dass den Gedichten der Kinder und Jugendlichen die gleiche Wertschätzung gegeben wird, wie der Lyrik von älteren Menschen.

Zum Einen bedeutet das die Zielgruppe zu erweitern, in dem Sinne, dass diese Lyrik von jungen Leuten kommt, aber trotzdem über diese Gruppe hinaus Relevanz hat. Dies findet sich besonders in der visuellen Gestaltung wieder, da die Website nicht zu verspielt oder kindlich sein sollte. Dieses Verständnis über eine Erweiterung der Zielgruppe hat auch zur Folge die Altersgruppen aufzulösen.

Zum Anderen äußert sich der Aspekt im Konzept für die interaktive Schreibwerkstatt (Schreibtisch). So, wie im Wettbewerb Gedichte von Erwachsenen als Inspiration vorgestellt werden, soll die junge Lyrik als Inspiration für Neues behandelt werden.

Die Sammlung und der Schreibtisch sollten nicht zu weit getrennt sein, weshalb sie praktisch auf der selben Ebene existieren. Die Website ist also durch einen Split Screen zweigeteilt mit der Möglichkeit die Ansicht zu wechseln oder den Bildschirm frei aufzuteilen.

Das grundlegende Navigationsprinzip für beide Bereiche ist eine frei navigierbare Ebene. In der Sammlung werden die Gedichte in Containern ausgelegt mit der Möglichkeit nach verschiedenen Kriterien zu filtern. Aus den Gedichten (und Impulsen) können Wörter gesamplet werden. Diese werden auf dem Schreibtisch angezeigt. Zusätzlich gibt es die Möglichkeit basierend auf der Sammlung neue Gedichte zu generieren oder geschriebene Gedichte zu modifizieren. Daraus soll sich Inspiration ergeben dort neue Lyrik zu verfassen.


Prozess

Die Inspiration für das Auslegen der Gedichte auf einer virtuellen Schreibtischfläche entstammte aus dem Paper The Document Lens von George G. Robertson und Jock D. Mackinlay. 

This paper describes a general visualization technique based on a common strategy for understanding paper documents when their structure is not known, which is to lay the pages of a document in a rectangular array on a large table where the overall structure and distinguishing features can be seen. Given such a presentation, the user wants to quickly view parts of the presentation in detail while remaining in context.

Screenshot from 2022-11-12 21-54-57.pngScreenshot from 2022-11-12 21-54-57.png

Das Konzept für den interaktiven Schreibtisch entsprang aus dem Sampling, wie es in der Musik zu finden ist, und frühen digitalen, generativen Ansätzen des Dichtens. Nennenswert wären die Cut-Up Methode, ELIZA von Joseph Weizenbaum, die ersten generierten Gedichte von Theo Lutz, und auch der mehr als etwas absurde Gedichtgenerator Poetron.

Ein passendes Detail aus dem SZ-Artikel über Theo Lutz:

Die Inspiration dafür entsprang dem studentischen Kulturbetrieb. Lutz schrieb antifaschistische Beiträge für die Theaterbriefe des Kreisjugendrings Esslingen; von 1958 bis 1966 war er Chefredakteur der monatlich erscheinenden Jugendzeitschrift ja und nein.

Die ersten Wireframes skizzierten wir während der ersten Besprechung unseres Konzepts und bauten diese dann in Miro weiter aus. Die spätere Struktur der Seite ist hier schon eindeutig sichtbar.

2022-05-24-0009.jpg2022-05-24-0009.jpg
Screenshot from 2023-02-04 20-38-36.pngScreenshot from 2023-02-04 20-38-36.png

Den restlichen Gestaltungsprozess haben wir vollständig in Figma vollzogen, was sich definitiv als die größte Herausforderung darstellen sollte. Abgesehen davon konnten wir recht schnell unser visuelles Grundkonzept definieren um dann die Details zu verfeinern.

Lyrix-Process-FigmaBoard.jpgLyrix-Process-FigmaBoard.jpg
Lyrix-Process-Components.jpgLyrix-Process-Components.jpg

Die Gedichte sind in Boxen platziert, welche eine Maximalhöhe haben. Wenn diese erreicht wird, wird auf dem Gedicht unten ein Verlauf platziert.

Die Schrift ist die Mabry von Collophon Foundry. Die Texte und Navigationselemente sind im Regular-Schnitt, die Gedichtstitel im Light-Schnitt und die Generator-Ergebnisse in der Mono Variante gesetzt.

Lyrix-Process-Gedichte.jpgLyrix-Process-Gedichte.jpg
Lyrix-Process-Gedichte2.jpgLyrix-Process-Gedichte2.jpg
Lyrix-Process-Sammlung.jpgLyrix-Process-Sammlung.jpg

Zwischen der Sammlung und dem Schreibtisch kann mit einem animierten Übergang gewechselt werden. Die Schräge kann ebenfalls beliebig verschoben werden um den Bildschirm nach Belieben aufzuteilen.

ezgif-2-88467b8e86.gifezgif-2-88467b8e86.gif

Lyrix-Process-SchreibtischDraft1.jpgLyrix-Process-SchreibtischDraft1.jpg
Lyrix-Process-SchreibtischDraft2.jpgLyrix-Process-SchreibtischDraft2.jpg
Lyrix-Process-SchreibtischDraft3.jpgLyrix-Process-SchreibtischDraft3.jpg

Aufgrund der Wahl der frei navigierbaren Ebenen, ist die Mobilversion nicht groß anders als die Desktopversion. Die Navigation der Ebenen ist für Touch-Geräte sogar fast noch besser. Der Schreibtisch erscheint wegen des Hochformats von unten. Die einzige wirkliche Veränderung liegt in der Anordnung der Menüs. Diese sind etwas touch-freundlicher organisiert, sodass sie durch swipen einfach navigiert werden können.

Lyrix-Process-Mobil.jpgLyrix-Process-Mobil.jpg

Wortung

In der Wortung der Website entschieden wir uns grundsätzlich gegen englische Wörter, da es sich um einen deutschsprachigen Wettbewerb mit einer jungen (ab 10 Jahren) Zielgruppe handelt. Die beiden Hauptelemente sind recht eindeutig mit Sammlung und Schreibtisch betitelt. Schwieriger war es beim Samplen, wo wir uns für merken entschieden, welches sprachlich lediglich nicht mehr ganz so nah an der Ursprungsidee liegt, aber für die Altersgruppe besser funktioniert. Auf dem Schreibtisch haben wir den Menüpunkt für Textmodifikationstools Verwandlung und den für die Credits der Samples Andichtung genannt, um auch etwas poetischere Wortungen aufzugreifen.

Der eigentliche Titel der Website sollte ly:remix sein. Dort empfanden wir das englische Wort als akzeptabel, da es durch die Populärmusikkultur ein ausreichend verständliches Wort ist. Allerdings funktionierte dieser Titel in der Wortmarkenfindung in keiner Variante wirklich gut, weshalb wir es auf Lyre abgekürzt haben. Dieses aktuelle Logo bedürfte in unseren Augen noch mehr Arbeit, da es momentan auch nur so halb gut funktioniert.


Screens

Auf der Startseite wird unter dem Willkommenstext ein zufällig ausgewählter Vers aus einem Gedicht angezeigt um das Prinzip des Samples von Anfang an aufzugreifen.

01-startseite.png01-startseite.png
05-hauptmenü.png05-hauptmenü.png
06-impressum.png06-impressum.png

Um zu samplen und ein längeres Gedicht vollständig zu lesen, muss es ausgewählt werden. Aus den Impulsen kann ebenso gesamplet werden.

02-sammlung.png02-sammlung.png
03-ausgewähltes gedicht.png03-ausgewähltes gedicht.png
07-merken.png07-merken.png
04-impulse.png04-impulse.png

Der Splitscreen ist frei verstellbar.

08-schreibtisch.png08-schreibtisch.png

Die Kriterien für den Generator auf dem Schreibtisch und die Filter in der Sammlung sind identisch ausgelegt. Auf dem Schreibtisch gibt es zusätzlich noch weitere Tools, wie die Verwandlung (z.B. ein Shuffle als Cut-Up Technik) oder die Andichtung um wieder zu den originalen Gedichten der Samples zu kommen. Außerdem lassen sich geschriebene Gedichte auch abspeichern, entweder als Text-Datei oder als Bild direkt für Social Media.

09-schreibtisch menü.png09-schreibtisch menü.png
12-schreibtisch generator.png12-schreibtisch generator.png

13-sammlung filter.png13-sammlung filter.png

Das Farbthema der Website ist anpassbar. Es kann aus einer Palette ausgewählt werden, die dazugehörige annähernd komplementäre Farbe wird automatisch eingestellt. Zudem kann zur Barrierefreiheit zwischen Hell-, Dunkel- und einem Hochkontrast-Theme entschieden werden.

14-theme.png14-theme.png
15-theme.png15-theme.png
16-theme hell.png16-theme hell.png
17-theme contrast.png17-theme contrast.png


Animierter Prototyp


Fazit

Figma

Zwar super doch zermalmt.
Sie designen,
Sie rattern!?
Und rattern den Keller.
Ja super Figma!
Und Keller
Zu zermalmt und Marco und Tilmann sind wohl schuld!

Gedicht Nummer 13847249

Fachgruppe

Kommunikationsdesign

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuung

foto: Prof. Susanne Stahl

Zugehöriger Workspace

lyrix + FH;P

Entstehungszeitraum

Wintersemester 2022 / 2023