01 Arbeitstitel und Titelbild
Arbeitstitel: Gendern
Titelbild:
02 Grundideen
Die Grundideen für dieses Projekt waren:
1) Eine Storytelling Website, welche die Geschichte der Gendersprache und kulturelle Unterschiede darstellt
2) Eine Anwendung, die geschlechterneutrale Sprache mit Pronomen und verschiedene Ausdrücke beibringt
3) Eine Storytelling Website, die Stereotypen der Geschlechter darstellt und aufbricht
4) Eine Anwendung für Designer*innen, die Unterstützen soll, geschlechterneutral zu designen
03 Kurzbeschreibung Projekt
Das Projekt untersucht die Entwicklung der Gendersprache im Deutschen im Laufe der Zeit. Es analysiert, wie sich sprachliche Strukturen und der Gebrauch von geschlechtsspezifischen Ausdrücken verändert haben, um eine inklusivere Kommunikation zu fördern. Im Fokus stehen dabei historische Entwicklungen, verschiedene Schreibweisen, die sich zum Gendern eignen und aktuelle Trends rund um das Thema Gendersprache. Zusätzlich werden kulturelle Unterschiede in genderneutralen Formulierungen in unterschiedlichen Sprachen aufgegriffen, um darzustellen, wie in unterschiedlichen Sprachen geschlechtsneutral formuliert werden kann. Ziel ist es, einen Überblick der deutschen Gendersprache zu geben, verschiedene Sprachen zu vergleichen und darauf aufmerksam zu machen, dass sich die Sprache ständig weiterentwickeln muss, um sich der Gesellschaft anzupassen.
04 Ausgangssituation, Problem, Lösung
Die Geschichte der gendergerechten Sprache zeigt eine Entwicklung weg von traditionellen Sprachmustern hin zu mehr Vielfalt, Diversität und Inklusion. Traditionell wurde das generische Maskulinum verwendet, was mittlerweile nicht mehr als inklusiv gilt, denn es implizit Geschlechterrollen und Stereotypen, die nicht mehr den heutigen gesellschaftlichen Vorstellungen entsprechen. Neue Schreibweisen wie das Gendersternchen oder der Doppelpunkt sollen dies ändern, stoßen jedoch auch auf Widerstand. Die Geschichte des Genderns zeigt, dass diese Bemühungen nicht plötzlich aufgetaucht sind, sondern dass sie das Ergebnis langjähriger Entwicklungen sind. Von frühen feministischen Bewegungen bis hin zu aktuellen sozialen Bewegungen und wissenschaftlichen Untersuchungen wurde die Rolle der Sprache bei der Reproduktion von Geschlechterrollen und -stereotypen zunehmend hinterfragt.
05 Recherche, Inhalte, Daten, Quellen
06 Storyline, Spannungsbogen, Gliederung, Ordnungssysteme, Mindmaps, ...
Ordnungssystem:
chronologische Darstellung der Entwicklung der genderneutralen Sprache
Gliederung der Website:
07 Moodboards
Das erste Moodboard arbeitet mit bunten Farben und Überlagerungen hauptsächlich vor schwarzem Hintergrund. Bei Zweiten wird ein eher skizzenhafter, zeichnerischer Stil gewählt. Das dritte Moodboard ist zweifarbig in Schwarz-Weiß gehalten und benutzt große Typo. Das vierte Moodboard beinhaltet bunte Farben und flächige Formen, die sich aus Schriften ableiten lassen. Das fünfte Moodboard greift den Glass-morphism effekt auf, bei welchem ein Farbverlauf im Hintergrund ist.
08 Skizzen, erste Layouts, erste Prototypen
Wireframe:
Der Wireframe orientiert sich an der Gliederung der Inhalte. Die Website beginnt mit einer kurzen Einführung in das Thema „Gendern“ und steigt dann im Jahr 1960 in die erste Genderschreibweise ein. Darauf folgen dann chronologisch geordnet verschiedene Schreibweisen und Besonderheiten. Die Themen werden entweder mit Animationen oder Statistiken/ zusätzlichen Informationen in Kästen gebrochen. Zu jedem Kapitel ist auch ein Audio generiert (ttsmaker.com) worden, welche den dazugehörigen Abschnitt kurz zusammenfasst und einen Beispielsatz vorliest.
09 Designvarianten
erste Entwürfe:
Die ersten Designentwürfe orientieren sich an den Moodboards. Die erste Variante arbeitet mit drei Farben und einem Überlagerungseffekt, die Zweite mit flächigen, eher Runden Formen, die dritte Variante mit gezeichneten 3D-Formen und die vierte Variante mit dem glass-morpism Effekt und Sonderzeichen mit einem 3D-Effekt.
Im Anschluss darauf sind weitere Designvarianten mit den Entwürfen 1, 2 und 4 entstanden:
Die erste Variante benutzt hier die Farben Pink, Gelb und Blau und arbeitet mit Kästen, die den Rhythmus brechen sollen. Die Zweite Variante ist ähnlich geblieben, verwendet hier aber eine andere Typo. Die Variante mit dem Glass-morphism Effekt ist hier deutlich bunter geworden und verwendet ebenfalls eine andere Typo.
Daraufhin wurde die Designvariante 1 weiter ausgearbeitet:
Zwischenpräsentation - Design:
Für die Zwischenpräsention war das Design in Figma soweit fertig. Die Audios sind bei https://ttsmaker.com/de generiert worden. Die zweite Tonspur in der Website ist ein Ausschnitt aus dem Podcast https://www.youtube.com/watch?v=QK6wQZZUvnc ab 01:15:10. Außerdem ist noch eine Aufnahme eines Screen readers als Audio vorhanden (beim Doppelpunkt)
Figma-Link:
10 finales Design
Finales Design in Figma:
Link zum Figma-Prototyp:
11 Prototyp Figma Screencast
12 Finaler Prototyp / Link Figma, Webflow
Link-Figma:
Webflow-Link:
13 Styleguide
Die Website verwendet die Farben Gelb, Pink und Blau und Schwarz & Weiß jeweils für den Hintergrund und die Schrift. Außerdem wird vor schwarzem Hintergrund mit dem Farblayer „Lighten“ gearbeitet und vor weißem Hintergrund mit einer einfachen Überlagerung der Farben (da in Webflow der Layer „Hard Light“ nicht funktioniert hat).
Als Schriftart wurde die Willump in den Überschriften und die Soleil in dem Fließtext verwendet.
Die Website nutzt ein 14 spaltiges Raster, wobei aber die inneren 12 Spalten für den Inhalt sind und die zusätzlichen 2 am Rand für die bunten Kästen.
Die Components arbeiten mit den Überlagerungen der drei Farben Gelb, Pink und Blau.
14 Screencast
In dem Screencast sind die Auflösungen 1470px, 1022px, 768px, 568px und 320px abgebildet. Zusätzlich ist noch eine für 1920px erstellt worden, die nicht in den screencasts abgebildet ist.
Um die Karte für die kulturellen Unterschiede in Webflow einbinden zu können, ist sie in flourish.studio erstellt worden, in welchem die Schriftarten für die Popups per code eingefügt wurden. Nach einigen Tests hat sich herausgestellt, dass die Schriftart in der Karte nur dann korrekt zu sehen ist, wenn sie auf dem Gerät installiert sind.
