) sind zwei verschiedene, aber ergänzende Disziplinen im Bereich des digitalen Designs.

UX (Benutzererfahrung) konzentriert sich auf die Erwartungen und Bedürfnisse der Nutzer und Nutzerinnen, ihre Empfindungen und die Art und Weise, wie sie sich auf einer Website bewegen. Das Ziel ist es, die Interaktion so effektiv und angenehm wie möglich zu gestalten, indem die Nutzung, Zugänglichkeit und die allgemeine Interaktion verbessert werden.

UI (Benutzeroberfläche) fokussiert sich auf das ästhetische und visuelle Erscheinungsbild einer Website (durch Farben, Bilder, Schriftarten usw.). Das Ziel ist es, eine visuell ansprechende und konsistente Oberfläche zu schaffen und sicherzustellen, dass die Benutzeroberfläche einfach zu bedienen ist.

UX (User Experience) design and UI (User Interface) design are two distinct yet complementary disciplines in the field of digital design.

UX focuses on the user's expectations and needs, their feelings, and how they navigate a website. The goal is to make the interaction as efficient and pleasant as possible by improving usability, accessibility, and overall interaction.

UI focuses on the aesthetic and visual aspects of a website (using colors, images, typography, etc.). The goal is to create a visually pleasing and coherent interface and ensure that it is easy to use.

Le design UX (User Experience) et le design UI (User Interface) sont deux disciplines distinctes mais complémentaires dans le domaine du design numérique.

Le UX (expérience utilisateurice) se concentre sur les attentes et besoins de l'utilisateurice, son ressenti et la manière dont il ou elle navigue dans un site. Le but est de rendre l'interaction aussi efficace et agréable que possible en améliorant l’utilisation, l'accessibilité et l'interaction globale.

Le UI (Interface utilisateurice) se concentre sur l'aspect esthétique et visuel d'un site (grâce aux couleurs, images, choix de police de caractère, etc.). Le but est d'avoir une interface visuellement plaisante et cohérente, et de s’assurer que l'interface est facile à utiliser.

In der deutschen Sprache gibt es verschiedene Ansätze zur Verwendung von inklusiver Sprache: das Gendersternchen, der Doppelpunkt, neutrale Sprache usw. Assistive Technologien (z.B. VoiceOver) können häufig Sonderzeichen wie das Sternchen oder den Doppelpunkt nicht korrekt lesen, was das Verständnis für Menschen, die auf solche Technologien angewiesen sind, erheblich erschwert. Daher empfiehlt Velma, auf zugänglichere Formen zurückzugreifen, wie neutrale Sprache oder alternative inklusive Formulierungen, die leichter lesbar und aussprechbar sind: „die Nutzerinnen und Nutzer“ oder „die Nutzenden“ statt „die Nutzer*innen“ oder „die Nutzer:innen“.

In English, there are several ways to use inclusive language that is accessible:

Using gender-neutral language and inclusive phrasing is essential. For instance, using 'people' instead of 'man' or 'woman.' 

Clarity and precision are also crucial. Employing simple language can effectively address a broad audience and help individuals with cognitive or learning disabilities better understand the content.

En français, il y a plusieurs façons d’utiliser un langage inclusif : l’accord de proximité, le point médian combiné au 

, le langage neutre, etc. Les technologies d’assistances (ex : VoiceOver) ne sont pas en mesure de lire le point médian, ce qui rend la compréhension très difficile pour les personnes qui en dépendent. Velma recommande donc d’utiliser d’autres approches plus accessibles, comme le langage neutre ou le langage inclusif lisible et prononçable : "les utilisateurices" au lieu de "les utilisateur·ice·x·s".

Nach meinem Abschluss in moderner Literatur erwarb ich 2018 einen Bachelor in visueller Kommunikation an der 

. Anschließend zog ich nach Beirut für ein besonders lehrreiches Praktikum im 

und begann nach meiner Rückkehr als freiberufliche Grafikdesignerin. Dabei konzentriere ich mich hauptsächlich auf editorial Projekte mit sozial-kultureller und künstlerischer Dimension.

Während meines Bachelors entwarf und entwickelte ich den Prototyp von 

, einem Projekt zur Sensibilisierung für sexuelle Schmerzen bei Personen mit Vulva, das ich über 18 Monate bei 

 weiterentwickelte, bis die Plattform im Mai 2023 lanciert wurde. Diese Erfahrung ermöglichte es mir, die Herausforderungen von sozial engagierten Unternehmensprojekten gut zu verstehen.

Seit diesem Projekt arbeite ich auch mit Roxanne zusammen, was mir ermöglicht hat, mich intensiv mit digitaler Barrierefreiheit sowie UX/UI-Design auseinanderzusetzen und weiterzubilden.

After completing a degree in Modern French Literature, I obtained a Bachelor’s in Visual Communication at the HEAD – Genève School of Arts and Design in 2018. I then moved to Beirut for an invaluable internship at Studio Safar and began working as an independent graphic designer upon my return. I primarily focus on editorial projects with a socio-cultural and artistic dimension.

During my Bachelor’s program, I conceived and designed the prototype for 

, a project aimed at raising awareness about sexual pain experienced by people with a vulva, which I developed over 18 months at 

, leading to the platform's launch in May 2023. This experience has provided me with a deep understanding of social and engaged entrepreneurship projects.

It is also through this project that we began collaborating with Roxanne, which has allowed me to become more aware of and trained in digital accessibility and UX/UI design.

Après un diplôme en Lettres Modernes, j’obtiens un Bachelor en Communication visuelle à la 

 en 2018. Je pars ensuite à Beyrouth pour un stage particulièrement formateur au 

, et me lance en tant que designer graphique indépendante à mon retour. Je me concentre principalement sur des projets éditoriaux à dimension socio-culturelle et artistique.

Pendant mon Bachelor, j'imagine et conçois le prototype de 

, un projet de sensibilisation sur les douleurs sexuelles des personnes à vulve, que je développe durant 18 mois chez 

, jusqu’au lancement de la plateforme en mai 2023. Cette expérience me permet de bien comprendre les enjeux de projets d'entrepreneuriat social et engagé. 

C’est aussi depuis ce projet que nous collaborons avec Roxanne, ce qui m’a permis de me sensibiliser et me former à l’accessibilité numérique et au UX/UI design. 

Anne-Soorya Takoordyal

Le Cabaret Littéraire umfasst Aufführungen, Theaterlesungen, Performances und eigene Formate, die Literatur und Bühnenkunst in einem festlichen Geist der Inklusion und Entdeckung zusammenbringen.

Sein ikonografisches Universum ist entschieden queer, poppig und flamboyant. Jede Saison bietet die Gelegenheit zur Neuerfindung, mit einer neuen Erkundung des Begriffs Kitsch.

Le Cabaret Littéraire features shows, theatrical readings, performances, and bespoke formats that bring literature and performing arts together in a festive spirit of inclusion and discovery.

Its visual universe is distinctly queer, pop, and flamboyant. Each season offers an opportunity for reinvention with a new exploration of the concept of kitsch at its core.

Le Cabaret Littéraire, ce sont des spectacles, des lectures théâtrales, des performances et des formats maison pour faire se rencontrer littérature et arts de la scène, dans un esprit festif d’inclusion et de découvertes.

Son univers iconographique est résolument queer, pop et flamboyant. Chaque saison est une occasion de réinvention avec une nouvelle exploration de la notion de  kitsch à la clé.

Pour cette saison, le site propose une navigation horizontale, innovante et immersive. Chaque année, nous relevons le défi de créer une identité visuelle unique en nous imposant des contraintes créatives. Pour 2024-2025, nous avons choisi de bannir les images, misant exclusivement sur la typographie et les animations. 

Sexuelle Aufklärung im Internet zu thematisieren ist schon heikel, über sexuelle Schmerzen zu sprechen, ist noch schwieriger. Diese Schmerzen haben Auswirkungen auf die mentale und körperliche Gesundheit sowie auf das Liebes-, Sexual- und Familienleben der betroffenen Person.

Mit diesem Projekt standen wir vor mehreren Herausforderungen: Wir mussten ein tabuisiertes und intimes Thema ansprechen und sexuelle Schmerzen durch einen sex-positiven Ansatz entstigmatisieren. Um umfassend zu informieren, bietet die Website Artikel an, die sowohl medizinische als auch sexologische Perspektiven auf jede Art von Schmerz bieten und diese gleichwertig behandeln.

Das Projekt wurde mit drei Preisen ausgezeichnet: dem Publikumspreis des Prix Art et Humanité der Genfer Rotes Kreuz, dem Coup de Coeur-Preis von --Pulse Incubateur HES und dem Preis des Forums für Soziale Innovation.

Discussing sexual education on the internet is sensitive; addressing sexual pain is even more challenging. These issues affect the mental and physical health of individuals, as well as their romantic, sexual, and parental lives.

In this project, we encountered several challenges: educating about a taboo and intimate topic while working to destigmatize sexual pain through a sex-positive approach. To ensure thorough and balanced information, the website features articles that combine medical and sexological perspectives on each type of pain, emphasizing their equal importance.

The project received 3 awards : the Geneva Red Cross Prix Art et Humanité Audience Award, the Pulse Incubateur HES Special Jury Prize, and the Forum de l’Innovation Sociale Award. 

Parler d’éducation sexuelle sur internet est délicat, parler de douleurs sexuelles l’est davantage. Ces douleurs ont un impact sur la santé mentale, physique, et sur la vie amoureuse, sexuelle ou parentale de la personne concernée.

Avec ce projet, nous avons fait face à plusieurs défis: il s’agissait d’informer sur un sujet tabou et intime et de déstigmatiser les douleurs sexuelles par une approche sex-positive. Et pour informer de manière complète, le site propose des articles avec une approche à la fois médicale et sexologique de chaque douleur, qu’il s’agissait de mettre au même niveau d’importance.

Le projet a reçu trois prix : Le Prix du Public du Prix Art et Humanité de la Croix Rouge Genevoise, le Prix Coup de Coeur de -Pulse Incubateur HES, et le Prix du Forum de l’Innovation Sociale 2024 de l'Université de Lausanne. 

Wir wollten uns von den oft visuell kühlen medizinischen Websites distanzieren und eine sanfte, warme Alternative bieten, die sich in der Farbpalette, der Auswahl der Schriftarten und dem Ton der Texte widerspiegelt.

Die Illustrationen von Noémie Creux wurden umfangreich verwendet, sowohl um durch präzise anatomische Diagramme zu informieren als auch um Schmerzen oder Vergnügen auf eine poetischere Weise darzustellen, was hilft, das Tabu auf sanfte Weise anzusprechen.

Die Website wurde als Plattform konzipiert, die den Nutzer und die Nutzerin ermöglicht, sich auf verständliche Weise über Schmerzen zu informieren, Spezialisten und Spezialistinnen über ein Empfehlungsverzeichnis zu finden und sich durch sexologische Übungen ihren Körper und ihr Vergnügen zurückzuerobern.

We wanted to distance ourselves from the often sterile and impersonal design of medical websites by offering a softer, more inviting alternative. This is reflected in the color palette, typography, and tone of the content.

Noémie Creux’s illustrations play a key role in the site, providing both precise anatomical diagrams and poetic representations of pain and pleasure. This approach helps to address the taboo surrounding sexual pain with sensitivity.

The site is designed as a comprehensive platform where users can easily access accessible information about sexual pain, find specialists through a curated directory, and reconnect with their bodies and pleasure through sexological exercises.

Nous avons souhaité nous éloigner des sites médicaux souvent visuellement froids, et proposer une alternative douce et chaleureuse, qui se traduit dans la palette de couleurs, le choix des caractères typographiques et la tonalité des textes.

Les illustrations de Noémie Creux ont beaucoup été utilisées, à la fois pour informer via des schémas anatomiques précis, mais également pour représenter les douleurs ou le plaisir de manière plus poétique, ce qui permet d’aborder le tabou en douceur.

Le site a été réfléchi comme une plateforme qui permet aux utilisateurices de s'informer sur les douleurs de manière vulgarisée, trouver des spécialistes via l'annuaire de recommandations, se réapproprier son corps et son plaisir grâce à des exercices sexologiques. 

Gestaltung und Layout der Ausgabe 3000 von Samandal Comics, einem Comic-Magazin der libanesischen Diaspora mit Sitz in Beirut.

Eine Besonderheit des Magazins ist, dass es in den drei Hauptsprachen des Libanon – Arabisch, Englisch und Französisch – veröffentlicht wird. Daher wurde Samandal 3000 in drei Ausgaben produziert, wobei jede Version mit einer spezifischen Zweifarbigkeit gestaltet ist.

Design and layout for the new issue of Samandal Comics, a Beirut–based comic book magazine.

The magazine is published in the three main languages spoken in Lebanon — Arabic, English and French. 

 was therefore created in three editions, recognizable by a specific duotone.

Maquette et mise en page du numéro 3000 de Samandal Comics, un magazine de bande-dessinée de la diaspora libanaise, basé à Beyrouth.

L’une des spécificités du magazine est qu’il est publié dans les trois langues principales parlées au Liban – l’arabe, l’anglais et le français. 

 a donc été réalisé en trois éditions; chaque version est traitée avec une bichromie spécifique.

In diesem Projekt präsentiert das Schwule Museum Berlin eine zweigeteilte Szene: Zum einen werden wenig bekannte Objekte gezeigt, deren Geschichte nie erzählt wurde, und zum anderen bemerkenswerte Stücke aus ihren Archiven, deren Geschichten oft vertraut, aber manchmal unvollständig oder verzerrt sind. 

Das Museum lud eine Vielzahl von Autorinnen und Autoren ein, Ausstellungstexte über ein Objekt ihrer Wahl zu verfassen, um ihm eine neue Geschichte zu verleihen. Die Autorinnen und Autoren hatten völlige Freiheit hinsichtlich der Form: Das Objekt konnte analysiert, diskutiert, beschrieben, erzählt, besungen oder auf andere Weise erkundet werden. Die Objekte wurden in 3D digitalisiert und die Texte von den Autorinnen und Autoren aufgenommen. So können die Geschichten nun gelesen oder gehört werden, während sich das Objekt im virtuellen Raum bewegt.

In this project, the Schwules Museum Berlin presents a two-part scene: on one hand, little-known objects whose stories have never been told, and on the other hand, remarkable pieces from their archives, with stories that are often familiar but sometimes incomplete or even distorted. 

The museum invited a diverse group of authors to write exhibition texts about an object of their choice, giving it a new story. The authors had complete freedom regarding the genre: the object could be analyzed, discussed, described, narrated, sung, or explored in any other form. The objects were digitized in 3D and the texts recorded by the authors. Thus, these stories can now be read or listened to while the object moves through the virtual space.

Dans ce projet, le Schwules Museum Berlin présente une scène en deux volets : d’une part, des objets peu connus dont l’histoire n’a jamais été racontée, et d'autre part, des pièces remarquables issues de leurs archives, aux histoires souvent familières mais parfois incomplètes voire déformées. 

Le musée a convié une diversité d'auteurices à rédiger des textes d’exposition sur un objet de leur choix, afin de lui insuffler une nouvelle histoire. Les auteurices ont eu toute liberté quant au genre : l’objet pouvait être analysé, discuté, décrit, narré, chanté ou exploré sous toute autre forme. Les objets ont été numérisés en 3D et les textes enregistrés par les auteurices. Ainsi, ces récits peuvent désormais être lus ou écoutés alors que l'objet se déplace dans l'espace virtuel.

 ist eine digitale Ausstellung des Schwulen Museums Berlin, die die emotionalen und ästhetischen Qualitäten von Relikten aus ihren Archiven hervorhebt.

Beim Betreten der Website sieht man ein schwebendes Foto, das sanft um sich selbst kreist. Es zeigt eine intime Szene zwischen zwei Frauen in Pakistan im Jahr 1959. Durch einen Klick auf den Link „Unknown Object #1“ gelangt man zur Geschichte dieses Objekts, erzählt von dem Künstler Omar Kasmani. Die Erzählung ist auch als Audio verfügbar. Rechts auf dem Bildschirm führt ein Pfeil zur nächsten Entdeckung, während links eine Übersichtskarte der Ausstellung die verschiedenen Werke im Raum zeigt. Die Navigation erfolgt durch Klicken auf den Pfeil oder die Übersichtskarte, und in beiden Fällen wird man in eine Welt mit lebhaften Farben entführt. Die 10 Objekte der Ausstellung werden von queeren Künstlerinnen und Künstlern aus Berlin präsentiert.

 is a digital exhibition by the Schwules Museum Berlin that highlights the emotional and aesthetic qualities of relics from their archives.

Upon entering the site, a photograph in levitation slowly rotates, depicting an intimate scene between two women in Pakistan in 1959. Clicking on the link ‘Unknown Object #1’ reveals the story of this object as told by the artist Omar Kasmani. The narrative is also available in audio format. To the right of the screen, an arrow guides us to the next discovery. On the left, a layout of the exhibition presents the various artworks arranged in the space. Navigation is done by clicking on the arrow or the exhibition layout, and in both cases, we are transported into a universe of vibrant colors. The 10 objects in the exhibition are presented by queer artists from Berlin.

 est une exposition numérique du musée gay de Berlin qui met en lumière les qualités émotionnelles et esthétiques de reliques de leurs archives.

En arrivant sur le site, on découvre une photographie en lévitation qui tourne doucement sur elle-même. Elle montre une scène d’intimité entre deux femmes au Pakistan, en 1959. En cliquant sur le lien « Unknown Object #1 », on accède à l’histoire de cet objet, racontée par l’artiste Omar Kasmani. Le récit est également disponible en audio. À droite de l’écran, une flèche nous guide vers la suite de cette première découverte. À gauche, un plan de l’exposition présente les différentes œuvres disposées dans l’espace. La navigation se fait en cliquant sur la flèche ou sur le plan d’exposition, et dans les deux cas, nous sommes transportés dans un univers aux couleurs vibrantes. Les 10 objets de l’exposition sont présentés par des artistes queers de Berlin.

Wir haben 2017 die visuelle Identität und die ursprüngliche Idee für die Website von Anne-Sophie Hayek entwickelt. Zu dieser Zeit wurde die Website in PHP entwickelt und über eine WordPress-Oberfläche verwaltet.

Im Jahr 2024 greifen wir die ursprüngliche Idee wieder auf und migrieren die Website auf eine React-Basis, wobei wir das Next.js-Framework für die Frontend-Entwicklung und Sanity.io für die Verwaltungsoberfläche verwenden. Die Website wird modernisiert: schneller, besser optimiert für Suchmaschinen, mehrsprachig, einfacher zu verwalten – auch über ein Mobilgerät – und mit verbesserter Barrierefreiheit.

In 2017, we developed the visual identity and the original concept for Anne-Sophie Hayek’s website. At that time, the site was built using PHP and managed via a WordPress interface.

In 2024, we revisited the original idea and migrated the site to a React-based foundation, using the Next.js framework for frontend development and Sanity.io for the management interface. The site was updated to be faster, better optimized for search engines, multilingual, easier to manage – even from a mobile device – and with enhanced accessibility.

Nous avons développé l’identité visuelle et l’idée originale pour le site d’Anne-Sophie Hayek en 2017. À cette époque-là, le site est développé en PHP et géré via une interface WordPress. 

En 2024, nous reprenons l'idée originale et migrons le site sur une base React, utilisant le framework Next.js pour le développement Frontend et Sanity.io pour l'interface de gestion. Le site est mis au goût du jour : plus rapide, mieux référencé, multilingue, plus facile à gérer, y compris depuis un portable, et ce avec une accessibilité renforcée.

Anne-Soorya Takoordyal

FAQ

Was ist der Unterschied zwischen UX- und UI-Design?

Was sind die Regeln der barrierefreien inklusiven Sprache?

Projekte

pvssy talk

Samandal Comics

Ein Projekt im Kopf?