La Bâtie-Festival de Genève

Art Direction and Interaction Design

2021

Experimental microsite and brand collateral for La Bâtie.

Scroll

Duration

4 Weeks

Role

Art Direction

Visual Design

Interaction Design

Team

Andrew Cabu

Ashley Yien

Brendan Chow

Maple Sukontasukkul

Tapping into the expressive and creative side of design, the objective of this project was to experiment with visual print designs and translating them into a digital microsite with a deep focus on interactions.

La Bâtie-Festival de Genève was the client in which we designed for. The festival is an annual event consisting of a wide variety of eccentric and traditional performance arts events.

The Microsite

Loading Sequence

This is our loading sequence. Patterns appear simultaneously with their corresponding genre to give greater attention to these elements. The page lights up to signify that the loading sequence is complete and the site is ready to be interacted with.

Loading Sequence

This is our loading sequence. Patterns appear simultaneously with their corresponding genre to give greater attention to these elements. The page lights up to signify that the loading sequence is complete and the site is ready to be interacted with.

Landing Page + Genre Page

The landing page features patterns that correspond to events of the festival and upon hovering over them, it’s name appears and a masked video of the event plays.

As hinted in the loading sequence, the genres of events are interactable. This is further suggested by the hover effect. Switching between the genres changes the color of the grid and only the events within the genre remain.

Landing Page + Genre Page

The landing page features patterns that correspond to events of the festival and upon hovering over them, it’s name appears and a masked video of the event plays.

As hinted in the loading sequence, the genres of events are interactable. This is further suggested by the hover effect. Switching between the genres changes the color of the grid and only the events within the genre remain.

Event Page

When an event is clicked, the site advances to an event page where details of the event behind our bespoke type can be uncovered by hovering over them. The button at the bottom right of the grid provides a grand reveal of the video that has been masked throughout the site. A prompt to scroll appears at the bottom of the screen, in which readable information about the event appears. Certain keywords are highlighted and reveal a relevant photo on hover. The bottom of this page features suggested events and a way to further explore the rest of the site.

Event Page

When an event is clicked, the site advances to an event page where details of the event behind our bespoke type can be uncovered by hovering over them. The button at the bottom right of the grid provides a grand reveal of the video that has been masked throughout the site. A prompt to scroll appears at the bottom of the screen, in which readable information about the event appears. Certain keywords are highlighted and reveal a relevant photo on hover. The bottom of this page features suggested events and a way to further explore the rest of the site.

Search Function

For our search page, one of the larger issues we encountered was differentiation from our primary experience. By leveraging a monochrome palette similar to the loading screen, it remains visually cohesive and recognizable as an extension of the main experience.

As an experience for both returning and potential visitors of the festival, the search bypasses unnecessary interactions for those with an idea of what/who to search for, while conversely providing a way to discover obscure events if someone is unsure what to look for.

Search Function

For our search page, one of the larger issues we encountered was differentiation from our primary experience. By leveraging a monochrome palette similar to the loading screen, it remains visually cohesive and recognizable as an extension of the main experience.

As an experience for both returning and potential visitors of the festival, the search bypasses unnecessary interactions for those with an idea of what/who to search for, while conversely providing a way to discover obscure events if someone is unsure what to look for.

Art Direction Process + Visual Design

Studying a Graphic Precedent

The process started with realizing an art direction by experimenting through poster designs coupled with physical assets. We studied the works of Rudy VanderLans and Zuzana Licko in Emigre Magazine to extract design qualities that we could leverage to lead our art direction and design choices. The duo of Emigre Magazine were very experimental with their use of typography, often resulting in illegible type in their compositions. We were intrigued by this concept and decided to follow the design quality of Using Abstract Forms to Create Type in our visual design.

Work from Emigre Magazine

Visual Design Explorations

The team explored three different approaches that all employ a custom type by using a modular system of abstract forms. The first approach uses repeating circles of varying sizes in a grid. The second approach also uses circles in a grid, but more emphasis on negative space. The third approach was a more abstract take on a modular type. I spent the most time designing the second approach.

Here are the three approaches in more detail…

Exploration 1

Exploration 2

Exploration 3

The team moved forward with the first exploration for the microsite because of its strong sense of identity and we felt it would translate the best into the digital medium after analyzing the calendar asset.

Adapting Print to Web

Moving into the microsite and designing interactions, the team felt it was necessary to adjust our design qualities to better fit the digital medium. We changed the quality of Using Abstract Forms to Create Type to Using Abstract Forms to Promote Navigation because we didn’t want to be constrained to using abstract type across the entire experience. Instead, we focused more on the pattern system we had developed as points of interest and as a form of navigating through the site.

In addition to our pattern system, we wanted to connect our interactions with the concept of ambiguity to magnify satisfaction at the end of the experience. This idea is especially clear in the masking of videos behind the grid of shapes and the reveal on hover of event details.

Key Learnings

Inspiration Is in Everything

During this project, I learned that designers can draw inspiration from a wide range of sources. While analyzing graphic precedents for inspiration, we encountered works that challenged our perceptions and may not have been typically considered "aesthetically pleasing." Nevertheless, we found that there are always design elements that can be reinterpreted and applied in a modern context.

Duration

4 Weeks

Role

Art Direction

Visual Design

Interaction Design

Team

Andrew Cabu

Ashley Yien

Brendan Chow

Maple Sukontasukkul

Tapping into the expressive and creative side of design, the objective of this project was to experiment with visual print designs and translating them into a digital microsite with a deep focus on interactions.

La Bâtie-Festival de Genève was the client in which we designed for. The festival is an annual event consisting of a wide variety of eccentric and traditional performance arts events.

Duration

4 Weeks

Team

Andrew Cabu

Ashley Yien

Brendan Chow

Maple Sukontasukkul

Role

Art Direction

Visual Design

Interaction Design

Tapping into the expressive and creative side of design, the objective of this project was to experiment with visual print designs and translating them into a digital microsite with a deep focus on interactions.

La Bâtie-Festival de Genève was the client in which we designed for. The festival is an annual event consisting of a wide variety of eccentric and traditional performance arts events.

  • Let’s get in touch.

© 2024 Adrian Fung

Designed in Figma. Built with Framer.

  • Let’s get in touch.

© 2024 Adrian Fung

Designed in Figma. Built with Framer.

  • Let’s get in touch.

© 2024 Adrian Fung

Designed in Figma. Built with Framer.