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.
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.
Tools
Figma
Photoshop
After Effects
Teammates
Caleb Wu
Julia Robledano
Hazel Hau
Scope
Case Study
Eight weeks,
Fall 2023
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.
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.
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.
01
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.
02
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.
Microsite Highlights
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.
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.
Hover to Reveal Brera’s Best Aperitivo
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.
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.
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
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.
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
Derived Design Qualities
01
Disrupting text consistency to confront excess negative space
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.
02
Breaking the grid to reveal its underlying structure
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.
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.
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.
A selection of the posters and graphic assets I created when working to establish our art direction. Poster on the right is the final art direction.
Personal Reflection
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.
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.
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.
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.