Design Exploration / Project Compilation

30.8.2023 - 8.12.2023 (Week 1 - Week 15)
Moey Jo Min (0350567)
Design Exploration / Bachelor of Design (Hons) in Creative Media
Project Compilation

Jump Links

INSTRUCTIONS


Project 1

1) Ideation

 
Fig 1.1 Ideas (5.9.2023)

I was focusing on the second topic "Renewal of Life". During the ideation process, I do have ideas on the topic "Cultural Prosperity", but I decided to put them aside as I think most people will choose this topic. 

On the consultation day, I strongly felt that I should go with one of my ideas that I didn't further develop on, which is the Tangyuan character. I really like the idea, and I think that it will be a fun project to work on. During consultation, Ms Anis suggested me that I make a bowl of Tangyuan, signifying family reunion, which associates with the Winter Solstice Festival. Then, I started doing some research and sketch out my idea. 


Fig 1.2 Chosen Idea (6.9.2023)

Initially I was thinking of designing a Tangyuan character. Ms Anis gave me another idea during the consultation, and I decided to consider about it more thoroughly, as it has a stronger and bolder motive compared to a Tangyuan character. After doing some research, I came up with a sketch (Fig 00) and the above is the rationale of my work. 


Fig 1.3 Inspiration - artwork by @issiki_toaki on Instagram (6.9.2023) 

While I started working on the sketch, I immediately remember the artworks by @issiki_toaki on Instagram. The artist has artworks with food as the main visual, and some interesting elements going on around the food. My concept is quite similar with their work, and I think I can take some references. 


Fig 1.4 Moodboard (7.9.2023)

I searched on Pinterest for some artworks with similar art direction that I am heading towards. 


Fig 1.5 References (7.9.2023)

These are the references images that I referred to during the sketching and modelling process.


Fig 1.6 Sketch (7.9.2023)

This is the sketch that I have came up with for the wallpaper design. It is a family of Tangyuan inside a bowl. I am planning to model the bowl and the spoon into the typical kind of Chinese ceramic ones, to enhance the mood as well as the aesthetic purpose. The setting is in a Siheyuan (四合院), which is a type of Chinese vernacular housing that is generally found in Beijing. There are also Siheyuan in Southern China, but the structure will be different from the ones in Northern China due to the humid climate. 


2) Execution

i. Modelling

I used Blender for this project.

Fig 1.7 Bowl Model (9.9.2023)

Fig 1.8 Spoon Model (9.9.2023)

Fig 1.9 Lantern Model (8.9.2023)

Fig 1.10 Tangyuan Model (9.9.2023)

Fig 1.11 Rock Model (10.9.2023)

Fig 1.12 Tree Model (10.9.2023)

Fig 1.13 Front Door Model (11.9.2023)

Fig 1.14 Window (11.9.2023)

Fig 1.15 Window Frame (12.9.2023)


Fig 1.16 Roof Tiles Overlapping Mesh (15.9.2023)

I was trying out the settings for rendering to reduce the rendering time but still get a decent quality image. However, I realized that the tiles of the roof are overlapping for some reason, but I applied the modifiers that it could not be reversed. I found out that there are extra lines on the mesh. Thus, I tried deleting the extra faces and join the separated mesh. This method works, but I have to amend all the tiles manually. Eventually, I remembered that I can use the array modifier for some parts to save time. 


Fig 1.17 Roof Tiles Amend (15.9.2023)

This is the amended roof tiles. The meshes are no longer overlapping. 


Fig 1.18 Snow (1.10.2023)

I decided to add some snow to the scene as the setting is during the Winter Solstice Festival. According to ancient Chinese, it is believed that snowing during the Winter Solstice Festival signifies good harvest in the next coming year. 

I discovered an internal plug-in in Blender that creates snow automatically from a YouTube tutorial video. I modified some parts of the snow in edit mode. 


ii. Texturing and Shading

Fig 1.19 Spoon Texture Paint (20.9.2023)

As the spoon has rather complicated pattern, I texture painted it. This is my first time using this method, it is not too complicated to learn. 


Fig 1.20 Bowl Texture Paint - Attempt 1 (20.9.2023)

I repeated the steps to add texture to the bowl. However, the patterns turn out to be pixelated. I suspect it is the insufficient amount of subdivision surface of the bowl causing this problem. 

I made a second attempt with more subdivision (I forgot to take a screenshot before deleting it :<). It is less pixelated, but the painting looks bad to me. So, I decided to keep the first attempt.


Fig 1.21 Floor Image Texture (20.9.2023)

For the floor texture, I downloaded a free image texture and imported into Blender to create. I used nodes to make adjustment to the size and color of the image texture applied to the floor. 


Fig 1.22 Wall Image Texture (20.9.2023)

For the wall texture, I used the same method for the floor texture. 


Fig 1.23 Table Set Shading (20.9.2023)



Fig 1.24 Chunlian in Photoshop (20.9.2023)

I decided to add Chunlian to the scene, as I found it a bit "cold". I created the Chunlian in Photoshop with the brush tool.


Fig 1.25 Chunlian Image Texture (20.9.2023)

I imported the image of Chunlian into Blender and applied the texture on the objects. 


iii. Animating

Fig 1.26 Animation Progress (1.10.2023)

I am animating 24 frames per second in Blender. Based on my experimentation with the rendering settings, it takes around 50 seconds to render one frame, meaning it will take around 20 minutes to render a one second animation. To reduce the rendering time, I made a one second looping animation. 

Fig 1.27 Soup Animation (1.10.2023)

For the soup in the bowl, I used the wave modifier to create the wavy texture, and cut off the excess using a boolean modifier. I found a tutorial on YouTube to make the animation of the wave loop. 


Fig 1.28 Tangyuan in Bowl Animation (1.10.2023)

I animated the tangyuan in the bowl by making them blob.


Fig 1.29 White Tangyuan Bouncing Animation (1.10.2023)

Fig 1.30 Yellow Tangyuan Bouncing Animation (1.10.2023)

Fig 1.31 Yellow Tangyuan 2 Animation (1.10.2023)

Fig 1.32 Green Tangyuan Bouncing Animation (1.10.2023)

Fig 1.33 Pink Tangyuan Animation (1.10.2023)

For the Tangyuan, I wanted to make them look happy and excited. So I made them bouncing. It turns out quite cute, adding some squash and stretch makes them look squishy. 


Fig 1.34 Rendering (2.10.2023)

After animating, I rendered the animation using Cycles engine. 


Fig 1.35 Compiling in Adobe Premiere Pro (2.10.2023)

After completed rendering the frames in Blender, I imported them as image sequence in Adobe Premiere Pro to make them into a video clip. I looped the clip for 10 times to create a 10 second video. 


Fig 1.36 Color Correction (2.10.2023)

I added an adjustment layer to increase the contrast of the video using curve. 


Fig 1.37 Final Animation Design (2.10.2023)

The above is the final animation design.


iv. Competition Submission Files 

Fig 1.38 Overall Visual Design (2.10.2023)

I used a Curve adjustment layer to increase the contrast of the design slightly. Then, I added the HONOR logo as per the requirement of the submission.


Fig 1.39 Foldable Wallpaper (4.10.2023)

I placed the wallpaper design into the template provided. 


Fig 1.40 Design Elaboration (8.10.2023)

This is the design elaboration of my wallpaper design.


Final Project 1

Fig 2.1 Wallpaper Design (8.10.2023)

Fig 2.2 Overall Visual Design (8.10.2023)

Fig 2.3 Animation Design (8.10.2023)

Fig 2.4 Design Elaboration (8.10.2023)

    Project 2

    For project 2, we were to expand the designs that we created from Project 1 by exploring different design output that creates playful experiences. 

    i. Ideation

    Fig 3.1 Project 2 Proposal (24.10.2023)



    Fig 3.2 Adobe XD Tutorial (25.10.2023)

    Initially I planned to use Adobe Animate to create the animated website. However, it involves coding which takes some time for me to fully understand the basics even though following tutorials. Ms Anis found a tutorial to create the parallax website using Adobe XD. I think it will be more convenient and it allows me to explore more. I found it quite similar to Figma, but I haven't had a chance to try it out. Thus, I will be using Adobe XD to create the website prototype.  


    Fig 3.3 Wireframe Sketch (31.10.2023)

    This is the wireframe sketch for the website. Since I am going to make a parallax animation, I planned to create a one-scrolling page. 


    Fig 3.4 Mood board & References (31.10.2023)

    This is the mood board and references for the website design. I want to incorporate 3D and vector elements. The color scheme will be something pastel and colorful, as the website is targeting children. As for the typeface, it will be somewhat rounded to match the Tangyuan theme.


    ii. Execution

    I started with the 3D models that I want to use as illustrations in the layout.

    Fig 3.5 3D Modelling - Landing Page Illustration (7.11.2023)

    Fig 3.6 3D Modelling - Introduction Page Illustration (7.11.2023)

    Fig 3.7 3D Modelling - Classic Tangyuan (7.11.2023)

    Fig 3.8 3D Modelling - Red Bean Tangyuan (7.11.2023)

    Fig 3.9 3D Modelling - Milk Tea Tangyuan (7.11.2023)


    Fig 3.10 Logo Sketches (7.11.2023)

    These are some sketches for the logo that I came up with. 


    Fig 3.11 Refined Logo  (9.11.2023)

    This is the chosen logo. I refined it in Illustrator.


    Fig 3.12 Layout in Adobe Illustrator (12.11.2023)

    I did the layout in Illustrator first as I am more comfortable with the software. Then, I imported the design into Adobe XD to animate the website. 


    Fig 3.13 Prototyping in Adobe XD (28.11.2023)

    After I completed the layout design in Illustrator, I imported it into Adobe XD. I have never used this software, or similar platforms like Figma before, I took me some time to get used to it. I discovered that it is essential to link the artboards before creating the scroll animation, or else it will not work. 


    Fig 3.14 Back to Top Button (28.11.2023)

    I added a "Back to Top" button at every page, so that users do not have to scroll all the way up to the top page. I wanted to add a hover effect, but the scrolling animation wouldn't work for some reason. So, I have no choice but remove the hover effect for the button.


    Fig 3.15 Navigation Bar Hover Effect (28.11.2023)

    I added a hover effect for the "Introduction", "Variations", "Recipe" buttons. It turns out quite interesting. I did not add a hover effect for the main page button (logo on the top left), as it looked old-school in my opinion. 


    Fig 3.16 Variation Page (28.11.2023)

    For the Variation page, users will be able to click on the left and right arrows to check out the different types of Tangyuan. To ensure the scroll animation works for the three sub-pages on the Variation page, I duplicated the artboards and created a different flow for each of them. I did the same thing to the "Back to Top" button for this section, so that the animation works when it scrolls to the top page. 


    The link below is the final website prototype. Feel free to check it out!

    *side note: click on your screen instead of scrolling to make the animation work :)


    Final Project 2

    Fig 4.1 Final Website Layout (6.12.2023)
    Kindly click on the image for a clearer view :)

    Fig 4.2 Website Walkthrough Video (6.12.2023)

    Fig 4.3 Project Expansion Rationale (6.12.2023)

    *side note: click on your screen instead of scrolling to make the animation work :)

    FEEDBACK

    WEEK 2

    The Tangyuan idea sounds interesting. I can make a bowl of Tangyuan with different family members since the dish is about reunion in Chinese culture. 

    WEEK 3

    Good progression.

    WEEK 4

    Looks cute. The background might be a bit empty, see how it goes when I complete the model. 

    WEEK 6

    The overall visual and the animation looks cute. For the foldable wallpaper template, scale down the image and place it below the phone screen, add gradient fill to the background. 

    WEEK 9

    The animated website is nice, Ms Anis suggested that I create a parallax scrolling website. She found a tutorial that uses Adobe XD for me to refer to. 

    WEEK 10

    The wireframe sketch looks cute, there should be enough time for me to explore the technical part. Remember to reuse the visuals I have for project 1. 

    WEEK 12

    The website design is pretty straight-forward. 


    REFLECTION

    Project 1 was really fun to do. At first I was struggling at the ideation part because I couldn't think of a nice composition that brings out the idea I wanted to express, but I figured out eventually. Later when moving on to 3D modelling, I really enjoyed the process. I also explored some techniques that weren't been taught previously in 3D Modelling module. It is interesting to learn new things, and apply them in my work by experimenting with the settings. Even though the final outcome might not be an excellent work, I am still happy with it. I noticed that lighting is one of my weaknesses in 3D modelling. Through project 1, I think I have slightly improved, but definitely still needs more practice. This project makes me gain more interest in 3D modelling. I should put more effort in enhancing my skills, and it can perhaps become one of my future career options. I am a person who works relatively slowly (usually ideation is the part that takes up most time), so I don't usually participate in competitions. It is very lucky that I got to participate in this competition without having to worry much about the deadline, although I don't manage to achieve a rank this time. 

    The second project was also quite interesting. I explored Adobe XD for the first time. It is not too difficult to use, but it does take some time for me to learn how things work in the software, as I have never used similar software or platforms before this project. There are many tutorials can be found online to refer to in order to create certain parts. The only weakness I would say is that there are minor limitations in Adobe XD that some things could not be achieved in the prototype. 


    Comments

    Post a Comment

    Popular posts from this blog

    Animation Fundamentals / Project 1

    Image
    1.9.2022 - 18.10.2022 (Week 6 - Week 8) Moey Jo Min (0350567) Animation Fundamentals / Bachelor of Design (Hons) in Creative Media Project 1: Walk Cycle Animation Jump Links LECTURES INSTRUCTIONS Project 1: Walk Cycle Animation FEEDBACK REFLECTION LECTURES Fig 1.1 Week 6 Notes (6.10.2022) Fig 1.2 Week 6 Practical (6.10.2022) INSTRUCTIONS Project 1: Walk Cycle Animation Fig 2.1 Project 1 Instructions For project 1, we were to create a walk cycle in both side and front view, using the character from exercise 4.  1. Side View Fig 2.2 Rough sketch in Photoshop (9.10.2022) I started sketching out the side view of stitch in photoshop as I found it easier.  Fig 2.3 Rough sketch in Animate (9.10.2022) Then, I imported the layer into Adobe Animate to sketch out the rest of the frames for the walk cycle.  Fig 2....
    Read more

    Animation Fundamentals / Exercises

    Image
    1.9.2022 - .9.2022 (Week 1 - Week 5) Moey Jo Min (0350567) Animation Fundamentals / Bachelor of Design (Hons) in Creative Media Exercises Jump Links LECTURES INSTRUCTIONS Exercise 1: Bouncing Ball Animation Exercise 2: Ball with Tail Animation Exercise 3: Emotion Poses Exercise 4: Turnaround Animation FEEDBACK REFLECTION LECTURES Fig 1.1 Week 2 Notes (8.9.2022) WEEK 3 Fig 1.2 Week 3 Notes (15.9.2022) Practical: Ball with Tail Animation Fig 1.3 Practical - Animating (15.9.2022) First, I created another bouncing ball animation, and applied the squash and stretch principle using the free transformation tool. Mr Kamal had taught us a different way to animate, which is to insert frames between the extremes in our timeline, so we do not have to draw and plan the timing.  ...
    Read more

    3D Modeling / Project 1

    Image
    3.10.2022 - 30.10.2022 (Week 6 - Week 9) Moey Jo Min (0350567) 3D Modelling / Bachelor of Design (Hons) in Creative Media Project 1: Hard Surface Modelling Jump Links INSTRUCTIONS Project 1: Hard Surface  Modeling FEEDBACK REFLECTION INSTRUCTIONS Project 1: Hard Surface Modelling Fig 1.1 Project 1 Instructions (3.10.2022) For project 1, we were to model a hard surface object by utilizing the techniques we have learnt in the pass few weeks.  Fig 1.2 Moodboard & References (12.10.2022) I looked for some inspiration and references on Pinterest at the beginning. Fig 1.3 Refined Sketch (17.10.2022) I want to go with a vintage style for this project, because I really admire the elegant designs.  I sketched out a few designs roughly on a piece of paper. The above is the refined sketch that I am going with.  Fig 1.4 Modelling (19.10.2022) I modelled the gun based on my sketch. Some parts were mod...
    Read more