29.06.2023 - 18.07.2023 (Week 13 - Week 16)
Chung Jia Xuan / 0346630
Advance Interactive Design / Bachelor of Design in Creative Media
Final Project / Interactive Web Application
RESEARCH / PROCESS
Final Project
After brainstorming an idea for my website, I decided to do a bakery website as I'm a pastry lover. My bakery shop name eme's bakery was derived from my english name, Emeline. I planned to make an interactive microsite where people can check for the bakery menu and the prices. I also added a weekly special menu to my bakery which will be updated every week for limited timed pastries.
 |
| Figure 1.0 Bakery shop logo |
Before building my microsite on Adobe Animate, I have tryouts of my website screens on Adobe Illustrator to have a brief idea of how my website design will be.
 |
| Figure 1.1 Progression |
After importing the screens into Adobe Animate, I watched Mr Razif's Tutorials on Youtube to learn about how we design our own panel and animate the buttons respectively.
 |
| Figure 1.2 First scene of my website |
 |
| Figure 1.3 Animating screens and buttons |
 |
| Figure 1.4 Progression (Animating buttons) |
I also added the overlay effects that were taught on Mr Razif's Tutorials to make the website more interesting.
 |
| Figure 1.5 Action Script for buttons |
I added a call to action button 'shop' on the 'weekend specials' layer which jumps out automatically when the microsite is played from the beginning so that it is more convenient for the user to check out on the weekend special menu and prices.
 |
Figure 1.6 Progression
 | | Figure 1.7 Action script for changing screens |
 | | Figure 1.8 Progression (Layering) |
|
After completing my microsite, I start making my instagram filter on Spark AR Studio. As this is my first time using this software and this module hasn't taught about this software, I only made a simple instagram filter for my microsite. In the tutorial video, Mr Razif said we are allowed to use the filter we created in the previous project but the TikTok filter I created was in a totally different theme which is the underwater world so I decided to make a new one which related to my bakery microsite. Anyhow I'm glad that I have a basic learning on how to use Spark AR Studio after this project.
 |
| Figure 1.9 Instagram filter progression |
Below is a the trial filter of my own:
After I have done the Instagram Filter, I moved back to Adobe Animate and import it as a QR Code in the About Us page. I also added some design to make the QR Code more interesting as well as animated it to create some interaction and to attract the viewers attention.
 |
| Figure 2.0 Published Filter on Instagram |
 |
| Figure 2.1 Published Filter on Instagram (2) |
 |
| Figure 2.2 QR code progression |
Submission
Google Drive Foler for html, Javascript, Adobe Animate & Assets file:
Video Presentation Link:
Netlify Link:
REFLECTION
I had fun throughout the process of making an microsite and the instagram filter. It was a tough journey as almost everything I learned from this module was new to me. I felt great satisfaction after creating my microsite and seeing it works successfully. Although I had encountered a lot of issues such as having bugs in the codes, animation not working and glitches all over the animation at the initial stage, I'm really glad that I did learn a lot of new things and discover a lot more about creating a microsite throughout the journey. The final project also required a lot of patience and workload to create animations one by one and checking the codes over and over again. I'm glad that I made it. Overall it was a good experience completing this task and making a microsite all by my own and I'm really satisfied with the outcome.
.png)
Comments
Post a Comment