Jiaqi Liu Design - LUMINOSITY

Project Introduction:

Luminosity is a motion design plus immersive design project made for heroes who fight against COVID-19 pandemic for people around this country and world. Their humanity is like the light going through this dark time — “Luminosity.“ I recognized the significance of positive message and virtual space while people are in their quarantine. Positive message can encourage people, and immersive space can let the freedom breathe.

Role: Illustrator, Motion Designer, Bookmark Designer, Immersive Designer

Task: 10 illustrations, 1 Motion Graphic Video, 10 Bookmarks, 1 Immersive Video Gallery

Client: for Newhouse Creative Challenge Contest

Problem: Limited accessible art galleries and museums during pandemic

Date & Duration: January 1 to February 1, 2021

Concept: Humanity and Light

Humanity is a complex concept which projects facets of our life so broadly, from details in daily basis to the life meaning as a human being. In the light of that fact, it is impossible to use one word to illustrate “humanity.“ But, during this pandemic year, I see people have already seen large range of darkness and suffered great painfulness. Due to my awareness of mental health, I want to convey some positive message to my audience to support them overcoming their depress, anxiety and stressfulness. Looking at a half glass of water, some people would see the empty half part, but some would see the half part which is full of water. In the case of this COVID year, even though there were so many negative incidents happened, there are still some positive things that are worth to notice and remember — light still exists.

Project Process:

1. Illustrations

I decided to draw frontline workers in hospitals, community health workers, and media workers to represent the light of humanity. After making the decision, I used Illustrator to illustrate some photos of them in abstract style because I thought those abstract elements could better emphasize their characters instead of drawing out all the details.

Frontline Worker

Frontline Worker in Hospital

Community Health Worker

Media Worker

2. Basic layout

I first typed out all the content on a blank InDesign document. Then, I searched fonts on Google fonts and applied two typefaces for display title and body copy respectively. Krona One for the display typeface, and Quasimoda for the body copies. After that, I selected the color of light yellow for the text and dark grey for the background to convey a sense of light in the darkness.

3. Motion Graphic Video

First, I arranged every element on the composition of After Effects. Then I applied the style I designed in InDesign to this composition. After settled down the motion for the first letter, I copied and pasted that motion to the subsequent letters to maintain the consistency. I used mask on the word “LUMINOSITY“ to show those ten letters one by one in order to give a sense of a beam of light going through the darkness. With all the motion settled down, I input the background music and slightly adjusted the motion at the beginning to let the graphics follow the rhythm.

4. Bookmarks (Display tags)

a. Front side layout

I designed those bookmarks with the layout style similar to the motion graphic video, but with text on the top and illustrations on the bottom instead. The letters of “LUMINOSITY“ turn into yellow one by one across the whole series of bookmarks to convey the sense of a beam of light coming through the darkness.

b. Video reference

I searched nine Youtube videos as total for each type of workers. Every video was recorded based on the pandemic context. I precisely chose the videos in different dates, and matched them to the bookmarks chronologically.

c. Back side quotes

I reviewed every video I chose, and pulled out the quotes that could make emphasis on the light of humanity. I applied those quotes on the back side of the bookmarks according to the types of the workers respectively.

Bookmark

Quote for Frontline Workers in Hospital

Quote for Community Health Workers

Quote for Media Workers

5. Immersive Video Gallery

a. Scene Selection

I thought this pandemic widely impacts people’s physical freedom. Now, we lack of access to public resources like art galleries in some places. I wanted to have a virtual gallery for the public to have a place to visit — a place where people can walk freely without concerns of social distancing or wearing masks. Besides, I thought gallery usually displays artworks that can leave impressions in people’s memory. I wanted the public to memorize those heroes who fight against COVID-19 for this country and world. So, I chose a gallery scene.

b. Assets arrangement

After selecting the scene, I input the motion graphic video and all the bookmarks into Mozilla Spoke. All the assets were attached to the walls by adjusting the X, Y, Z heights of the position. I applied the same Y height for all the vertical bookmark front sides and the videos, and the same Y height for all the bookmark back sides with quotes to maintain the consistency.

c. Youtube video links

After settling down all the assets, I copied and pasted the links of all Youtube videos I chose to Mozilla Spoke. Lastly, I double checked to make sure all the links are the correct ones and they all work.

Reflection

The difficulty I encountered: When I had the idea to make a VR gallery for COVID, I had no idea how to make it happen — I didn't know what materials I would need, what tool I would use, or even how difficult this project would be. I had not taken my Immersive Design class yet at that time. But I was luckily be connected to a Newhouse professor, Mark Costa, who had experiences in the field of immersive media. He introduced Mozilla Hubs and Mozilla Spoke to me. After I went through the tutorials, I made the whole VR gallery by myself. The only problem I stuck with during that time was that I didn't know how to mute the videos first, and let the users to choose which to turn on the volume. I didn't solve that problem until I took a VR storytelling class in Fall 2021.

The lesson I learned: Never be afraid of what I don't know. Try to talk to people, gather the information, and spend time on learning it — I can make it.

What I would do differently: I basically satisfied with my experience on this project because it was groundbreaking for my vision and skillset. But I would ask more professors who work in the field of immersive media, and maybe I could solve the volume problem earlier.

Tools:

Mozilla Spoke and Mozilla Hubs

Adobe After Effects

Adobe Illustration

Adobe InDesign