Zeyao – PDS – Midterm Idea

For my midterm project, I decided to create generative logos for my friend’s fashion collections. It will change based on the color palette and the general shape of each collection.

other stores X gogo is a fashion collection that is designed by my close friend gogo wang.
The collection is chic and elegant. It is designed for women who just stepped into their professionals. I am helping her to create generative logos for the collections. The logo will change based on the color board and the shapes of different collections. 

3 Collections are named “Laydown, Dress Up”; “Super Easy Fall” and “Two Months to Winter”

Here are some previews of the collection. The third collection is not online, but my friend will send me the preview tonight and I will upload it here.

link: https://docs.google.com/presentation/d/1Nj5-V09KkdqHQpqV2pz6xZmTq8SokpfW6zAI3YAknOg/edit?usp=sharing

Zeyao – PDS – Typography

For the typography assignment, my design is inspired by the chinese chess (五子棋). So I decided to create the one with black and white ellipse on the grid system. This is only the first prototype of my typography design. My code at the moment is really messy, and I did a lot of repetitive work on it. However, I will work on the algorithm and simplifying the code. Eventually I want to make a dynamic typography with the color shifting from one chess to another one.

Here is the github link: https://github.com/zeyaoli/Typography-Oct13th

Zeyao – Exhibition – Final Project Proposal

Museum of Broken Heart

Has your heart been broken by someone that you deeply loved before? Have you tried to deal with your broken heart in your tiny bedroom, with no one else being next you? Museum of Broken Heart is an online interactive museum experience, that aims for letting the user get into a teenager’s bedroom and feel connected with the broken heart.

My initial research topic is the Museum of Hard Feelings. However, the term “Hard Feelings” sounds so wide to me. What I wanted to do with the further research is to narrow down the topic, and to think about what causes the hard feeling. Coming from my own experience, I relate to aftermaths of the break-up the most. So, I decided to define my museum as the Museum of Broken Heart.

Inspired by the best-selling poem “Milk and Honey” by Rupi Kaur, I connected the common objects that are placed in the bedroom with the sad feeling after the break-up. Museum of Broken Heart is a web-based 360 interactive museum. The museum itself is a virtual teenager’s bedroom. The visitor can explore the museum by exploring the furniture and the other objects in the room. When the visitor gets closer to the furniture or click on it, the interaction will be triggered. A poem that is related to the object will be played and let the visitor experience the connection between your daily life and the aftermaths of break-up. Besides the sounds, the visitor will also get participate in short conversations from the museum. There are other interactions that will be developed. The museum is also adapted to Google Cardboard, which is a simple VR headset. Once the visitor visited the museum website and placed the phone in the cardboard, they can have a virtual reality experience.

I used a-frame, a library that is developed from Three.js to create my museum experience. For the visual aesthetic, I decided to make everything low-poly, because low-poly models will be easier to render on browser. Also, it makes the visitor feel more welcomed. The color in the room is vibrant, since the vibrant color creates a cozy apartment atmosphere. The sound trigger is based on user’s position. I set the boundary detection on each object. Other interactions will be also created on Javascript. It might require a 3d to 2d canvas if I created a pop-up conversation window. I will also add subtitles for the sounds, in case people can’t listen to it. Another function that may be added is the audio detection. Once the user say the object’s name, user’s position will be teleported to the object and trigger the interaction. I am thinking about using makey-makey to connect the keyboard, so when I exhibit the museum, I only need the visitor to play on the controller that is made by play-doh and a mouse. It will reduce the distraction for the visitors.

Here is the prototype / my visual of my final project:

Zeyao – Exhibition – Paper Circuit

For the paper circuit assignment, I just followed the instruction of the paper, and tried 5 different circuit. When I made the first one, I accidentally cut the tape too short for the first circuit. So the LED did not connect to one side of the circuit. So, I failed my first try of the paper circuit! But it’s okay. Learning from my failure, I tried the second circuit. This time, you can tell the circuit looks much better, and it worked!! Then I just followed the guide and finished the rest of the circuit. I actually didn’t know the switch was also the conductive tape until I asked Cici, and she told me it was just a simple circuit. When you connect the tape (switch) to the circuit, it would work. So here are some pictures of my circuits!

Zeyao – PDS- Grid System

I couldn’t upload the easygrid to the p5 editor, so I used the localhost for this homework. Basically my idea is divide 18 rows of grid, and draw rectangle in the grid. I also used grid system for the background drawing. The first image contains the grid system that I made for reference. The second image I erase the stroke of it.


Zeyao – PDS – Ratios

This week’s assignment is to recreate the poster. I put the post in photoshop and used the ruler to approximately measure the ratio of each sections. Then I coded the poster in p5. I also used the color that we learned in the code to make some intentionally random color for the background.



Zeyao – PDS – Week3 – The Martian

My sketch: https://editor.p5js.org/zeyaoli/sketches/Sy30bFXKX


Design Process:

I never watched the Martian, so I went on Pinterest and search for the Martian poster that other people made. What I found in common is that they all have the orange-ish color tone for their posters. Also, some of the posters include some elements in the universe as well. Then I found my inspiration for this assignment that combined the both. So, for my assignment, I got inspired by it and decided to make something similar to it but have a different vibe.

This is my inspo poster: 

I started with exploring the bezierVertex and other shapes that we learned in class, however, I couldn’t make the wave shape. Then I talked with Cici and she said that looked exactly the same as the noise. So I checked the example and learned the noise code. So below are my posters:

Zeyao – PDS – Week 2 – Wet and Sharp

We need to design something that represents wet and sharp for Week2’s assignment. When I firstly saw the assignment, I definitely want to use something flowing / liquid to represent the wet. However, I had no idea how to make the sharp part. So I decided to just play with the numbers of the ‘bezierVertex’. In a sudden, I came up with the a beautiful that reminds me of a bird (or you can say it’s a giant insect).


Then I decided to rotate it and make it looks more like a flying bird. After this, I started to make the ‘wet’ part. Eventually, I came up with the idea that a bird is flying out of the pond. For the pond, I used random for the radius to make it more authentic. Also, I had two different kinds of bird for you guys to choose. I think I am pretty satisfied with the work that I made. It is definitely easier to code than make it in Photoshop 😀

Link to the web editor:

First One

Second One


Zeyao – Exhition – YuanZhu Residential Museum Report

YuanZhu Historial Residential Site Museum Report

Zeyao Li

September 16th, 2118

YuanZhu Residential Site was constructed around 1980s, almost 130 years ago. It represents the classic Shanghai 1980-2000s residential neighborhood. Old Shanghainese people called it “老公房”.  It means the residential buildings that are funded by the government or the national companies. YuanZhu Residential Site is located at Century Avenue, Pudong district. 130 years ago, there was an old saying: “People rather get a bed in Puxi than an apartment in Pudong.” Although Century Avenue was around the downtown Pudong area (Lujiazui), people still concerned that it was out of the core shopping and entertainment area. Nowadays, century avenue became one of the most popular area in Shanghai, mainly for the entertainment and the business development.So now seeing the historical museum being kept in Pudong reflects on the urban development of Shanghai. The museum is surrounded by multiple skyscrapers and big shopping malls .The contrast makes the residential museum more valuable. My first impression of the museum is really strange. Because I can’t imagine the place was a residential area 100 years ago.

I admire how complete the whole neighborhood got kept. From the outside of the museum, I can tell that the area looks the same as what my grandparents told me. It got me in the nostalgia feeling. The entrance now changed to the box office. The box office has a built-in face id function, so once the visitor bought the ticket online, their face will be automatically saved. The visitor just need to pass the entrance and the entrance will open. The museum itself tries to keep the authenticity of the neighborhood. Besides the building itself, the other facilities also got kept well. Different from the recycle system nowadays, a hundred years ago, people threw the trash outside, and made a mess, instead of throwing the trash to a pipe that is built in the apartment. Also, it showed the prosperity of the sharing bike. Ofo and Mobike, the two new energy car brands once started their business by making sharing bikes. The museum exhibits their bike model in the neighborhood. People also used to hang their clothes outside the building to make it dry. The public hanger is displayed in the museum. One special atmosphere in the neighborhood also got exhibited in the museum – the public parking. The visitor can see the parking area along the road to the residential building. Speaking of the residential building, the visitor can walk up to the 6th floor. The hallway is tiny and narrow. 4 apartments are on each floor. Inside the apartment, the 50 sq meters’ apartment got divided into 3 rooms. That’s because of the rapid growth of Chinese population 100 years ago. So people have to share the tiny space with another 2 or even more people. Although the visitor cannot touch the objects in the apartment, the curator set the benches for the visitor to take a rest inside the apartment.

From my observation, a lot of the visitors are the elders. I guess they want to memorize their childhood by visiting their old residential buildings. People stare at the objects as those are their own properties. With the technology like VR and AR, the visitor can watch a day in the residents’ life from a hundred years ago. AR helps the visitor to feel how does the original object got placed before, and feel the change of the area. Moreover, the advanced bone-conduction spacial earphone can give the visitor audio guide. The audio guide will change as the visitor move to a new area. Without the museum, I think it’s hard to let the visitor to realize how can time change the function of the area, and realize how do their lives change in the past 100 years.




Zeyao – PDS – Rand Response

After reading the conversation between Kregor and Rand, I am plotting to read all the book that Rand recommends. It is interesting to see the way he reviews the book. For example, he calls “Language of Vision” philosophical double-talk. What a weird but interesting perspective. I am wondering what exactly the Whitehead statement is? It might help me to understand better about that part of the conversation. Rand defines that “Design is a relationship between form and content”, so in relate to our class, can we say that the design we are doing in class is a relationship between computer programming with its content? How does it distinguish with other forms, such as the traditional graphic design?