P001 → Fabrica - WhatIf?

A Project By: Aamir Ali, Alvin Leung, Krista McDiarmid, Rhees Kennedy, Samyak Shah

An Immersive Visual Arts Gallery

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.

01Context

WhatIf?
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.

02Art Direction

Creating A Concept

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.

Design Focus #1:
Through rapid visual sketches, we engaged in an extensive exploration of diverse concepts, by employing various combinations of qualities and principles.

Distorting Typography
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.

Converging Ideas
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.

Rhythmic Slicing
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.

Expanding Type
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.

Distressing Typography

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.

Design Focus #2:
Due to sharing themes with the WHATIF? exhibits, distressing typography was chosen as our art direction.

Our Typographic System
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.

03Interactions

Rapid Visual Sketches
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.

+ Expanding Grid (Home Page): Selecting an exhibit tile causes it to expand, unveiling additional content within the grid.

+ Expanding Grid (Exhibit Page): Selecting an exhibit tile causes it to expand, unveiling additional content within the grid.

+ 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.

Furthering Denial & Reward for Exploring Content
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:

04Prototype

+ Onboarding: Visitors explore how scrolling reveals content through distortion.

Onboarding Our Visitors
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.

Utilizing Denial & Reward To Encourage Exploration
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.

Highlighting Each Exhibit’s Unique 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

Tailored Interactions
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.

Persistent Navigation
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.

Incorporating Accessibility For Multiple Devices
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.

Resistive Scroll
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:

Aamir‘s Study

Fabrica - WhatIf? IDAGIO - DiscoveryScience World - Brainery Explorations Into Art Direction

About© 2024 Aamir Ali

Fabrica - WhatIf?
IDAGIO - Discovery
Science World - Brainery
Explorations Into Art Direction

About
© 2024 Aamir Ali