P001 → Fabrica - WhatIf?
Whatif? is a post-event microsite designed to replicate and preserve art exhibitions curated by a diverse group of artists during a six-month residency at Italy's Fabrica Research Centre.
The title of 2020’s Fabrica exhibition was called “What If?. Featuring twelve temporary interactive exhibitions that explored humanity’s evolving relationship with technology in the future.
The project aimed to create a microsite serving as a post-event archive, preserving the twelve temporary exhibitions by abstractly replicating the unique experience and identity of each.
Developing An Art Direction
Our art direction took root in a fusion of design principles drawn from the works of Chris Ashworth and the fundamental graphic design principles advocated by Graphic Design Author Ellen Lupton.
Through rapid visual sketches, we engaged in an extensive exploration of diverse concepts, by employing various combinations of qualities and principles.
In these examples, I primarily distorted typography by slicing. The first two used the grid structure for slicing, while the last employed rhythm to add movement to the process.
After having diverged, to explore visual concepts independently, this stage brought the team together and required us to scale up our concepts to assess viability across different media.
Our third lateral process explored the emphasis of a varying grid through the slicing and displacing of text, also serving to integrate interweaving rhythmic patterns.
Another of our processes explored emphasis of an expanding and contracting rhythm throughout cells of a grid, made apparent through the manipulation of thick, blocky type.
Our first process explored a digital Ashworth-like approach, in which we distorted elements to create a progressive rhythm, as well as call attention to a varying grid.
Due to sharing themes with the WHATIF? exhibits, distressing typography was chosen as our art direction.
After converging on our concept concept, the team moved to to crafting a typographic system that would complement our use of distortion, harsh lines, and futuristic themes.
for layouts and interactions
Utilizing our visual design principles and qualities, I explored techniques to aid people in navigating our site and uncovering content from a user-experience and interaction design standpoint.
Dynamically Shifting Grids
In these sketches, I explored using dynamical grids that shift previous content, and expand the grid of the currently selected piece of content.
+ Shifting Grid #1 (Home Page): Selecting an exhibit tile prompts it to shift and scale down, revealing additional content and indicating a deeper navigation level.
+ Shifting Grid #1 (Exhibit Page): Selecting an exhibit tile prompts it to shift and scale down, revealing additional content and indicating a deeper navigation level.
+ Shifting Grid #2 (Home Page): Using Denial & Reward, users see a rotating selection of images that, when clicked, shift and scale down to reveal additional content, indicating a deeper navigation level.
+ Shifting Grid #2 (Exhibit Page): Using Denial & Reward, users see a rotating selection of images that, when clicked, shift and scale down to reveal additional content, indicating a deeper navigation level.
In this sketch, I explored using distortion as an interactive tool to uncover content, wherein elements on the microsite are distorted and the user must interact with the site in order to view more content.
+ Distortion Technique: This exploration employs distortion as a form of denial; when elements are selected or animated, they un-distort to reveal the underlying content.
+ Distortion Technique: This exploration employs distortion as a form of denial; when elements are selected or animated, they un-distort to reveal the underlying content.
Design Focus #3:
+ Onboarding: Visitors explore how scrolling reveals content through distortion.
The landing page serves as an introduction, familiarizing visitors with our distortion technique to reveal content. As they scroll, elements un-distort, unveiling information for the introductory section.
+ Exhibit Selection: Visitors engage with denial & reward techniques to enhance their exploration experience.
The exhibit selection page serves as the microsite's focal point, guiding visitors in their choices. Techniques of denial and reward enhance decision-making through image cropping and "what if" prompts, encouraging deeper exploration.
+ Exhibit Identity: Unique colours and fonts amplify each piece’s distinct voice.
Each exhibit page emphasizes individuality, showcasing distinct voices through tailored color and font pairings. Custom interactions, inspired by the physical exhibit, evoke similar thoughts and emotions.
+ Tailored Experiences: Each exhibit hosts unique micro-interactions abstracted from the exhibit pieces
Mirroring the physical experience, Faith’s exhibit page utilizes the visitor’s cursor, as an abstraction of themselves, to achieve the same effect and facilitate a similar introspection.
+ Exhibit Navigation: The transition from staggered to single-stack elements reflects the mental model we aim to instil in visitors regarding the microsite's content structure.
I designed the nav-bar to be a dynamic site-wide navigational aid that helps visitors with way-finding. By anchoring a persistent visual element to the page, guests are able to better orient themselves when switching between the exhibit selection and exhibit pages.
+ Exhibit Navigation: Users can easily transition between exhibits with a sticky cursor.
Selecting an exhibit expands the preview card into a title card, transitioning seamlessly to the infinitely scrolling secondary exhibit stream. A sticky cursor remains anchored to the navigation bar, ensuring easy access on mobile devices while guiding users through their journey. This dynamic design reinforces context changes to the navigation’s mental model.
+ Resistive Scroll: Intentional pauses enhance content pacing.
Carefully placed resistive scroll punctuates the content across the site. Acting as a speed bump for the scrolling in order to create a more mindful viewing experience.
Other Projects: