You and me
Creative JavaScript Web Art
Project Overview
The creative web artwork, You and Me, integrates my undergraduate practice in visual art and my previous HTML and CSS skills, highlighting my individuality. The entire project is also an act of self-awareness, which makes me reflect on my past and reserve my goals for the future.
Artist
Developer
HTML
JavaScript
Three.js
Figma
CSS
BootStrap
Miro
2 Weeks
Since this web art is made by unprofessional JavaScript coder, many of the codes are inspired online.
Topic exploration
I created the mind map based to explore the potential topics about myself. This process is also an understanding of who I am. at the moment After I listed some keywords, I highlighted the relevant ones and came up the theme & insight below.
Zoom to view larger
define theme & insight
Thus, I decided to make an artwork, focusing on the theme of “Moving to a new city for 10 years” since this is one of the most important event in my life.
I found that what makes a big part of me is the decision I made 10 years ago. I told my parents that I want to study aboard, and my journey of moving to a new city has began and changed my future completely.
Next, I converged the highlighted keywords into three main category, and diverge each theme to brainstorm.
Zoom to view larger
Ideation
Possible Form of Art Expression
I dropdown a few possible form of art for expression and the yellow ones that I’m interested.
Zoom to view larger
Five ws and one h
To further ideate my thoughts, I used 5Ws and H methods to determine what kind of artwork I want to make.
Who is the user?
Internet visitor who are interested in art.
Where is the user in an experience?
At home/ social media / art gallery
What does the user need to know?
The users need to feel melancholic, and loneliness of moving to a new city.
When do users need this information?
Since this is more like a self-expository artwork. It is more for users' entertainment.
How should you say it?
An artwork (in an web form) that allows users to interact at home and to make them feel they are not alone. Helping them to see and feel other strangers without verbal communication.
Users dropdown their story or the words that they would like to say to others, and the website would save what they typed.
Users can see other people who are experiencing the same thing with them, make them feel less lonely and disconnected.
Why do you stand behind the words you chose?
I think it is meaningful for people who would like to express themselves, and find a digital getaway.
Theme Visualization
I used Procreate to draw out these concepts that I want to deliver to my audiences.
How to Make This Artwork?
To allow this website interacting with the participants, this project required a front end development, and a back end database to collect users' stories.
Back End Story Collecting
Asking strangers who have experienced moving to new cities to share their stories.
Front End Presentation
Displaying each story contributor as an individual star. Their story forms this piece of artwork.
Design Process
Wireframe
Home
Visitors land on the website. Each star represents an individual who leaves their hometown for a better future.
Zoom
When users zoom in with their mouse, the story and the story contributor’s name show up.
Click
Visitors can read the contributor’s story when they click the star.
I used Figma to design the wireframe.I used Figma to design the wireframe.
Final Artwork
You and Me is an visual representation of communication between people who holds the same passion and believes. Through the process of collecting stories from people who has overcame or experienced same difficulties of myself. The purpose of making this piece is not limited to form a virtual community, but also aims to reflect a sense of positivity as described in the above Concept.
Reflection
Throughout the process, I learned how to use JavaScript to create 3D interactive animations to entertain my website visitors. There could be a greater sense of melancholy and mystery in this work if users were more immersed in it. Looking back at this project, I wish to collaborate with a professional web developer to implement the coding and explore more possibilities.