Wording

Ein sogenanntes Archiv und eine Spielelounge sollte es geben. Doch für eine Organisation, die sich mit Lyrik von und für Jugendliche beschäftigt braucht es auch sprachlich angemessene Begriffe. Das „Archiv“ klingt zu traditionell und verstaubt für die Zielgruppe und auch englische Begriffe scheinen eher unpassend. Genauso fühlten sich viele andere Optionen, wie zum Beispiel Studio oder Atelier einfach nicht richtig an.

Wochenlang machte ich mir Notizen und Skizzen zum Thema. Und dann tatsächlich wurde ich fündig. Erst kam mir die Idee „alles lyrix“ doch dann wurde ich spezifischer:

Der PoeTisch:
hier können sich Dichter*innen und auch solche, die welche werden wollen, gemeinsam an den Tisch setzen - oder auch ganz für sich

VielSeitig:
VielSeitig ist die Sammlung von Lyrix: Schon über 1400 Gedichte haben sich allein unter den Gewinner*innen angesammelt und es werden stetig mehr

Struktur

drittes Bild am aktuellsten

Die Planung der Sidemap via Miroboard half mir im Gestaltungsprozess etwas mehr Klarheit zu schaffen. Trotz dessen änderte sie sich bis ganz zum Schluss immer wieder.

Inspiration

Ich trat mit Lyrix in Kontakt und erkundigte mich nach den Fonts auf ihrer Website. Dann fragte ich nach, ob ich die bisherigen Publikationen als Printexemplar zur Verfügung gestellt bekommen könnte und sie sendeten mir freundlicherweise das aktuellste Buch zu. Die anderen schaute ich mir online an und fand auch auf der bestehenden Website Inspiration.

Der Workshop zu Beginn des Seminars unter der Leitung von Gestalterin und Programmiererin Katharina Nejdl lieferte wertvollen Input und gab mir  Möglichkeiten mich auszuprobieren. Dort lernte ich FIGMA im Detail kennen - ein UI-Designtool, was inzwischen von Adobe aufgekauft wurde. Gemeinsam entwickelten wir Wireframes zu Poesie von Lyrix und besprachen die Vorteile von Webgestaltung.
Ich bekam das Gedicht „und wenn du dabei stirbst“ von Ruta Dreyer zum Monatsthema „wie ein falter das licht“. Es entstand dieser Clickdummy.

Susanne Stahl stellte uns jede Woche spannende Plattformen vor, gab dazu theoretischen Input und machte uns auf Gestaltungsmöglichkeiten aufmerksam. Außerdem lud sie einen ehemaligen Studierenden Jonas Pelzer ein. Dieser stellte seine Digitalisierung des Post self evident poem von Guy Bennett dem Kurs vor. Ich fand es spannend Gestaltende zu ihren Entscheidungen fragen stellen zu können.

Hier folgen einige weitere meiner Lieblingsinspirationen:

https://a-z-presents.com/#goods

https://parsons.github.io/pedagogy-and-computation/

https://flurinabadel.andshymagazine.com/

https://www.threequestions.ixdm.ch/

Auch andere Studierende machten mich auf interessante Seiten oder Designer*innen aufmerksam. Danke an Tilmann Finner für den Input in Blender.

https://www.hellomonday.com/

https://velvetyne.fr/

Konzept

Mobile first
Um die Zielgruppe zu erreichen gab es mehrere Möglichkeiten. Eine für mich wesentliche davon war  ganz klar die Optimierung für das Handy.

Außerdem half die Reduzierung auf die kleinere Fläche mir in meinem Designprozess dabei, mich auf die wichtigsten Elemente der Website zu fokussieren: Content first.

Website für Jugendliche
Mit einer der Farben des Jahres 2023 ganz im Trend: die Wahl fiel für mich auf das CHERRY TOMATO von Pantone. Ein stark gesättigter Rotton, der genau zwischen hell und dunkel liegt.

Im Fokus stand bei mir eine einfache Bedienung mit starken Effekten. So entstanden schnell interaktive Elemente und die Idee für unterhaltsame und doch kurz und knackige Animationen.

Durch die Downloadfunktion im Spielbereich von Text als .JPG  .TXT oder ggf. als .GIF  wird Content teilbar mit Freunden oder über Social Media.

Das Gegenteil von  Wettbewerb
Der Konkurrenzgedanke sollte auf der Seite komplett verschwinden. Die Unterscheidung von Monats- und Jahres-Gewinner*innen ist hier deshalb von mir nicht vorgenommen worden. Damit die Gedichte als lyrische Kunstwerke zur Geltung kommen, verzichte ich außerdem auf den Fokus oder die Verlinkung zu den Monatsthemen und den vorherigen Input.

Das Barrierefreiheitsmenü ist von überall auf der Website abrufbar und gewährleistet so eine bessere Zugänglichkeit. 

Kurze freundliche Informationen begleiten die User*innen durch die Seite und sollen bei der Orientierung helfen. 

Auch LYP, den ihr später kennenlernen werdet, als Maskottchen dient als optionale Unterstützung die sich nicht zu sehr in den Vordergrund drängt. Interagiert man mit ihm, stellt er sich vor und bietet Hilfe an, doch auch ohne ihn kommt man ans Ziel.

erste Entscheidungen

Wireframes

Erste Visualisierungen zum grundlegenden Konzept entwarf ich in FIGMA zunächst bewusst farblos.

Ich legte zu Beginn ein Layout für die Desktopversion in InDesign an.

Farbe

Farben wirken auf uns bekanntlich subjektiv, laut den Expert*innen vom Pantone Color Institute allerdings verbinden die Farbtöne dieser Saison Tradition mit Innovation und unser Bedürfnis nach lebendiger Positivität mit beruhigenden, getönten Farben. Somit auch das bereits erwähnte CHERRY TOMATO. Mehr dazu hier.

Wenn man das CHERRY TOMATO invertiert erhält man einen sanften und pastellig anmutenden Blauton. Im finalen Entwurf schließlich passte ich diesen im Sinne der Barrierefreiheit im Kontrastverhältnis weiter an.

Ich griff für die Augenfreundlichkeit zu sanften Weiß- und Schwarztönen.

Folgende Entwürfe
Von nun an galt es der Überarbeitung vorangegangener Ideen und der weiteren Ausarbeitung und Gestaltung.

Desktop

mobil

Font

Zunächst experimentierte ich mit der Schrift Millimetre der französischen Type Foundry Velvetyne, gestaltet von Jérémy Landes. 

In Anlehnung an die Schrift des Lyrix-Logos einerseits und andererseits aufgrund der unverwechselbaren Eigenheit der Kurven und des Schnitts fiel meine Entscheidung dann zusätzlich auf die Diatype Rounded Mono. Eine sehr gut lesbare und verspielte Schrift aus dem Hause ABC DINAMO:

Diatype Rounded is a warm, curvy sans with friendly shapes informed by the Swiss Neo-grotesque genre and pre-digital typesetting machines. The overall vibe is bold, a little pop, and has an understated sense of humor to it. These rounded forms feel oddly mechanical — as if each character has been engraved with a chunky tool in one continuous line. We buffered the little beauties one by one 💅

mehr Informationen hier.

Später entschied ich, mich auf eine Schrift und einen Schnitt festzulegen und dort alles rauszuholen. Es wurde die Diatype Mono in Medium.

Der finale Entwurf

Auch zwischen der Abschlusspräsentation und der finalen Dokumentation auf Incom machte mein Entwurf nochmal große Sprünge und einige doch entscheidende Elemente wurden von mir ergänzt.  Viel Spaß also beim Entdecken all der neuen Entwicklungen und Anpassungen!

VielSeitig

Startseite

Auf der Startseite findet man nun oben links das Barrierefreiheitsmenü, rechts unseren LYP und mittig steht die Information, wo ich mich gerade befinde. Es folgt ein knapper und freundlicher Text mit Hinweisen für die Zielgruppe. Dieser verschwindet dann, sobald man sich auf der Website weiterbewegt bzw. nach unten scrollt.

Filter

Darauf folgt das Filter-Element. Bei Berührung öffnen sich die Optionen Alter, Jahr und Monat.  Hier eine am Desktop klickbare Beispielanimation vom Filter erstellt in Adobe XD.
(Falls die Animationen hängen bleibt kurz refreshen. XD ist mit komplexen Animationen zu Beginn z.T. überfordert)

Gedicht

Wählt man eines der Gedichte aus, wird es von einem Blobb erobert und gemeinsam verschaffen sie sich dann Platz im Layout.

Das kleine Pfeil-Icon am Ende des Gedichtes bringt dich wieder zur ersten Zeile. Darunter geht die Liste mit den Gedichten weiter und du kannst ein weiteres Gedicht anklicken. Das alte schließt sich dann automatisch.

Footer

Erreichst du das Ende der Website, bewegt sich dir der Footer entgegen und offenbart die Social Media Kanäle und Kooperationspartner der Seite.

Um sich den Bewegungsablauf besser vorstellen zu können, hier eine grobe Animation vom Footer in XD.

PoeTisch

Der PoeTisch ist in seinen Elementen ähnlich aufgebaut wie VielSeitig. Das verbessert die Usability. Er unterscheidet sich optisch vor allem durch die Farbe von der anderen Seite.

Startseite

Filter

Diesmal kannst du zum Beispiel durch Kategorien filtern. Diese können zum Beispiel „Schreiben“, „Lesen“, „Philosophieren“, „Grübeln“ oder etwas ähnliches sein. Außerdem kannst du entscheiden, wieviel Zeit du circa mitbringst und wählen ob das Spiel „kurz“, „mittel“ oder „lang“ dauern soll. Eine interessante Möglichkeit stellt auch die Wahl der Spieleranzahl dar, wie: „allein“ zu zweit als „Duo“ oder als „Gruppe“.

Die Filter kannst du jederzeit wieder entfernen indem du einfach auf das X drückst.

Spiel

Andere Ikons die stören oder ablenken könnten, verschwinden aus dem Spielbildschirm. 

Die Aufgaben öffnen sich Schritt für Schritt und werden dir freundlich kommuniziert. Sie sind bisher immer zusammengesetzt aus einer Frage und einer Aufforderung. Außerdem sind sie knapp und leicht verständlich gehalten, ermöglichen aber trotzdem eine komplexe Ausarbeitung.

Beispielhaft habe ich hier eine Möglichkeit mit dem traditionellen Spiel „Teekesselchen“ lyrisch umzugehen ausgearbeitet.

Kopieren des Textes ganz intuitiv: über Fingerwischen markieren - Das Speichern wird automatisch angezeigt

weitere Spiele

Andere Ideen waren:

• eine Mücke zum Elefanten machen / Kannst du die Bedeutung steigern?
• Anglizismus / Findest du eigene Worte für diese Begriffe?
• Das Wort im Mund umdrehen / Schaffst du Bedeutung zu verdrehen?
• Wortsalat / Siehst du hier Zusammenhänge?
• Versfabrik / Was machst du aus Versen anderer junger Dichter*innen?

Barrierefreiheit

Mit dem Barrierefreiheitstool überprüfte ich das Kontrastverhältnis der gewählten Farben auf Lesbarkeit von Grafik und Schrift. Genauso stellte ich sicher, dass die Farbtöne für Farbenblinde geeignet sind.

Ich entschied mich die Schriftgrößen vorsichtshalber eher etwas größer zu wählen und  auch beim Schriftschnitt ging ich mit Medium auf Nummer sicher bezüglich des Kontrastverhältnisses. 

Die Website ist so gedacht, dass man stets über die gewohnte Steuerung zusätzlich zoomen kann (Geräteabhängig, z.B. mit zwei Fingern ziehen).

Hier siehst du das Öffnen / Schließen vom Menü zur Veranschaulichung.

Im Entwurf schuf ich Platz für Feedback und Anregungen zum Thema Zugänglichkeit. Außerdem könnte das Menü natürlich noch um weitere Optionen ergänzt werden.

Der Animation-Stop verhindert jegliche Bewegungen auf der Website und der Graustufenmodus kann sowohl mit dem Dunkelmodus als auch dem hellen Modus kombiniert werden.

LYP

Lyp entstand in meiner Phase des Notierens und Skizzierens - aus dem Logo des Lyrix-Wettbewerbs. Ich kam nicht umhin, nachdem ich ihn nun einmal gesehen hatte, die Nase und das Monokel in dem Markenzeichen wiederzuerkennen. Egal ob als Figur oder Schriftzug verstanden, er schafft einen hohen Wiedererkennungswert.

Lyp kann dich zur Suche weiterleiten oder in den jeweils anderen Bereich der Seite (den man übrigens wie in vielen Apps auch einfach über das Wischen erreichen kann). Außerdem kann er dir etwas zufälliges vor die Nase setzen  und dich hoffentlich damit inspirieren.

Im Eingabefeld der Suche blinkt der klassische Strich als Zeichen für die Interaktionsmöglichkeit und beim Schließen des Fensters verabschiedet sich Lyp mit einem Tschüss! von dir.

Desktop

Bei der Desktopvariante handelt es sich um einen klassischen Splitscreen.

Die Maus wird von einem Blobb begleitet, der mit den Elementen auf der Seite interagiert. Ergänzend hinzu kommen die Hover-Effekte der Blobbs.

VielSeitig

Beim Anwählen verschafft sich das Gedicht mehr Platz und verdrängt den PoeTisch ans andere Ende. Die Nachwuchslyriker*innen und das offene Gedicht sind parallel im Fenster scrollbar.

PoeTisch

Auch die Spiele verschieben die Grenze und nehmen mehr Raum ein.

Danke

Da ich vom ersten Bildungsweg aus dem pädagogischen Bereich komme, sprach mich der Kurs und die damit verbundene Kooperation sofort an. Danke für diese einzigartige Möglichkeit, mich direkt höchst motiviert in die praktische Arbeit zu werfen. 

Als totaler Neuling im Webdesign bekam ich eine unglaubliche Menge an Inspirationen und Informationen. Von Figma bis XD, um dann doch zu bemerken, dass After Effects irgendwie besser und direkt Coding für die Animation der Blobbs viel einfacher gewesen wäre. Danach arbeiten in InDesign und Photoshop - allein technisch habe ich viel dazugelernt und habe wieder einmal bestätigt bekommen, dass das nie ein Ende haben wird - Probieren ist eben auch Studieren.

In diesem Sinne auch nochmal danke an die anderen Kursteilnehmer*innen! Es war spannend auch den Prozess eurer Arbeiten mitzuerleben und es ist unglaublich was dabei alles herausgekommen ist.

Die vielen Änderungen und der Feinschliff in den letzten Monaten haben sich für mich gelohnt. Am Ende (auch wenn man immer weiter arbeiten könnte) ist für mich ein Konzept und Entwurf entstanden, den ich gerne präsentiere und auf den ich stolz bin.