Fuorisalone
Fuorisalone
An interactive microsite for Fuorisalone that previews and entices visitors to its Milan Design Week exhibitions through a cohesive visual identity and engaging user experience.
TEAM
Mahla Aghapour - Melika Rezazadeh - Sadra Almasi
TEAM
Mahla Aghapour - Melika Rezazadeh - Sadra Almasi
TEAM
Mahla Aghapour - Melika Rezazadeh - Sadra Almasi
Role
Interaction Design - UX Design - Art Direction
Role
Interaction Design - UX Design - Art Direction
Role
Interaction Design - UX Design - Art Direction
DURATION
Spring 2023, 5 weeks (Academic Project)
DURATION
Spring 2023, 5 weeks (Academic Project)
DURATION
Spring 2023, 5 weeks (Academic Project)
Project Overview
Project Overview
Project Overview
Fuorisalone is Milan Design Week’s citywide showcase. In a 5-week academic project, our team created a new visual identity and an interactive microsite to preview selected installations before the event.
Fuorisalone is Milan Design Week’s citywide showcase. In a 5-week academic project, our team created a new visual identity and an interactive microsite to preview selected installations before the event.
Fuorisalone is Milan Design Week’s citywide showcase. In a 5-week academic project, our team created a new visual identity and an interactive microsite to preview selected installations before the event.
Problem
Problem
Problem
Fuorisalone’s installations attract audiences interested in interactive art, but before the event, there was no unified digital space to preview or connect with these exhibitions. The challenge was to design a microsite that could communicate the event’s creative energy while offering a simple, intuitive way to explore.
Fuorisalone’s installations attract audiences interested in interactive art, but before the event, there was no unified digital space to preview or connect with these exhibitions. The challenge was to design a microsite that could communicate the event’s creative energy while offering a simple, intuitive way to explore.
Fuorisalone’s installations attract audiences interested in interactive art, but before the event, there was no unified digital space to preview or connect with these exhibitions. The challenge was to design a microsite that could communicate the event’s creative energy while offering a simple, intuitive way to explore.
Objective
Objective
Objective
How might we design an art-directed microsite that captures Fuorisalone’s experimental spirit and entices visitors to attend, while maintaining clarity, flow, and ease of exploration?
How might we design an art-directed microsite that captures Fuorisalone’s experimental spirit and entices visitors to attend, while maintaining clarity, flow, and ease of exploration?
How might we design an art-directed microsite that captures Fuorisalone’s experimental spirit and entices visitors to attend, while maintaining clarity, flow, and ease of exploration?
Discovery Phase
Discovery Phase
Discovery Phase
Over three weeks, the team created and tested poster directions influenced by Chris Ashworth and Ellen Lupton’s methods, experimenting with layering, contrast, distortion, transparency, and grid overlays.
Over three weeks, the team created and tested poster directions influenced by Chris Ashworth and Ellen Lupton’s methods, experimenting with layering, contrast, distortion, transparency, and grid overlays.
Over three weeks, the team created and tested poster directions influenced by Chris Ashworth and Ellen Lupton’s methods, experimenting with layering, contrast, distortion, transparency, and grid overlays.
Final Art Direction
Final Art Direction
Final Art Direction
From this exploration, a direction was chosen that combined textural layering with an overlay grid structure, establishing the foundation for the project’s brand identity and its later adaptation to web.
From this exploration, a direction was chosen that combined textural layering with an overlay grid structure, establishing the foundation for the project’s brand identity and its later adaptation to web.
From this exploration, a direction was chosen that combined textural layering with an overlay grid structure, establishing the foundation for the project’s brand identity and its later adaptation to web.
From Print to Web
From Print to Web
From Print to Web
The microsite reinterprets the poster’s grid, layering, and color for an interactive format. The magenta tones shifted to a deeper purple to signal interactivity, while ITC Avant Garde and IBM Plex Mono were paired for contrast and readability. A soft purple underlay on images fades on hover, echoing the layered depth of the print visuals and creating a smooth, cohesive digital experience.
The microsite reinterprets the poster’s grid, layering, and color for an interactive format. The magenta tones shifted to a deeper purple to signal interactivity, while ITC Avant Garde and IBM Plex Mono were paired for contrast and readability. A soft purple underlay on images fades on hover, echoing the layered depth of the print visuals and creating a smooth, cohesive digital experience.
The microsite reinterprets the poster’s grid, layering, and color for an interactive format. The magenta tones shifted to a deeper purple to signal interactivity, while ITC Avant Garde and IBM Plex Mono were paired for contrast and readability. A soft purple underlay on images fades on hover, echoing the layered depth of the print visuals and creating a smooth, cohesive digital experience.
Guiding the User
Guiding the User
Guiding the User
The microsite was structured as a guided pre-event experience, built around four stages (Access, Discover, Learn, and Visit). This flow encourages a natural sense of progression: users are first drawn in by motion and branding, then invited to explore exhibitions through intuitive hover interactions. Each step gradually reveals more context while maintaining visual consistency. The final call-to-action to join guestlists provides closure, turning curiosity into tangible engagement.
The microsite was structured as a guided pre-event experience, built around four stages (Access, Discover, Learn, and Visit). This flow encourages a natural sense of progression: users are first drawn in by motion and branding, then invited to explore exhibitions through intuitive hover interactions. Each step gradually reveals more context while maintaining visual consistency. The final call-to-action to join guestlists provides closure, turning curiosity into tangible engagement.
The microsite was structured as a guided pre-event experience, built around four stages (Access, Discover, Learn, and Visit). This flow encourages a natural sense of progression: users are first drawn in by motion and branding, then invited to explore exhibitions through intuitive hover interactions. Each step gradually reveals more context while maintaining visual consistency. The final call-to-action to join guestlists provides closure, turning curiosity into tangible engagement.
Prototyping Interactions
Prototyping Interactions
Prototyping Interactions
Motion was introduced to create a calm, exploratory rhythm across the microsite. On the home screen, subtle hover transitions reveal each exhibition through layered imagery and soft fades, inviting curiosity without visual noise.
On content pages, a horizontal scroll guides the viewer through exhibition stories, while responsive hover and video cues maintain engagement. The pacing and timing of each animation were tuned to feel intentional and reflective of Fuorisalone’s artistic tone.
Motion was introduced to create a calm, exploratory rhythm across the microsite. On the home screen, subtle hover transitions reveal each exhibition through layered imagery and soft fades, inviting curiosity without visual noise.
On content pages, a horizontal scroll guides the viewer through exhibition stories, while responsive hover and video cues maintain engagement. The pacing and timing of each animation were tuned to feel intentional and reflective of Fuorisalone’s artistic tone.
Motion was introduced to create a calm, exploratory rhythm across the microsite. On the home screen, subtle hover transitions reveal each exhibition through layered imagery and soft fades, inviting curiosity without visual noise.
On content pages, a horizontal scroll guides the viewer through exhibition stories, while responsive hover and video cues maintain engagement. The pacing and timing of each animation were tuned to feel intentional and reflective of Fuorisalone’s artistic tone.
Home Page
Hover animations reveal exhibition images beneath a purple overlay. Timed fades and slight scaling create a smooth, tactile feel that invites exploration without breaking the grid’s calm rhythm.
Home Page
Hover animations reveal exhibition images beneath a purple overlay. Timed fades and slight scaling create a smooth, tactile feel that invites exploration without breaking the grid’s calm rhythm.
Home Page
Hover animations reveal exhibition images beneath a purple overlay. Timed fades and slight scaling create a smooth, tactile feel that invites exploration without breaking the grid’s calm rhythm.
Content screen
Horizontal scrolling mimics walking through an installation. Subtle easing and hover-triggered video loops add motion and depth while keeping navigation clear and continuous.
Content screen
Horizontal scrolling mimics walking through an installation. Subtle easing and hover-triggered video loops add motion and depth while keeping navigation clear and continuous.
Content screen
Horizontal scrolling mimics walking through an installation. Subtle easing and hover-triggered video loops add motion and depth while keeping navigation clear and continuous.
What I Learned
What I Learned
What I Learned
This project pushed me to balance artistic direction with user clarity. Early on, our visuals carried energy but lacked structure. Translating them into a microsite forced me to think about hierarchy, pacing, and interaction logic as part of the design language itself.
I learned that every expressive element (color, motion, type) needs to serve communication, not just aesthetics. By reworking transitions and refining the way users move through the site, I began to see interaction as an extension of storytelling rather than an afterthought. That shift reshaped how I now approach visual design: not as composition, but as experience.
This project pushed me to balance artistic direction with user clarity. Early on, our visuals carried energy but lacked structure. Translating them into a microsite forced me to think about hierarchy, pacing, and interaction logic as part of the design language itself.
I learned that every expressive element (color, motion, type) needs to serve communication, not just aesthetics. By reworking transitions and refining the way users move through the site, I began to see interaction as an extension of storytelling rather than an afterthought. That shift reshaped how I now approach visual design: not as composition, but as experience.
This project pushed me to balance artistic direction with user clarity. Early on, our visuals carried energy but lacked structure. Translating them into a microsite forced me to think about hierarchy, pacing, and interaction logic as part of the design language itself.
I learned that every expressive element (color, motion, type) needs to serve communication, not just aesthetics. By reworking transitions and refining the way users move through the site, I began to see interaction as an extension of storytelling rather than an afterthought. That shift reshaped how I now approach visual design: not as composition, but as experience.