X
An Image Showcasing a Laptop with a Website

A pre-exhibition microsite that provides a curated preview of artworks by 14 international artists, featured in Fondazione Prada’s 'Give Me Yesterday' exhibition.

Over the course of five weeks, our exploration of art direction and graphic experimentation with posters transitioned into content-driven interaction design. By analyzing key precedents aligned with our design principles & qualities, we developed a final microsite that combined intentional content design with informed art direction.

This project is not associated with exhibition. It was chosen as a mock client for an academic assignment.

YEAR & DURATION

2022 - 5 Weeks

MY ROLE

Lead Visual Designer, Interaction Designer, Prototyping

TEAM MEMBERS

Claret Egwim-Nwagbara, Jasper Precilla, Sam Newaz, Karishma Sen

TOOLS

Figma, After Effects, Protopie, Processing


FRAMING

How can we design a visual language that works seamlessly across print and web, inspiring visitors to explore and learn more about these art collections?


FONDAZIONE PRADA IS PROVOCATIVE

Our direction for Fondazione Prada is inspired by the curated aesthetic of photographic art, drawing parallels to the evocative and unconventional works of Torbjørn Rødland. This approach, combined with the introspective themes of the Give Me Yesterday exhibition, creates a visual narrative that is both thought-provoking and surreal. Below are exploratory examples capturing this unique brand essence in action.

Billboard Asset
Wall Asset
Wall Asset

IMMERSIVE PREVIEW

Greeting the visitor with floating images from the exhibition, each artist section and the associated content are previewed through a colour representation. The transition from artist to artist can be seamlessly achieved using a vertical scroll or by clicking through the navigation. This design ensures the image remains the primary focus while still catering to users who prefer to access additional information.

INTERACTIVE SPOTLIGHT

Each artist has a preview displayed at a large scale. The circle cursor appears as the user is moving across the artist landing page screen, when clicked upon it transitions the visitor to the artist gallery.

PARALLAX IMAGE GALLERY

The visitor is able to view all of the artist’s images in a long horizontal parallax scroll. By layering the images on top of each other and moving them at different speeds as the user scrolls, we apply the concept of figure and ground to create depth. When you reach the end of the gallery, you can scroll past a resistive scroll which allows you to travel to the next artist’s gallery.

HOVER TO VIEW AN IMAGE IN FULL

By hovering over an image, the visitor is able to expand its size to view the image as a whole. To better implement the concept of large scale shifts and figure and ground, the background will shrink while the content is pushed to the side as the image expands.


INITIAL EXPLORATIONS

During our process, we realized we were experimenting with interaction design separately from visual design, which hindered unity and made it difficult to justify design decisions. To address this, we explored additional precedents to better align our interactions with the core elements of our art direction.

First Ideation

Type seperation

Second Ideation

Scaled type

Third Ideation

Halftones to conceal


COMBINING APPROACHES

We decided to move forward with the second direction and implemented elements from the third direction like the interesting page transitions and interactive circular cursor. I guided the final interaction designs to achieve this sense of harmony.

First Ideation

TYPOGRAPHY CHOICE

I chose Neue Haas Grotesk due to its clean, modern sans-serif typeface with neutral letterforms that offer a timeless and versatile appearance. Its balanced proportions and minimal contrast create a harmonious visual flow, making it suitable for both body text and headlines.

First Ideation

COLOUR CATEGORIZATION

Using a near tertiary colour palette of yellow with energetic cool tones, we created colour coordinated subsections for different sections of the exhibitions. This creates a sense of unity when scrolling through related works and a clear shift from one section to another. The yellow creates a sense of consistency throughout the entire site even as the other colour changes.

First Ideation

POSTER ITERATION

First Ideation

RETROSPECTIVE

If I could go back, I would have definitely explored more ways to enhance the artists' page, not just through additional interactions, but by incorporating thoughtful content that could elevate the experience of the pre-exhibition site. The team faced tight deadlines, which limited our ability to experiment as much as we would have liked.

Crafting this visual identity was a journey of exploration that not only honed my skills in visual and digital design but also expanded my overall perspective on design. It made me recognize that design isn't confined to the present; it draws inspiration from the past and shapes the future. The prospect of inspiring others through our creations adds an intriguing dimension to this experience.