Pixel Perfect – 2025

Pixel Perfect – 2025

Pixel Perfect est le projet de semestre du module d’orientation Interface Design, semestre I. Il propose aux étudiant·e·s d’appliquer concrètement les méthodes et principes abordés dans les cours Macro UI et Screen Grammar, en explorant comment les systèmes graphiques structurent l’expérience utilisateur digitale.
 
À partir de l’analyse d’un site existant, le projet invite à une réinterprétation critique et créative de son identité et de sa hiérarchie visuelles. L’enjeu est de concevoir une interface contemporaine, cohérente et expressive, capable de renouveler le design system initial tout en respectant ses usages, son contenu, ses contraintes fonctionnelles, et ses principes clés: cohérence, modularité et évolutivité des composants graphiques et interactifs.

 

Projet d’atelier (2026) avec Romain Collaud, Frederik Mahler-Andersen, Lara Défayes

Assistant·e·s
Martial Grin
Étudiant·e·s
Delphine Brantschen, Seoyun Choi, Marc Facchinetti, Sina Fathollahi, Gwenaëlle Gustin, Emilie Müller, Thomas Neyroud, Shin Young Park, Rishab Sachidanand, Youri Zermatten, Amna Ahmad, Cindy Murier
Savoir-faire
UX/UI

Bündner KunstMuseum

 

The project presents a website for an art museum located in Chur, in the canton of Grisons. The platform showcases both the permanent and temporary collections, as well as the museum’s book catalogue. It also includes information about events and practical details for planning a visit.

The visual concept is directly inspired by the museum’s architecture: a cube. I developed a minimalist, typography-driven design language based on geometric axes, reflecting the architecture of the building. 

Par Emilie Müller

1/3


FIFA MUSEUM

This project presents a redesigned concept for the FIFA Museum website. The original website offers a wide range of programs, events, and online content, but lacks a distinct football character, presents visit-related information in a fragmented way, and makes valuable digital content difficult to discover.

The key visual is inspired by scanimation, expressing the museum’s vision of “United by the Movement,” while the grid system is inspired by pitch lines. A more visible navigation structure aims to improve discoverability, and adaptive visuals with contextual annotations help surface programs and stories more personally. This makes the museum’s heritage engaging and accessible for both visit planning and online exploration.

Par Shinyoung Park


Fondation Pierre Gianadda

This website focuses on the navigation experience. Elements of the fondation's building are used throughout for this matter, with the main entrances symbolising the different parts of the website. Thematic colours are used to help keep track of where one is in the website, and are used as highlights for the interactive elements. Overall, the redesign aims to offer a simple experience, so that visitors can focus on the exceptional content of the fondation's diverse proposals. 
 

Par Thomas Neyroud


Seoyun_Choi_mockup_1.png

Vitromuseum

The museum focuses on stained glass and glass art, I wanted the interface to reflect that theme in a simple way. I brought this idea into the website through geometric shapes inspired by stained-glass panels, vivid section colours based on real glass pigments, and subtle glass-like textures used in hover states. Each colour represents a different part of the website, helping users understand where they are, just like individual pieces of stained glass form one unified artwork. I also applied consistent angles and corner radius to keep the shapes cohesive and used tighter margins so the pieces feel connected, echoing how stained-glass elements sit closely together. These decisions make the visual identity stronger while still keeping the navigation clear and easy to use.

Par Seoyun Choi


1VALLON_repro3DVetical_Gradient.png

Vallon MUSEUM

Inspired by the museum’s L-shape and the idea of archaeological excavation, the design of this website invites users to explore by revealing and hiding layers of content. The L becomes a tool for navigation and a frame that guides the eye and uncovers hidden fragments step by step and shows hoe museum’s identity is rooted in its form and historical foundation.

Like digging through history, the experience is built on curiosity and gradual discovery, turning the website into a place where what’s buried slowly comes to light.

This project is a metaphor for digital excavation ad invites users to uncover hidden stories layer by layer.

Par Delphine Brantschen


BallenBERG


Ballenberg’s website aims to help visitors explore the museum’s offerings and structure their visit. However, the museum being large with various exhibits and events, the website became extremely complex. With the re-design, north star for was to craft the experience to facilitate visitors to easily plan their visit to then intuitively move into the purchase phase.

Structurally, the re-design has two ways of representing content. A map view and another that aligns with a traditional website. Content on the map is categorised by clubbing multiple attractions into the themes of Ballenberg. Both sections are connected so that visitors can delve into the experiences section at any moment if required.

Importantly, the website allows visitors to create a personalized plan of their visit to the open air museum. This helps them easy visualize their visit and systematically plan it as to liking. 


 

Par Rishab Sachidanand


La Muette

 

This project presents a redesign of La Muette, the website of the museum dedicated to the Swiss writer C. F. Ramuz. The objective was to establish a more coherent balance between the two main sections of the platform, namely the museum space and the archival resources. The redesign aims to improve overall navigation fluidity and to rethink how users explore the archives.
 

Par Cindy Murier

Projets liés à UX/UI

Beyond Clicks

MA DIGITAL EXPERIENCE DESIGN

Beyond Clicks

with Gaël Hugo, Paul Lëon

The Mind Reader Interface fait passer l'informatique du réactif au proactif : d'un système qui obéit aux commandes à un système qui les anticipe. Là où les environnements intelligents assignent à leurs utilisateurs un rôle de pilote, condamnés à adresser sans cesse des instructions, ce projet supprime la friction de l'instruction. L'intention ne se déclare plus par un écran ou un bouton. Elle se déduit. En lisant le contexte, l'habitude et les signaux de la présence, l'interface agit avant qu'on ne le lui demande. Elle abandonne la forme de l'appareil pour devenir un Ghost in the Room qui perçoit plutôt qu'il n'obéit. L'utilisateur ne pilote plus l'espace ; il l'habite. Le système ne lit pas les pensées, seulement des traces, et met en scène la distance entre l'anticipation et la compréhension : ce que nous gagnons, et ce que nous cédons discrètement, lorsqu'un espace se met à agir en notre nom.

Yann Müller – Trame Noire

BA MEDIA & INTERACTION DESIGN

Yann Müller – Trame Noire

by Yann Müller

À mesure que les villes s'illuminent, la nuit disparaît de notre regard. Trame Noire est une application mobile d'exploration nocturne qui sensibilise le grand public aux effets de la pollution lumineuse sur la faune et la flore active à la tombée de la nuit. À la croisée de l'expérience immersive et de la science participative, le projet propose une nouvelle manière d'observer et de comprendre notre cohabitation avec le vivant. Au fil des saisons et des cycles naturels, l'application invite à parcourir l'environnement urbain et à capter, lieu après lieu, l'empreinte lumineuse propre à chaque endroit. À travers ces explorations, Trame Noire construit une cartographie sensible de la nuit mettant en lumière ce que l'éclairage artificiel altère dans les comportements du vivant nocturne.

MICRO UI – 2026

MA DIGITAL EXPERIENCE DESIGN

MICRO UI – 2026

with Romain Collaud, Alain Bellet

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.  

Steve Bouillant – Re:soil

BA MEDIA & INTERACTION DESIGN

Steve Bouillant – Re:soil

by Steve Bouillant

Le smartphone a transformé la sortie en montagne en exercice de documentation. On photographie, on géolocalise, on publie : la nature devient un contenu avant d'être un moment de reconnexion avec son environnement. Re:soil propose un dispositif compact outdoor dont les outils se déploient pour capter en continu l'humidité, la lumière et les transitions entre les milieux traversés. Sa sonde, plantée dans le sol, mesure la chaleur de la terre et la compare à celle de la main de l'utilisateur·trice. Son micro capture la texture sonore du lieu. Re:soil transmet ces relations par vibration et lumière, sans écran, sans performance et sans téléphone. Au retour, une application liée génère un journal éphémère mêlant interprétations sensibles, géologie du lieu, faune et flore potentielles.

Teo Grajqevci – reform

BA MEDIA & INTERACTION DESIGN

Teo Grajqevci – reform

by Teo Grajqevci

reform s'inscrit dans un contexte où les designers sont progressivement dépossédés de leurs outils : les logiciels de création deviennent plus automatisés, fermés et dépendants du cloud. Aujourd'hui, les IA génératives permettent de produire facilement des formes en 3D, mais au prix d'une perte de contrôle, de compréhension et d'appropriation du geste créatif. reform propose une autre voie : rendre la modélisation 3D plus simple, alors qu'elle est habituellement complexe et difficile à maîtriser. Le projet prend la forme d'un logiciel libre, avec une interface simplifiée, des interactions naturelles et des guides accompagnant l'apprentissage de ces outils. Ces démonstrations et exercices didactiques redonnent aux designers l'envie et les moyens de modéliser eux-mêmes.

Formations liées