Pixel Perfect – 2025

Projects MA DIGITAL EXPERIENCE DESIGN

Pixel Perfect – 2025

Pixel Perfect is the semester project of the Interface Design orientation module, semester I. It invites students to put into practice the methods and principles introduced in the Macro UI and Screen Grammar courses, exploring how graphic systems structure the digital user experience.

Based on the analysis of an existing website, the project encourages a critical and creative reinterpretation of its visual identity and hierarchy. The challenge is to design a contemporary, coherent and expressive interface capable of renewing the original design system while respecting its uses, content and functional constraints, as well as its key principles: consistency, modularity, and the scalability of graphic and interactive components.

 

Studio project (2026) with Romain Collaud, Frederik Mahler-Andersen, Lara Défayes

Assistants
Martial Grin
Students
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
Know-how
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. 

By 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.

By 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. 
 

By 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.

By 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.

By 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. 


 

By 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.
 

By Cindy Murier

Projects related to UX/UI
See more projects

Teo Grajqevci – reform

BA MEDIA & INTERACTION DESIGN

Teo Grajqevci – reform

by Teo Grajqevci

reform responds to a context in which designers are gradually losing control over their tools: creative software is becoming more automated, closed and dependent on cloud-based services. Today, generative AI can produce 3D models with ease, but often at the cost of control, understanding and ownership of the creative process. reform offers another approach: making 3D modelling easier to access, in a field that is usually complex and difficult to learn. The project takes the form of free and open-source software, built around a simplified interface, intuitive interactions and guides that support the learning of these tools. Through demonstrations and didactic exercises, reform restores the designers' motivation and means to model 3D shapes themselves.
Yann Müller – Trame Noire

BA MEDIA & INTERACTION DESIGN

Yann Müller – Trame Noire

by Yann Müller

As cities light up, the night fades from our sight. Trame Noire is a night-exploration mobile app designed to raise public awareness about the impacts of light pollution on the wildlife and flora that come alive at dusk. Combining immersive experience and citizen science, the project offers a new way to observe and understand our coexistence with the living world. Guided by the seasons and natural cycles, the app invites users to explore the urban environment and capture, from one location to the next, the unique light footprint of each space. Through these explorations, Trame Noire maps a sensitive geography of the dark, bringing to light how artificial illumination alters the behavior of nocturnal life.
Steve Bouillant – Re:soil

BA MEDIA & INTERACTION DESIGN

Steve Bouillant – Re:soil

by Steve Bouillant

The smartphone has turned a trip to the mountains into an exercise in documentation. We take photos, tag our location, and post them: the natural world becomes content before it becomes a moment of reconnection. Re:soil offers a compact outdoor device whose sensors continuously measure humidity, light, and the transitions between environments. Its probe, planted in the ground, measures the earth's heat and compares it to that of the user's hand. Its microphone captures the soundscape of the location. Re:soil conveys these connections through vibration and light, without a screen, without performance, and without a phone. Upon the user's return, a linked app generates an ephemeral journal blending sensory interpretations, the geology of the site, and likely flora and fauna.
Beyond Clicks

MA DIGITAL EXPERIENCE DESIGN

Beyond Clicks

with Gaël Hugo, Paul Lëon

The Mind Reader Interface shifts computing from the reactive to the proactive: from a system that obeys commands to one that anticipates them. Where smart environments cast their users as pilots issuing constant instructions, this project removes the friction of instruction altogether. Intention is no longer declared through a screen or a button. It is inferred. Reading context, habit and the signals of presence, the interface acts before it is asked. It sheds the form of the device to become a Ghost in the Room that senses rather than obeys. The user no longer pilots the space; they inhabit it. The system does not read thoughts, only traces, and stages the distance between anticipation and understanding: what we gain, and what we quietly surrender, when a space begins to act on our behalf.
MICRO UI – 2026

MA DIGITAL EXPERIENCE DESIGN

MICRO UI – 2026

with Romain Collaud, Alain Bellet

Micro UI is the term project for the Interface Design introductory module in Term II. It invites students to explore how affordances and micro-animations shape the usability of digital interfaces, by analysing the principles that guide users’ behaviour even before they are aware of them. Based on a study of the visual and interactive cues that shape user expectations, the project encourages students to design subtle yet effective animations capable of improving feedback, engagement and accessibility. The challenge lies in striking a balance between aesthetics and function, so that movement and affordance work together to create fluid, responsive and meaningful interactions. The course also addresses, as a complementary topic, the issue of ‘dark patterns’ – those same principles misused for the purpose of manipulation rather than guidance.  

Related courses
See all courses

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.