Fuorisalone
Fuorisalone
Project Objective
Creating an exploratory microsite which captures the keynotes of Brera Design District's culture, encouraging users to wholly immerse themselves in Milan’s key design event. Traditional digital experiences are often one-dimensional and fail to convey the spatial and cultural depth of an event as rich as this. We aimed to create an interaction and content approach which broke these boundaries, inspiring designers and non-designers alike.
Project Objective
Creating an exploratory microsite which captures the keynotes of Brera Design District's culture, encouraging users to wholly immerse themselves in Milan’s key design event. Traditional digital experiences are often one-dimensional and fail to convey the spatial and cultural depth of an event as rich as this. We aimed to create an interaction and content approach which broke these boundaries, inspiring designers and non-designers alike.
Project Objective
Creating an exploratory microsite which captures the keynotes of Brera Design District's culture, encouraging users to wholly immerse themselves in Milan’s key design event. Traditional digital experiences are often one-dimensional and fail to convey the spatial and cultural depth of an event as rich as this. We aimed to create an interaction and content approach which broke these boundaries, inspiring designers and non-designers alike.
My Role
I led content strategy for this project, curating a direction which effectively communicated the cultural keynotes of the Brera Design District. Additionally, I contributed as an interaction and visual designer, crafting meaningful micro-interactions to create a novel user experience.
I led content strategy for this project, curating a direction which effectively communicated the cultural keynotes of the Brera Design District. Additionally, I contributed as an interaction and visual designer, crafting meaningful micro-interactions to create a novel user experience.
Case Study
Eight weeks,
Fall 2023
Case Study
Eight weeks,
Fall 2023
Figma
Photoshop
After Effects
Figma
Photoshop
After Effects
Caleb Wu
Julia Robledano
Hazel Hau
Caleb Wu
Julia Robledano
Hazel Hau
Tools
Tools
Teammates
Teammates
Scope
Scope
An Immersive Interaction Approach
An Immersive Interaction Approach
The team's aim was to create an interaction approach which established immersivity by simulating the user’s physical movement through Brera. To enhance this, I proposed integrating a map and street layout, further grounding the user's virtual experience within the city and deepening the sense of immersion.
The team's aim was to create an interaction approach which established immersivity by simulating the user’s physical movement through Brera. To enhance this, I proposed integrating a map and street layout, further grounding the user's virtual experience within the city and deepening the sense of immersion.
Initial Explorations
Initial Explorations
Designing laterally by exploring three different microsite lines which would convey our interaction approach. Our final microsite was a combination of elements used in each line that would cultivate our desired feel of physically navigating the Brera District through a virtual medium.
Designing laterally by exploring three different microsite lines which would convey our interaction approach. Our final microsite was a combination of elements used in each line that would cultivate our desired feel of physically navigating the Brera District through a virtual medium.
Finalising Primary Microinteractions
Finalising Primary Microinteractions
Building on my suggestion, the team landed on two primary motifs throughout the site which best simulates the user navigating the streets of Brera and physically following the bustling district map.
Building on my suggestion, the team landed on two primary motifs throughout the site which best simulates the user navigating the streets of Brera and physically following the bustling district map.
01
01
Scroll to instigate line formation
Scroll to instigate line formation
Scrolling reinforces motion and direction. The gradual emergence of lines through and between pages mirrors the user walking through the streets of the Brera District.
Scrolling reinforces motion and direction. The gradual emergence of lines through and between pages mirrors the user walking through the streets of the Brera District.
02
02
Drag to explore map
Drag to explore map
This map physically situates the user in a literal representation of the Brera District. Dragging gives the user more agency to control their movement in all directions on the screen, encouraging further exploration.
This map physically situates the user in a literal representation of the Brera District. Dragging gives the user more agency to control their movement in all directions on the screen, encouraging further exploration.
Microsite Highlights
Hover to Meet Brera’s Ambassadors
Hover to Meet Brera’s Ambassadors
Videos and quotations highlight the designer’s voice, showcasing district ambassadors in a more immersive manner which strengthens Brera’s identity.
Videos and quotations highlight the designer’s voice, showcasing district ambassadors in a more immersive manner which strengthens Brera’s identity.
Scroll to Learn Brera’s Values
The values highlight Brera’s key role in promoting Italian design globally as well as the district’s dedication to integrating traditional design with more innovative approaches.
The values highlight Brera’s key role in promoting Italian design globally as well as the district’s dedication to integrating traditional design with more innovative approaches.
Scroll to Learn Brera’s Values
Hover to Reveal Brera’s Best Aperitivo
Hover to Reveal Brera’s Best Aperitivo
Following the lines which mimic district roads, the user clicks on site dots to access exhibit details at their geographical location.
Click Site Dots to Explore Events
This surpasses the design scope, fully immersing a user in the rest of Brera's lively culture, primarily the love for aperitivo, as they navigate design exhibits during the event.
This surpasses the design scope, fully immersing a user in the rest of Brera's lively culture, primarily the love for aperitivo, as they navigate design exhibits during the event.
Click Site Dots to Explore Events
Following the lines which mimic district roads, the user clicks on site dots to access exhibit details at their geographical location.
Drag to Reveal Brera’s Best Aperitivo
This surpasses the design scope, fully immersing a user in the district as they scroll to reveal streets in context of the larger map, giving the user a sense of their location on the microsite.
A selection of the images, designers and exhibits carefully chosen to create content which would meaningfully reflect the message of the Brera Design District in our microsite
Curating Meaningful Content
To capture the Fuorisalone’s core values of transformation and innovation, I developed the theme of challenging traditional form as the foundation for the site’s content. Through thorough research, I identified graphics from Italy’s Radical Design Movement, particularly from Superstudio and Archizoom, that aligned with this theme. Drawing from these works, along with key designers and landmarks, I was able to ground our microsite content in pieces that truly embodied these values, reinforcing the site’s overall message.
A selection of the images, designers and exhibits carefully chosen to create content which would meaningfully reflect the message of the Brera Design District in our microsite
Curating Meaningful Content
To capture the Fuorisalone’s core values of transformation and innovation, I developed the theme of challenging traditional form as the foundation for the site’s content. Through thorough research, I identified graphics from Italy’s Radical Design Movement, particularly from Superstudio and Archizoom, that aligned with this theme. Drawing from these works, along with key designers and landmarks, I was able to ground our content in pieces that truly embodied these values, reinforcing the site’s overall message.
To capture the Fuorisalone’s core values of transformation and innovation, I developed the theme of challenging traditional form as the foundation for the site’s content. Through thorough research, I identified graphics from Italy’s Radical Design Movement, particularly from Superstudio and Archizoom, that aligned with this theme. Drawing from these works, along with key designers and landmarks, I was able to ground our microsite content in pieces that truly embodied these values, reinforcing the site’s overall message.
Studying Friedman’s posters and exercises such as the Weathering Report as well as Operations on a Line Grid led us to draw our design qualities
Art Direction Experimentation
The team began graphic exploration driven by Dan Friedman’s design qualities and constrained by principles from Ellen Lupton. We focused on Friedman’s practice of appearing to visually deconstruct syntactic structures while still grounded by grids and typographic rules. By closely examining Friedman's work, I continuously delved deeper into the "why" behind each design decision, contributing significantly to deriving our final design qualities.
The team began graphic exploration driven by Dan Friedman’s design qualities and constrained by principles from Ellen Lupton. We focused on Friedman’s practice of appearing to visually deconstruct syntactic structures while still grounded by grids and typographic rules. By closely examining Friedman's work, I continuously delved deeper into the "why" behind each design decision, contributing significantly to deriving our final design qualities.
Derived Design Qualities
01
02
03
01
02
03
Disrupting text consistency to confront excess negative space
Breaking the grid to reveal its underlying structure
Overlapping grids to drive a dynamic composition
Disrupting consistent letter spacing, leading, alignment and experimenting with the absence clusters allows elements to occupy more negative space and forces the eye to engage with every element of the composition.
Overlaying specific elements which break the grid creates unpredictability. These visual disruptions draws focus and makes the placement of other elements defined by the grid even more apparent.
Employing multiple overlapping grids creates opportunities for unconventional spacing and form, driving a sense of direction and dynamism within the composition.
Disrupting text consistency to confront excess negative space
Breaking the grid to reveal its underlying structure
Overlapping grids to drive a dynamic composition
Disrupting consistent letter spacing, leading, alignment and experimenting with the absence clusters allows elements to occupy more negative space and forces the eye to engage with every element of the composition.
Overlaying specific elements which break the grid creates unpredictability. These visual disruptions draws focus and makes the placement of other elements defined by the grid even more apparent.
Employing multiple overlapping grids creates opportunities for unconventional spacing and form, driving a sense of direction and dynamism within the composition.
03
Overlapping grids to drive a dynamic composition
Employing multiple overlapping grids creates
opportunities for unconventional spacing
and form, driving a sense of direction and
dynamism within the composition.
A selection of the posters and graphic assets I created when working to establish our art direction
Final art direction
A selection of the posters and graphic assets I created when working to establish our art direction
FUORISALONE
MILAN DESIGN WEEK
MILAN DESIGN WEEK
the
FANDANGO
KURIOPOTEK
SCENT AND PSYCHE
PIOGGIA BOTANICA
FRAGRANCE PARTICLES
LABORATORIO DI UN NASO
BERTIF, TIMELESS SCENT
04.02 2015
REINNOVATING EIGHT LOST BRANDS
of
FUO
FUO
RI
RI
SAl
SA
LONE
on
e
BRERADESIGNDISTRICT
BRERADESIGNDISTRICT
BRERADESIGNDISTRICT
APRILSECONDTWENTYFIFTEEN
APRILSECONDTWENTYFIFTEEN
20150402
20150409
FAND ANGO
KU RI OPOTEK
SC ENT AND PSY CHE
PIO GGIA BOT ANICA
FRA GR ANCE PAR TIC LES LABO RATORIO DI UN NASO BER TIF, TIME LE SS SC ENT
FAND ANGO
KU RI OPOTEK
SC ENT AND PSY
FAND ANGO
KU RI OPOTEK
SC ENT AND PSY
A selection of the posters and graphic assets I created when working to establish our art direction
Convergence from Three Directions
After continuous iteration, we converged onto our third line of inquiry as represented by this poster - overlapping grids to drive dynamism paired with the principle of framing. We focused on this line due to the potential of overlapping grids in heightening visual interest on a dynamic website.
After continuous iteration, we converged onto our third line of inquiry as represented by this poster - overlapping grids to drive dynamism paired with the principle of framing. We focused on this line due to the potential of overlapping grids in heightening visual interest on a dynamic website.
Personal Reflection
Design is 90% soft skills
Design is 90% soft skills
Leading the project and handling the majority of copywriting as well as content research allowed me to realise the importance of these soft skills which ground the entire project. A solid foundation can then allow the visual graphics to shine and produce design which creatively communicates something more meaningful than mere aesthetic.
Leading the project and handling the majority of copywriting as well as content research allowed me to realise the importance of these soft skills which ground the entire project. A solid foundation can then allow the visual graphics to shine and produce design which creatively communicates something more meaningful than mere aesthetic.
The importance of details
The importance of details
This project really highlighted the importance of details in our microinteractions, in the content we chose to include which would form the basis of a user’s entire interactive journey. These small elements represent the whole experience that we are trying to establish as designers, playing an integral role in creating that spark of unique appeal within a user as they navigate a site.
This project really highlighted the importance of details in our microinteractions, in the content we chose to include which would form the basis of a user’s entire interactive journey. These small elements represent the whole experience that we are trying to establish as designers, playing an integral role in creating that spark of unique appeal within a user as they navigate a site.
The value of abstraction
The value of abstraction
Honing in on a specific yet actionable design quality, image direction and content approach could only be achieved by abstracting the essence of a theme and eliminating the unnecessary. This has allowed me to simplify and use design as a tool to communicate clearly and meaningfully.
Honing in on a specific yet actionable design quality, image direction and content approach could only be achieved by abstracting the essence of a theme and eliminating the unnecessary. This has allowed me to simplify and use design as a tool to communicate clearly and meaningfully.
In the future
In the future
In future projects, I would adopt a more open-ended approach that prioritizes lateral exploration. While our goal was to break traditional design forms, I believe we could have pushed this even further by dedicating more time to exploring alternative ways to enhance immersivity. Rather than focusing solely on simulating physical experience, we could have embraced more radical design concepts that redefined interaction beyond spatial representation.
In future projects, I would adopt a more open-ended approach that prioritizes lateral exploration. While our goal was to break traditional design forms, I believe we could have pushed this even further by dedicating more time to exploring alternative ways to enhance immersivity. Rather than focusing solely on simulating physical experience, we could have embraced more radical design concepts that redefined interaction beyond spatial representation.