Konzept

Mein Konzept hat sich über den Verlauf des Projektes immer wieder geändert. Bereits bei der Erstellung meiner Sitemap musste ich immer feststellen, welche Dinge funktionierten und welche eher nicht. Dieser Prozess wiederholte sich im gesamten weiteren Verlauf des Projekts, sei es bei den ersten Wireframes oder bei kleinen Modulen innerhalb der Seite, wie z.B. das Menü.

Zuallererst war es mir wichtig, die Funktionen der Seite zu durchdringen. Daher habe ich verschiedene Sitemaps erstellt und daraus ein Konzept und die Gestaltung abzuleiten. Ich machte den Fehler, die Altersgruppen unterteilen zu wollen, obwohl dies nicht erforderlich war. Auch habe ich viele verschiedene Richtungen ausprobiert, was mich am Ende sehr viel Zeit gekostet hat. Schlussendlich bin ich beim Konzept des Lyrix Space gelandet!

Wireframes

100 und 1 Wirframe

Wie man im Verlauf der Wireframes sehen kann, habe ich sehr viele verschiedene Konzepte ausprobiert und im Nachhinein habe ich hier am längsten dran gesessen. Ich hatte Anlaufschwierigkeiten mich auf ein Konzept festzulegen, da ich immer wieder auf neue Probleme gestoßen bin, die dazu geführt haben, dass ich ein Konzept überwerfen musste.

Wireframes  Version 1.0

Aufbau in Splitscreen für die verschiedenen Altersklassen. Idee das man eine Seite öffnet und dort sich die Gedichte der jeweiligen Altersklasse verstecken.

Wireframes 2.0

Erste Idee war die des Lyrix Labors. Es handelt sich um eine klassische Startseite mit Darstellung aktueller Gewinner*innen, sowie POP-Up Windows als mit Verlinkung zu Unterseiten.

Das Menü wäre zweigeteilt zwischen der Werkstatt und der Sammlung. Ich habe die Idee überworfen, da der Aufbau viel zu statische war. Auch die Sortierung der Sammlung, mit Formen, nach Jahren war unsinnig, da man durch etwas angezogen werden muss und das Jahr nicht ausschlaggebend ist.

Wireframes 3.0

Hier hatte ich die kurze Idee eines offenen Raums, bei dem man sich durch die aktuellen Gedichte durch navigieren kann mit draggen. Hier war die Sortierung ein großes Hindernis gewesen, wenn bspw. Mai Gedicht aktuell ist.

„WIREFRAMES“ der Zwischenpräsentation

Ausgearbeitete Wireframes von Version 2.0.

Visuelle Gestaltung des Labors soll durch Illustrationen, Farbgebung, Schriften unterstützt werden. Außerdem Beibehalten der POP-Up Windows mit Informationen oder Verlinkungen.

Startseite:

• Landingpage mit illustrativen & spielerischen Einstieg
• Scroll through Seite mit kleineren Interaktionen
• Horizontales Scrollen + PoP Up Fenster
• Farbgebung noch nicht final

Ansatz habe ich überworfen, da der Aufbau kein wirkliches Konzept verfolgt hatte und mir die Seite zu langweilig und unpassend vorkam.

Sammlung:

• Kachelansicht mit übergeordnetem Filter
• Ansichtswechsel von 2 - 3 -4 Gedichten als Übersicht
• Sortierung nach aktuellsten oder random

Wireframes 4.0 - finale Wireframes SPACE

Erste Überlegungen eines fixed Menüs auf der linken Seite. Zusätzlich Aufzeigen der Gedichte durch „Kacheln“, welche bei Klick sich öffnen und innerhalb der Startseite sich öffnen und das Klicken zum vorherigen und nächsten Gedicht ermöglichen.

Entwürfe

Entwurf Lyrix Space

Mit dem Lyrix Space habe ich einen neuen Ansatz entworfen. Dafür bin ich nochmal in die Recherche gegangen und habe Inspirationen gesammelt, sowie den Entschluss gefasst mich von der alten Schriftart und Gestaltung zu lösen. 

Entscheidend für den Entwurf ist das fixierte Menü auf der linken Seite, sowie die Gedichtspillen, welche auf dem Hintergrund „schweben“. In den unten gezeigten Entwürfen habe ich mehrere Varianten ausprobiert, inwiefern User*innen, nach Öffnen eines Gedichts, zu den nächsten Gedichten gelangen können.

Zuklappbares Menü Varianten

Hier habe ich mehrere Varianten für ein variables Menü durchgespielt, welches sich zusammenklappen sollte, um den Gedichten mehr Platz zu lassen.

Umsetzung

Lyrix Space soll ein Ort für junge Dichter*innen sein, in dem sie sich frei, in ihrer Galaxie, bewegen können, einen kleinen Schritt für junge Dichter*innen tun und somit ein großer Schritt für die Lyrik!

Visuelles Konzept:

Es gibt verschiedene Elemente (Menü, Gedichtkarten, etc.) , die frei auf dem Hintergrund „schweben“. Die dazugehörige Schriftmischung besteht aus der Pano, die durch die Laufweite der einzelnen Buchstaben an Space oder Nasa erinnert, zusätzlich zu der Input Mono, welche den Raumschiff Charakter unterstreicht.

Beim Farbkonzept wollte ich nicht zu sehr ins Klischee von Weltraum eintauchen und Schmuckelemente, die von den eigentlichen Gedichten ablenken, einbauen oder die Seite zu dunkel (schwarzer BG wegen Universum) umsetzen. Stattdessen habe ich mich für ein Violett (mit mehr Blau als Rosa Anteil), sowie einem Zitronengelb entschieden. Ich habe sehr lange an der Farbgebung gesessen, da durch das Sticky Menü die aufgeklappten Gedichtskarten nebeneinander stehen und es daher schwierig war aktive und inaktive Farben festzulegen, die sich gleichzeitig nicht beißen. Auch in Bezug auf die Lesbarkeit musste ich viele Farben ausschließen, da diese beim aufgeklappten Gedicht nicht gerade leserlich waren.

Aufbau der Seite:

Menü:

• Menüpunkte heißen Themengerecht Basis, Speicher und Expedition.
• Menü immer Sticky auf den Seiten und Änderung der Funktion je nach Seite
• Verkleinerbar um Gedichten mehr Platz zu geben 

Basis:

• Einführung in die Seite durch kurzen Intro Text

  Logo verschiebt sich beim scrollen in den Header

  Hauptaugenmerk auf die aktuellen Monats-Gewinner*innen

• Fixes Menü auf der linken Seite mit Anchor-Links

• Bei Klick Öffnung eines einzelnen Gedichts & unterhalb weiterer Verlauf Webseite

• Zusätzlich Infos über Monatsimpuls & Lyrix

Speicher:

• Sammlung aller Gedichtsgewinner*innen
• Übergeordneter Filter für A-Z oder Zeitpunkt
• Über Menü Suche oder Feinfilterung möglich
• Zugeklapptes Menü zeigt Monatsthemen an, jedoch Filterung nur über großes Menü möglich

Expedition:

• Verschiedene Schreibspiele die die Kreativität anregen sollen
• Undenkliches Gedicht: kollaboratives Gedichteschreiben mit anderen User*innen
• Gefühlsmaschine: Schreiben aus einem Gefühl heraus zu vorgegeben Begriffen
• Blinde Kuh: Einlassen auf die Umgebung und Förderung des „Drauflos-Schreibens“

Mobile Screens:

• Menü ist oben fixiert und lässt sich aufklappen
• Hover Effekt bei jeweiligen Gedicht fällt weg
• Keine direkte Anchor, sondern Steuerung durch scrollen oder Menü

Link zur XD File (interaktiv + Klickbar):

Link zur Abschlusspräsentation von Lyrix: https://drive.google.com/drive/folders/1S_381MvocYFvaB_J55ClRBAtSbu-hD2j?usp=sharing

Finale Entwürfe

Startseite

Speicher

Expedition

Mobile-Startseite

Barrierefreiheit

Durch den relativ einfachen und klaren Aufbau der Webseite musste ich in Bezug auf die Barrierefreiheit keine sehr großen Eingriffe in die Webseite vornehmen. Die ergänzen Feature sind zum einen das Ausstellen der Farbigkeit und somit einen Graustufenmodus. Dieser lässt sich zusätzlich in den Darkmode verstellen. Zusätzlich gibt es die Möglichkeit, sich die Texte vorlesen zu lassen und die Schriftgröße zu vergrößern.

Natürlich sind dies nur erste Überlegungen und berücksichtigen nicht alle Hilfsmittel für eingeschränkte Menschen. Allein der Punkt leichte Sprache ist im Kosmos Lyrix gänzlich zu überdenken, da sich die Frage stellt, wie dies für die Gedichte angewendet werden könnte oder überhaupt sollte.

Fazit

Während des Projekts gab es viel Auf und Ab und ich hatte oftmals das Gefühl auf der Stelle zu stehen. Dennoch bin ich zufrieden mit der finalen Richtung, obwohl ich rückblickend auch bei anderen Ansätzen das Potenzial erkenne. Das Gefühl nicht fertig zu sein begleitet mich bei vielen Website/App Projekten, da man immer noch an Stellen optimieren kann. Daher habe ich auch hier das Gefühl, einen Abschluss finden zu müssen, da man dieses Projekt sehr lange ausarbeiten könnte.

Es wäre auch interessant herauszufinden, inwiefern die Entwürfe angepasst werden müssten, falls es zu einer Programmierung käme.