Incom ist die Kommunikations-Plattform der Hochschule Hof Kommunikationsdesign

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 Hof Kommunikationsdesign mehr erfahren

Gendern

Das Projekt untersucht die Entwicklung der Gendersprache im Deutschen im Laufe der Zeit.

01 Arbeitstitel und Titelbild

Arbeitstitel: Gendern

Titelbild:

titelbild.jpgtitelbild.jpg

02 Grundideen

Bildschirmfoto 2024-04-08 um 17.00.58.pngBildschirmfoto 2024-04-08 um 17.00.58.png
Bildschirmfoto 2024-04-08 um 17.09.29.pngBildschirmfoto 2024-04-08 um 17.09.29.png
Bildschirmfoto 2024-04-08 um 17.08.18.pngBildschirmfoto 2024-04-08 um 17.08.18.png
Bildschirmfoto 2024-04-08 um 17.06.08.pngBildschirmfoto 2024-04-08 um 17.06.08.png
Bildschirmfoto 2024-04-08 um 17.07.10.pngBildschirmfoto 2024-04-08 um 17.07.10.png
Bildschirmfoto 2024-04-08 um 17.08.09.pngBildschirmfoto 2024-04-08 um 17.08.09.png
Bildschirmfoto 2024-04-08 um 17.07.54.pngBildschirmfoto 2024-04-08 um 17.07.54.png
Bildschirmfoto 2024-04-08 um 17.08.45.pngBildschirmfoto 2024-04-08 um 17.08.45.png
Bildschirmfoto 2024-04-08 um 17.08.54.pngBildschirmfoto 2024-04-08 um 17.08.54.png
Bildschirmfoto 2024-04-08 um 17.05.15.pngBildschirmfoto 2024-04-08 um 17.05.15.png

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

recherche.pdf PDF recherche.pdf

06 Storyline, Spannungsbogen, Gliederung, Ordnungssysteme, Mindmaps, ...

Ordnungssystem: 

chronologische Darstellung der Entwicklung der genderneutralen Sprache

Bildschirmfoto 2024-05-24 um 11.03 1.pngBildschirmfoto 2024-05-24 um 11.03 1.png
storytelling_ux - Skizze Gliederung.jpgstorytelling_ux - Skizze Gliederung.jpg

Gliederung der Website:

gliederung.pdf PDF gliederung.pdf

07 Moodboards

storytelling_ux - moodboard5.jpgstorytelling_ux - moodboard5.jpg
storytelling_ux - moodboard1.jpgstorytelling_ux - moodboard1.jpg
storytelling_ux - moodboard3.jpgstorytelling_ux - moodboard3.jpg
storytelling_ux - moodboard4.jpgstorytelling_ux - moodboard4.jpg
storytelling_ux - moodboard2.jpgstorytelling_ux - moodboard2.jpg

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:

Bildschirmfoto 2024-05-27 um 15.06.21.pngBildschirmfoto 2024-05-27 um 15.06.21.png
Bildschirmfoto 2024-05-27 um 15.08.56.pngBildschirmfoto 2024-05-27 um 15.08.56.png
Bildschirmfoto 2024-05-27 um 15.08.20.pngBildschirmfoto 2024-05-27 um 15.08.20.png
Bildschirmfoto 2024-05-27 um 15.08.32.pngBildschirmfoto 2024-05-27 um 15.08.32.png
Bildschirmfoto 2024-05-27 um 15.08.41.pngBildschirmfoto 2024-05-27 um 15.08.41.png
Bildschirmfoto 2024-05-27 um 15.08.49.pngBildschirmfoto 2024-05-27 um 15.08.49.png
Bildschirmfoto 2024-05-27 um 15.09.02.pngBildschirmfoto 2024-05-27 um 15.09.02.png
Bildschirmfoto 2024-05-27 um 15.09.07.pngBildschirmfoto 2024-05-27 um 15.09.07.png
Bildschirmfoto 2024-05-27 um 15.09.14.pngBildschirmfoto 2024-05-27 um 15.09.14.png
Bildschirmfoto 2024-05-27 um 15.09.20.pngBildschirmfoto 2024-05-27 um 15.09.20.png

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.

Bildschirmfoto 2024-04-29 um 16.08.31.pngBildschirmfoto 2024-04-29 um 16.08.31.png
Bildschirmfoto 2024-04-29 um 16.09.16.pngBildschirmfoto 2024-04-29 um 16.09.16.png
Bildschirmfoto 2024-04-29 um 16.08.56.pngBildschirmfoto 2024-04-29 um 16.08.56.png
Bildschirmfoto 2024-04-29 um 16.08.50.pngBildschirmfoto 2024-04-29 um 16.08.50.png
Bildschirmfoto 2024-04-29 um 16.09.29.pngBildschirmfoto 2024-04-29 um 16.09.29.png
Bildschirmfoto 2024-04-29 um 16.09.22.pngBildschirmfoto 2024-04-29 um 16.09.22.png
Bildschirmfoto 2024-04-29 um 16.09.35.pngBildschirmfoto 2024-04-29 um 16.09.35.png
Bildschirmfoto 2024-04-29 um 16.09.42.pngBildschirmfoto 2024-04-29 um 16.09.42.png
Bildschirmfoto 2024-04-29 um 16.09.51.pngBildschirmfoto 2024-04-29 um 16.09.51.png

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.

Bildschirmfoto 2024-05-06 um 22.25.53.pngBildschirmfoto 2024-05-06 um 22.25.53.png
Bildschirmfoto 2024-05-06 um 17.42.08.pngBildschirmfoto 2024-05-06 um 17.42.08.png
Bildschirmfoto 2024-05-06 um 17.41.40.pngBildschirmfoto 2024-05-06 um 17.41.40.png
Bildschirmfoto 2024-05-06 um 17.41.57.pngBildschirmfoto 2024-05-06 um 17.41.57.png
Bildschirmfoto 2024-05-06 um 17.41.28.pngBildschirmfoto 2024-05-06 um 17.41.28.png
Bildschirmfoto 2024-05-06 um 17.41.48.pngBildschirmfoto 2024-05-06 um 17.41.48.png
Bildschirmfoto 2024-05-06 um 17.42.16.pngBildschirmfoto 2024-05-06 um 17.42.16.png
Bildschirmfoto 2024-05-06 um 17.42.28.pngBildschirmfoto 2024-05-06 um 17.42.28.png
Bildschirmfoto 2024-05-06 um 17.43.21.pngBildschirmfoto 2024-05-06 um 17.43.21.png
Bildschirmfoto 2024-05-06 um 17.43.01.pngBildschirmfoto 2024-05-06 um 17.43.01.png
Bildschirmfoto 2024-05-06 um 17.43.31.pngBildschirmfoto 2024-05-06 um 17.43.31.png
Bildschirmfoto 2024-05-06 um 17.43.53.pngBildschirmfoto 2024-05-06 um 17.43.53.png
Bildschirmfoto 2024-05-06 um 17.43.41.pngBildschirmfoto 2024-05-06 um 17.43.41.png
Bildschirmfoto 2024-05-06 um 22.25.01.pngBildschirmfoto 2024-05-06 um 22.25.01.png
Bildschirmfoto 2024-05-06 um 22.25.17.pngBildschirmfoto 2024-05-06 um 22.25.17.png
Bildschirmfoto 2024-05-06 um 22.25.10.pngBildschirmfoto 2024-05-06 um 22.25.10.png
Bildschirmfoto 2024-05-06 um 22.25.31.pngBildschirmfoto 2024-05-06 um 22.25.31.png
Bildschirmfoto 2024-05-06 um 22.25.46.pngBildschirmfoto 2024-05-06 um 22.25.46.png
Bildschirmfoto 2024-05-06 um 22.25.40.pngBildschirmfoto 2024-05-06 um 22.25.40.png

Daraufhin wurde die Designvariante 1 weiter ausgearbeitet:

Bildschirmfoto 2024-05-13 um 15.41.49.pngBildschirmfoto 2024-05-13 um 15.41.49.png
Bildschirmfoto 2024-05-13 um 15.41.57.pngBildschirmfoto 2024-05-13 um 15.41.57.png
Bildschirmfoto 2024-05-13 um 15.42.32.pngBildschirmfoto 2024-05-13 um 15.42.32.png
Bildschirmfoto 2024-05-13 um 15.42.04.pngBildschirmfoto 2024-05-13 um 15.42.04.png
Bildschirmfoto 2024-05-13 um 15.42.11.pngBildschirmfoto 2024-05-13 um 15.42.11.png
Bildschirmfoto 2024-05-13 um 15.42.25.pngBildschirmfoto 2024-05-13 um 15.42.25.png
Bildschirmfoto 2024-05-13 um 15.42.38.pngBildschirmfoto 2024-05-13 um 15.42.38.png
Bildschirmfoto 2024-05-13 um 15.42.48.pngBildschirmfoto 2024-05-13 um 15.42.48.png
Bildschirmfoto 2024-05-13 um 15.42.55.pngBildschirmfoto 2024-05-13 um 15.42.55.png

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:

https://www.figma.com/proto/Hg4TrGeDDnKOAw8n3oqk3Y/storytelling-gendersprache?page-id=125%3A2&node-id=390-749&viewport=296%2C146%2C0.17&t=206pZceGibix5crN-1&scaling=min-zoom&starting-point-node-id=390%3A749

Bildschirmfoto 2024-05-27 um 15.15.38.pngBildschirmfoto 2024-05-27 um 15.15.38.png
Bildschirmfoto 2024-05-27 um 15.14.20.pngBildschirmfoto 2024-05-27 um 15.14.20.png
Bildschirmfoto 2024-05-27 um 15.14.44.pngBildschirmfoto 2024-05-27 um 15.14.44.png
Bildschirmfoto 2024-05-27 um 15.14.40.pngBildschirmfoto 2024-05-27 um 15.14.40.png
Bildschirmfoto 2024-05-27 um 15.14.27.pngBildschirmfoto 2024-05-27 um 15.14.27.png
Bildschirmfoto 2024-05-27 um 15.14.34.pngBildschirmfoto 2024-05-27 um 15.14.34.png
Bildschirmfoto 2024-05-27 um 15.14.49.pngBildschirmfoto 2024-05-27 um 15.14.49.png
Bildschirmfoto 2024-05-27 um 15.14.55.pngBildschirmfoto 2024-05-27 um 15.14.55.png
Bildschirmfoto 2024-05-27 um 15.15.00.pngBildschirmfoto 2024-05-27 um 15.15.00.png
Bildschirmfoto 2024-05-27 um 15.15.06.pngBildschirmfoto 2024-05-27 um 15.15.06.png

10 finales Design

Finales Design in Figma:

Bildschirmfoto 2024-06-04 um 13.45.24.pngBildschirmfoto 2024-06-04 um 13.45.24.png
Bildschirmfoto 2024-06-04 um 13.45.46.pngBildschirmfoto 2024-06-04 um 13.45.46.png
Bildschirmfoto 2024-06-04 um 13.46.08.pngBildschirmfoto 2024-06-04 um 13.46.08.png
Bildschirmfoto 2024-06-04 um 13.45.54.pngBildschirmfoto 2024-06-04 um 13.45.54.png
Bildschirmfoto 2024-06-04 um 13.45.34.pngBildschirmfoto 2024-06-04 um 13.45.34.png
Bildschirmfoto 2024-06-04 um 13.46.01.pngBildschirmfoto 2024-06-04 um 13.46.01.png
Bildschirmfoto 2024-06-04 um 13.46.17.pngBildschirmfoto 2024-06-04 um 13.46.17.png
Bildschirmfoto 2024-06-04 um 13.46.22.pngBildschirmfoto 2024-06-04 um 13.46.22.png
Bildschirmfoto 2024-06-04 um 13.46.28.pngBildschirmfoto 2024-06-04 um 13.46.28.png

11 Prototyp Figma Screencast

12 Finaler Prototyp / Link Figma, Webflow

Webflow-Link: 

https://gendern.webflow.io/

13 Styleguide

abschlusspräsi.pngabschlusspräsi.png

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.

15 Präsentationsvideo

Ein Projekt von

Fachgruppe

Mediendesign

Art des Projekts

Keine Angabe

Zugehöriger Workspace

UX- und Storytelling (KD4)

Entstehungszeitraum

Sommersemester 2024