16.02.2023 - 01.03.2023 / Week 6 - Week 8
Yung Siew Weng / 0339847
Intercultural Design / Bachelor of Design (Hons) in Creative Media
Final Project / Prototype
FINAL PROJECT
MODULE INFORMATION
Intercultural Design - Final Project : Prototype
INSTRUCTION
Utilising the data collected from the research trip, students are to produce visual design outcomes that reflect their interpretation and definition of “Framing”, bearing in mind to consider cultural and aesthetic aspects, balanced with their design knowledge. Various directions and approaches can be engaged in, such as experimental design/art with the use of manual/digital or combination of both media.
EXPLORATION
➜ Week 6
During our progression in data collection, we felt that we should include our new design concept, which related to the final prototype. We gathered together in X-space and did some final sketching in order to show it as a proof and outcome of our data collection. Our group leader, Jiahui had divided our task, each individual will responsible for 1-2 contents:
Fig 1.1 Divided Task (week 6/ 16.02.2023)
#My assigned part :
1. Gacha 6 : Maneki - Neko with Tanuki
2. Preloading Website research
At the very first, I did the research on the preloading website during the physical meet-up. Since I had explored HTML and CSS on the previous semester before, I used Adobe Dreamweaver as my weapon to start the "coding" :
Fig 1.2 HTML & CSS development,
Adobe Dreamweaver (week 6/ 16.02.2023)
After some hours of exploration, I found out a more "cheat" way to make the animation to be animated, I developed my progress into AI, create an illustration of Goldfish [one of the Japanese lucky object] and animate the "goldfish" in AE.
Fig 1.3 Development of Goldfish (week 6/ 16.02.2023)
Fig 1.4 Development in AE, animation (week 6/ 16.02.2023)
Then, I reconstructed the code and the final outcome of animated preloading research was showed below :
Fig 1.5 Outcome, animated preloading research (week 6/ 16.02.2023)
After the completion of animated preloading research I continued my progress on illustrate the Gacha 6 : Maneki - Neko with Tanuki. I renamed this character as "Taneko", which consisted from Tanuki + Maneki-Neko :
Fig 1.6 Development of "Taneko" (week 6/ 16.02.2023)
Fig 1.7 Final outcome, "Taneko" (week 6/ 16.02.2023)
Fig 1.8 Compilation of illustration _ group (week 6/ 16.02.2023)
Prior to continue towards the next step, we organised a group meeting (20 Feb) for final up our ideation and start to build up our prototype. During this part, we had assigned to different parts to done the job together and I was in charge of "coding staff" during this particular period. The PDF below consisted some contents that we planned/ decided for the final prototype :
Fig 1.9 Planning Docs (week 7/ 20.02.2023)
As waiting for the team to animated the assets, I continued with my progress in AE to make the preloading animation to be more realistic and interesting :
Fig 1.10 Development of Goldfish [preload animation] (week 7/ 23.02.2023)
Fig 1.11 Development of Goldfish [preload animation], AE (week 7/ 23.02.2023)
Fig 1.12 Outcome, Goldfish [preload animation] GIF (week 7/ 23.02.2023)
Aside, prior from start encoding the site, waiting is a very challenging part; the outcome of the illustration had turned out to take double the time that we estimated which make me very stress and depressed regarding the duration to complete the coding part [the more the illustration team used, the lesser time I got]. In desperation, I make a gachapon pop out contents template for the team as reference :
Then, after the template being settled, the illustration team continued their progress on "designing" the stuff. And, I continued my exploration on coding part; it was very tough for a Javascript newbie, exploring and creating a complete site in one weekend, but luckily my friend who studied in computer science faculty was willing to help me figure it out. Since it was the first time also for him to discover the HTML, CSS and also Javascript. We did the code by 2 parts : he figured on the Javascript ; whereas I was in charged with the HTML & CSS (which I had studied a part last semester).
At the very first, my friend helped me to stop the preload animation by using Javascript which can linked to the landing page. In addition to Javascript, I also explored the use of z-index in CSS to make layers "multi-layered". The higher the z-index, the higher the layer will be :
Fig 1.14 The Preloading + Landing Page (no animated) (week 7/ 24.02.2023)
After the illustration team had finalised the outcome, we continued exploring furthers and the first version was finalised : First version (GIF) website demo link
We ran the site by using GIF in our first version; but there seems to be having lots of bug including :
- The machine might be missing after severals click [I had used the red border to indicated where the machine were go/ miss up ]
- Transition is lagging
- Site / button is not responsive
- Pixel breaking [GIF's original issue]
Then, we had an ideation to change the all the GIF to MP4 for a better quality amendments. We spent one midnight re-encoding the full version from GIF to MP4 : Second Version (MP4) Website Demo :
This version (sum: greater than GIF version) :
- Responsive (site & button) in different Desktop/ Laptop size; but for phone version, it will direct showing the video clips for Safari, but Chrome can functioned.
- The transition will be blank a while [since this is a free domain; if open with the original html file, the transition will be more smoother]
- Pixel Breaking [we used the clips that export as GIF before as compilation]
Overall, I summarised some of the main issue (both GIF and MP4 version) and the solving method that I meet when stylised and formed the site under the PDF below :
Fig 1.17 Issue and Solving Methods (week 8/ 28.02.2023)
After having a more smoother and greater version, I continued the exploration on adding more SFX by encoding to the site and some minor adjustments and finally released the final outcome :
Fig 1.18 Overview, Final Version -
The Digital Prototype HTML, CSS and Javascript file :
Fig 1.19 Full Digital Prototype HTML, CSS and Javascript file (week 8/ 28.02.2023)
Since the digital prototype having some randomise that the user might not able to go through [if you try and try and try, then YES]. I summarised the full compilation of our digital prototype under the PDF below :
Fig 1.20 Final compilation of digital prototype [group] (week 8/ 28.02.2023)
Last but not least, since our presentation requirement was a presentation "poster", one of our teammate, Pei Yun had in charge of compiling and designed the poster [the full development of her poster, I guess may check on her blogspot]. And, below are our presentation poster :
Fig 1.21 Presentation Poster, designed by Pei Yun (week 8/ 28.02.2023)
Week 8 / 01.03.2023 @ Final Presentation
Overall, the website is very good, but if it is possible to add a branding or landing page with our concept description, that would be even better. Also, for the poster, a bigger image and the website contents can be highlighted.
After receiving the feedback from our moderator, we tend to have a quick discussion on creating a landing page for our virtual gashapon store. Since this was part is consider as my responsibility (I think nope?), but nevertheless, I managed to done it. My team having the ideation of creating a landing page, but since I had been exploring for the "codes" last semester, I figured that actually what I did last semester, Jacqesign can be recycle and reuse on for our gachapon store. As the time limitation (I need to done all the stuff in a day or less than a day), I decided to reuse my template as a reference for my team. The team had prepared on some materials such as the colour schemas, carousel, description text as well as the infographics. //During this period of time, I was very anxiety since I had piles of assignments dateline around; but yet need to carry this responsibility to done the stuff in a very short period of time.//
Although the team requested for landing page, I thought that a clickable website is more great compared to static landing page (with one page and un-clickable; not user-friendly). Prior from developing into the codes, I summarised and constructed the landing page that I would like to perceive of including the font, colours, as well as layout :
Fig 1.22 Landing Page Development (week 8/ 02.03.2023)
Continued after the ideation of landing page, I start encoding in dreamweaver. During the process, I felt that the Javascript that we had encoded before had limited lots of property in the file which had limited my way to go beyond my ideation. For example, since the virtual gashapon store had using video property to run the programme and it's complicated to reconstruct the property in a few hours to achieve my ideation, so I figured on other design direction to simplicity the website. After fews hours of exploration, the final outcome finally had released :
Fig 1.23 Overview, Final LuckyMiao Website
(week 8/ 02.03.2023)
Furthermore, I had compiled the LuckyMiao Website layout composition as PDF. The PDF is clickable, you may click the button just like how the website goes except from the gashapon store page (page 3). To direct go into the page (digital gashapon store), may proceed to Luckymiao Gashapon Store :
Fig 1.24 Full compilation of Final LuckyMiao Website
(week 8/ 02.03.2023)
Fig 1.25 Compilation of LuckyMiao Full HTML, CSS & Javascript , PDF
(week 8/ 02.03.2023)
Continued after the completion of my part (website), it's the time to pass the flow to my teammate for refining the poster QR code. After, the final outcome of poster was released and it's time to say "sleep, cheers!🍺“ :
.jpg)
Fig 1.26 Final Poster, credited to Pei Yun (week 8/ 03.03.2023)
(week 8/ 02.03.2023)
Fig 1.27 Final Poster PDF, credited to Pei Yun (week 8/ 03.03.2023)
Final LuckyMiao Website Link : https://luckymiao.netlify.app
FEEDBACK
Week 8 / 01.03.2023 @ Final Presentation
Overall, the website is very good, but if it is possible to add a branding or landing page with our concept description, that would be even better. Also, for the poster, a bigger image and the website contents can be highlighted.
REFLECTION
Throughout the overall experience, I can stated that it was a very challenging experience to get the final digital prototype done within a week by having a "group assignment". It was because since I was in charge of the programming component of the final prototype, I needed to wait for all of my peers to finalise the illustration and animation and this "waiting period" is actually longer than the anticipated time. As it was my first time managing the site using a combination of Javascript, HTML, and CSS, I was unsure to get everything done in a weekend, it was very depressing experience, as the hopes (for the prototype to be visualised) of the entire village were pinned on me. But, the most fortunate aspect was that I met a friend who studied in the computer science faculty who was willing to assist and figure out the script with me; otherwise, I don't think the entire stuff could be completed in less than four days.
Aside from the time constraint, the most difficult element is that I need to have a "thick skin" to continuously nagging or rushing my peers to change to what I want, such as changing all the clips from GIF to MP4 to produce a better outcome, and so on. The difficulty was that, because this was a group task, I was both wishing and unwilling to settle everything on my own [if so, what's the point of having group assignments?], so I had to wait and be patient although the facts that the time limitation. Fortunately, however, despite the sensations and emotions experienced during the evolution and development stage, we were able to resolve everything and produce a final digital prototype in a "lengthy" period of time. In short, we had overcome every obstacle in order to finally won a deep and sweet dream. 💤
Comments
Post a Comment