Gendern
This project represents an exploration of how language evolves to reflect societal values and inclusivity. It focuses on the development of gendered
language in German, examining how linguistic structures have changed over time to promote more inclusive communication. By investigating historical trends, and alternative writing forms the project highlights the dynamic relationship between language and society. It also draws comparisons with gender-neutral formulations in other languages, emphasizing that language can not be static.
This project represents an exploration of how language evolves to reflect societal values and inclusivity. It focuses on the development of gendered language in German, examining how linguistic structures have changed over time to promote more inclusive communication. By investigating historical trends, and alternative writing forms the project highlights the dynamic relationship between language and society. It also draws comparisons with gender-neutral formulations in other languages, emphasizing that language can not be static.
Description
The project “Gendersprache” explores the evolution of gendered language in German, analyzing how linguistic structures and expressions have changed to promote more inclusive communication. It examines historical developments, current trends, and different writing conventions such as the gender asterisk (*) or colon (:), while also highlighting cultural differences in gender-neutral formulations across languages. The study shows how language reflects societal values, moving from traditional masculine forms toward greater diversity and inclusion, and emphasizes that language must continuously adapt to social change.
4th Semester, mar’ 24 – jul’ 24, Storytelling design
core Idea
The project explores the evolution of gender-inclusive language in German, focusing on how traditional forms, such as the generic masculine, have excluded a large part of the population and reinforced outdated gender roles. It traces the development of more inclusive linguistic practices over time, from early feminist initiatives to contemporary solutions, highlighting the need for language to evolve in order to reflect diversity and equality. The project also considers cross-cultural perspectives, emphasizing that language is a powerful tool in shaping social awareness.
Structure
The website is organized chronologically, beginning with a definition and background of gender-inclusive language, followed by the evolution of different forms from the 1960s to today. Each section features animations, statistics, or information boxes, supported by audio summaries. A map compares gender-neutral language practices across various cultures, and the project concludes with a summary and outlook on future developments.
Tools
Design and prototyping were done in Figma, incorporating generated audio and supplemented with podcast excerpts and screen reader recordings. The design was later transferred to Webflow for implementation. The map illustrating cultural differences was created in Flourish Studio and also integrated into Webflow. The website employs a 14-column grid, using Willump for headings and Soleil for body text, with a color palette of yellow, pink, blue, black, and white, enhanced by layered effects for visual emphasis.
Screencast
Process
The project followed a research-driven, iterative design process. It began with an investigation of the history and evolution of gender-inclusive language in German, highlighting key milestones, trends, and societal challenges, such as the limitations of the generic masculine. Wireframes were created in Figma to structure content and visual elements, while audio summaries, podcast excerpts, and screen reader recordings were added for accessibility. Animations, information boxes, and an interactive map were integrated to enhance engagement. The design was then transferred to Webflow, where interactive features and layered color effects were implemented, including the Flourish Studio map of cultural differences. Iterative testing and refinement ensured the website was both informative and visually appealing, balancing educational content with an engaging user experience.
Styleguide
The final design is built on a clear and consistent visual system. The color palette combines yellow, pink, and blue with black and white for backgrounds and text, using layered effects to create depth and variation. Willump is used for headings and Soleil for body text, ensuring a strong contrast between display and reading type. The layout follows a 14-column grid, with the inner 12 columns reserved for content and the outer 2 for colorful framing elements.
Storyboard
To shape the narrative and rhythm of the website, I created hand-drawn sketches on paper as an initial storyboard. These helped visualize how users would move through the content, where transitions and breaks should occur, and how elements like animations, information boxes, and audio would be integrated. By mapping out the sections in sequence, the storyboard provided a clear sense of pacing and guided later design decisions in Figma.
Structure
The project is structured chronologically, presenting the evolution of gender-inclusive language in German from the 1960s to today. The website begins with a short introduction and then moves through the different writing conventions and milestones in order.
Design variants
The first design explorations were guided by moodboards and tested different stylistic directions. Variants included a colorful overlay concept using pink, yellow, and blue; a softer version with rounded shapes; 3D elements; and a glassmorphism approach with vibrant transparency effects. From these, three directions were refined further, focusing on bold color blocks for rhythm, experimenting with typography, and enhancing the glassmorphism style for a more dynamic look.
Wireframes
The wireframes were developed to translate the chronological content structure into a clear and engaging layout. They defined how text, audio, animations, and information boxes would be positioned on the page, ensuring consistency across sections. By focusing on hierarchy and rhythm, the wireframes served as a blueprint for the later design stages and guided the integration of interactive elements.
Figma-File
The Figma file documents the full design process, from early concepts and moodboard-based explorations to refined layouts. It includes multiple design variants, and typography adjustments, showing the evolution of the project step by step. The final file reflects both the visual identity and the interaction patterns that were later implemented in Webflow.
Get in touch!
©Sophie Doma
2025 portfolio
7th semester, hs hof
Communication Design