OVERVIEW
Lunar Gala 2021: COLLECTIVA
Lunar Gala is Pittsburgh's largest annual fashion show. On the web team, I worked with 3 other designers to imagine what the web and mobile identity would be for the 2021 theme: COLLECTIVA.
MY ROLE
Visual + Web Designer 🙋🏻
With the show being shown remotely due to COVID, a lot of my responsibility was focused on creating a centralized platform that would provide key information and access to the show while also showcasing all the people involved in the process. We worked closely with the motion theme to bring more interactive elements to further tell the theme's story.
UX LOGIC
Site Architecture
The 2021 site is designed and developed for both web and mobile interfaces. Both take advantage of the different interactions each uniquely have such as mouse hovering animation for web and gyroscope rotation for mobile.
The site is also organized into four main pages with the Fashion Line and People breaking into more sub pages.
UX LOGIC
Site Architecture
The 2021 site is designed and developed for both web and mobile interfaces. Both take advantage of the different interactions each uniquely have such as mouse hovering animation for web and gyroscope rotation for mobile.
The site is also organized into four main pages with the Fashion Line and People breaking into more sub pages.
TYPE SYSTEMCohesion Between Various TeamsFor both web and mobile, we followed this type system to cohesively design along with the Print and Motion teams. Because we relied so heavily on the typeface to build the identity for COLLECTIVA, we wanted to make sure that a similar type system was throughout the site.
TYPE SYSTEMCohesion Between Various TeamsFor both web and mobile, we followed this type system to cohesively design along with the Print and Motion teams. Because we relied so heavily on the typeface to build the identity for COLLECTIVA, we wanted to make sure that a similar type system was throughout the site.
PROBLEM SPACE
A Fashion Show during COVID-19
The main focus of the 2021 site is to showcase the designer's fashion lines as there is no longer an in-person show. In the end, we decided on a format that allows users to switch between different lines all within one page.
We wanted a format that would allow each line to feel distinctive and individual while still belonging together with cohesive UI and visuals from the motion team.
PROBLEM SPACE
A Fashion Show during COVID-19
The main focus of the 2021 site is to showcase the designer's fashion lines as there is no longer an in-person show. In the end, we decided on a format that allows users to switch between different lines all within one page.
We wanted a format that would allow each line to feel distinctive and individual while still belonging together with cohesive UI and visuals from the motion team.
WEB FEATURE 1
Animated Background Scenes
Each line also has animated scenes that were created by the motion team. This work alongside with the designer's work to further develop their concept ideas by bringing the viewers into these visual scenes.
WEB FEATURE 1
Animated Background Scenes
Each line also has animated scenes that were created by the motion team. This work alongside with the designer's work to further develop their concept ideas by bringing the viewers into these visual scenes.
WEB FEATURE 2
Cube as a MetaphorOn the landing page, we have a cube that breaks apart, metaphorically representing the concept's interconnected society. Each section of the cube represents a line, which can be interacted with through clicking on the line number and by mouse hovering.
WEB FEATURE 2
Cube as a MetaphorOn the landing page, we have a cube that breaks apart, metaphorically representing the concept's interconnected society. Each section of the cube represents a line, which can be interacted with through clicking on the line number and by mouse hovering.
WEB FEATURE 3
Cohesive Visual UI
The About and People page also have some interactive and animated elements to tie the whole site together. The site also has a watch page, which was a countdown timer before the livestream was released.
WEB FEATURE 3
Cohesive Visual UI
The About and People page also have some interactive and animated elements to tie the whole site together. The site also has a watch page, which was a countdown timer before the livestream was released.
MOBILE FEATURES
Gyroscope Interaction
On mobile, we tried to bring the same interactions from the web version. On iPhone, users can use their gyroscope to make the cube element along with their motion. We were able to create a cohesive design system, which allowed our visual and UI elements to easily translate down to mobile.
MOBILE FEATURES
Gyroscope Interaction
On mobile, we tried to bring the same interactions from the web version. On iPhone, users can use their gyroscope to make the cube element along with their motion. We were able to create a cohesive design system, which allowed our visual and UI elements to easily translate down to mobile.
THEME DEVELOPMENTEusociality to COLLECTIVAWe made many iterations before settling on the final design. Most of them played with the hierarchy and flow of information on the line pages. Like I mentioned before, we were especially concerned with how we could give each individual line their own moment while also highlighting that they are all cohesively all apart of one thing.
THEME DEVELOPMENTEusociality to CollectivaWe made many iterations before settling on the final design. Most of them played with the hierarchy and flow of information on the line pages. Like I mentioned before, we were especially concerned with how we could give each individual line their own moment while also highlighting that they are all cohesively all apart of one thing.
PROCESS
4 Months of Iteration...
We made many iterations before settling on the final design. Most of them played with the hierarchy and flow of information on the line pages. Like I mentioned before, we were especially concerned with how we could give each individual line their own moment while also highlighting that they are all cohesively all apart of one thing.
PROCESS
4 Months of Iteration...
We made many iterations before settling on the final design. Most of them played with the hierarchy and flow of information on the line pages. Like I mentioned before, we were especially concerned with how we could give each individual line their own moment while also highlighting that they are all cohesively all apart of one thing.
Reflection & Thoughts...
This was my first visual project that was designed for a large audience and being the youngest on a team of senior designers taught me quite a lot and formed some great friendships! Here's what I learned in the 8 months of making and iterating!
🦋 Metaphors through Interaction
In working on this project and seeing the end result, I have seen how web interactions can drive a narrative's concept even further. With the breaking apart and rotation of the cube, we were able to use this interaction as a metaphor for an interconnected society that values everyone's contributions.
⚠️ Prepare for the Unexpected!
This takeaway applies in two ways. First, when working on a project of this scale (in which we were designing for Pittsburgh's biggest fashion show), prepare for lots of pivots. Aligning so many people on a team to the same page will rarely happen. Second, never expect your final designs to translate perfectly to cone. Especially when working on something that has complicated interactions and 3-D modeling, be ready to prepare for the worst when implementing.