MICRO UI – 2026

Projets MA DIGITAL EXPERIENCE DESIGN

MICRO UI – 2026

Micro UI est le projet de semestre du module d'orientation Interface Design, semestre II. Il propose aux étudiant·e·s d'explorer comment les affordances et les micro-animations façonnent l'usabilité des interfaces digitales, en analysant les principes qui guident le comportement des utilisateur·rice·s avant même qu'ils et elles n'en aient conscience.

À partir de l'étude des indices visuels et interactifs qui structurent les attentes, le projet invite à concevoir des animations subtiles mais efficaces, capables d'améliorer le feedback, l'engagement et l'accessibilité. L'enjeu est de trouver l'équilibre entre esthétique et fonction, afin que mouvement et affordance travaillent ensemble à créer des interactions fluides, réactives et porteuses de sens. Le cours aborde également, à titre complémentaire, la question des dark patterns, ces mêmes principes détournés à des fins de manipulation plutôt que d'accompagnement.

 

Projet d’atelier (2026) avec Romain Collaud, Alain Bellet

Assistant·e·s
Martial Grin
Étudiant·e·s
Delphine Brantschen, Marc Facchinetti, Thomas Neyroud, Youri Zermatten
Savoir-faire
UX/UI, Web

Type Finder

 

Type Finder recourt à la manipulation directe comme alternative aux outils actuels de recherche de caractères typographiques, notamment les catalogues de polices et les listes de fonderies. Un glyphe asémique, variable sur cinq axes, permet aux designers d’esquisser les caractéristiques formelles de la police qu’ils recherchent ; les correspondances sont ensuite extraites de la base de données et classées en fonction de l’esquisse. Le glyphe est conçu pour échapper au sens et servir d’exemple purement formel. Le projet vise à aider les designers à affiner leur recherche typographique à partir de caractéristiques clés, en particulier les typographes qui mènent des recherches de références. Il est en outre pensé comme une expérience pédagogique, aidant les designers peu familiers du dessin de caractères à comprendre les principales caractéristiques des polices. Des états de composants contextuels créent des affordances fortes qui guident naturellement l’utilisateur à travers l’interface. 

Par Thomas Neyroud

Matter Picker

Placez une loupe au-dessus de la matière du quotidien et plongez-y. Une loupe suit votre curseur et zoome à travers cinq échelles, sans aucune coupure : Matière, Molécules, Structure, Atomes, Atome. Choisissez une vraie molécule, comme la caféine ou le sel, et plongez. La matière se dissout en atomes, les atomes s’assemblent en squelette, un atome se déploie en couches électroniques tournoyantes. Chaque forme découle de la chimie : la forme d’un atome correspond à son nombre de valence. Aucun schéma à mémoriser. Un seul geste, le zoom, et l’architecture cachée de la matière ordinaire se révèle. Une chimie dans laquelle on tombe, plutôt qu’une chimie que l’on lit.

Par Delphine Brantschen

Correspondances.ch Picker – Map Display

 

correspondances.ch est un site web qui présente plus de 3000 reproductions de cartes postales d’architecture brutaliste. Le système de filtrage actuel se limite à un index à facettes basique. Le nouveau sélecteur peut être vu comme une extension des modes d’affichage existants du site. Plutôt que de parcourir les cartes postales sous forme de liste, il permet de les explorer selon leur position géographique sur une carte. Grâce à des transitions de zoom complexes sur plusieurs échelles et à un système de tags sélectionnables directement depuis les images, le prototype offre une navigation spatiale à travers une sélection de 250 cartes postales suisses. L’objectif est, à terme, d’intégrer ce prototype, étendu à l’ensemble des archives mondiales de 3000 cartes, au site en ligne lors de sa prochaine mise à jour.

Par Youri Zermatten

Zermatten_Youri_MicroUI_Mockup_01.png
Facchinetti_Marc_MicroUI_Mockup_01.jpg

Pizzeria Picker

Pizzeria Picker est un outil mobile interactif permettant de créer un profil de pizza précis grâce à des paramètres détaillés. Ce profil peut servir soit à trouver des pizzerias capables de réaliser la pizza idéale de l’utilisateur, soit à évaluer avec quelle fidélité une pizzeria exécute un style de pizza donné. Un modèle Three.js en temps réel visualise chaque ajustement et génère un résultat détaillé, fondé sur les données.

Par Marc Facchinetti

Projets liés à Web
Voir plus de projets

Gabriel Polgar – Tenir la rue, imprimer la rue

BA DESIGN GRAPHIQUE

Gabriel Polgar – Tenir la rue, imprimer la rue

by Gabriel Polgar

Dans un contexte marqué par le recul des acquis sociaux et la réapparition de discours d'extrême droite, les manifestations sont des espaces où les voix se rassemblent et s'amplifient. De ces rassemblements naît une énergie collective rare : les paroles se délient, la solidarité se renforce et un élan commun se fait sentir. Pourtant, cette force se dissipe et s'efface souvent beaucoup trop vite. Tenir la rue, imprimer la rue a pour ambition, au travers d'un outil de création web basé sur l'aléatoire, de capter et de prolonger ces moments dans notre quotidien. Ce projet permet, grâce à du contenu récolté et alimenté collectivement, à chacun·e de composer et d'imprimer, en pleine rue, sa propre affiche.
Enshittification - 2026

BA MEDIA & INTERACTION DESIGN

Enshittification - 2026

with Tibor Udvari

De nombreuses plateformes se dégradent avec le temps, passant d'outils utiles à des systèmes manipulateurs. Dans cet atelier, nous abordons l'enshittification comme une méthode créative en modifiant des sites existants ou en développant de petites expériences web qui exagèrent la friction, l'automatisation, la surcharge et la désorientation afin de révéler les logiques sous-jacentes.
Ethical, Accessible and Mindful Design

MA DIGITAL EXPERIENCE DESIGN

Ethical, Accessible and Mindful Design

with Irene Pereyra

Ethical, Accessible & Mindful Design est un module d'une semaine qui forme les étudiant·e·s à interroger les dimensions éthiques des décisions de design. Par la pratique, les étudiant·e·s apprennent à concevoir des expériences inclusives, transparentes et attentives à leur impact social plus large. Ce semestre, le module a pris l'accessibilité pour les personnes malvoyantes comme contrainte centrale de design. Sous l'intitulé Goodbye to All …, les étudiant·e·s devaient accompagner un·e utilisateur·trice à travers un adieu permanent, irréversible et non négociable. Au-delà de la conformité aux WCAG, l'exercice exigeait une attention soutenue au contraste dans tous les états de l'interface, à la lisibilité typographique, à la navigation au clavier seul, à la visibilité du focus, ainsi qu'à l'intégrité de la mise en page aux zooms 100 % et 300 %, sans perte de hiérarchie ni de lisibilité.
Dalia Spichtig – Breaking the Narrative

BA MEDIA & INTERACTION DESIGN

Dalia Spichtig – Breaking the Narrative

by Dalia Spichtig

Breaking the Narrative est un web documentaire interactif et pédagogique consacré aux discours de la manosphère. Structuré en trois parties, il décortique trois médias privilégiés par ces communautés : la vidéo, l'écrit et l'audio, afin d'analyser leurs stratégies de communication et de diffusion. À travers différentes interactions ludiques, le projet cherche à sensibiliser et informer sur les mécanismes de séduction employés par la manosphère, tout en révélant la réalité systémique et idéologique que ces discours tendent à dissimuler. Destiné principalement aux jeunes garçons ainsi qu'à leurs parents, tuteur·trice·s et personnes encadrantes, Breaking the Narrative vise à fournir des outils de compréhension, d'analyse critique et d'éducation face à ces problématiques contemporaines.
Portfol.io

BA MEDIA & INTERACTION DESIGN

Portfol.io

with David Liebermann, Maximilian Kiepe, Jana Reddemann

Hello World ! Aurevoir le web prévisible, standardisé et interchangeable. Les étudiant·e·s ont remis en question les conventions du monde numérique, exploré les vastes possibilités du médium, et inventé de nouvelles façons d'interagir avec le Web. Et quoi de mieux pour donner du sens au design web que les portfolios des étudiant·e·s eux-mêmes, compris comme des expressions d'attitude et de personnalité. https://websites.ecal-mid.ch/

Formations liées
Voir toutes les formations

MA DIGITAL EXPERIENCE DESIGN
Nous utilisons des cookies pour collecter des informations sur la manière dont vous utilisez ecal.ch.
Nous utilisons ces informations pour faire fonctionner le site web au mieux et améliorer nos services.