Final Project

-

22 April 2024 - 26 July 2024
Week 1 - Week 14
SIMON KO JING LIANG
0364359
Bachelor of Design Creative Media
Advanced Interactive Design

Instruction

Fig 1
Instruction-PDF

Progression in Illustrator

Before the current version of the UI, there' s a unprofessional UI  rejected so I redesigned all of them. But the previous version, I accidentally deleted so cannot put them to the blog. Below is the current UI that I worked in Illustrator.


Fig 2
Landing Page & Menu Page

For the background is my representative building (Sibu En An Teng Tua Pek Kong Temple)in my hometown. Then I made a gradient so that I can put the heading, sub heading and button on left. Then put a gradient also can made the words and background no conflict and clear.

For the menu page is the food on left and 3 buttons. Then is the name of food on below and a back button on top left.


Fig 3
Description Page & Ingredient Page

Description page is the food under the description and I  made a gradient so I can put the short description.

Ingredient page is the food on the left and there is 6 main ingredient on the right.

Final Outcome(UI)




Fig 2
Landing Page



Fig 3
Menu Page



Fig 4
Description Page

Fig 5
Ingredient Page

Progression in Animate CC


Fig 6
Working of Landing Page

For landing page, I made the heading (Taste of Hometown) ease in successively then the Explore button come out after the sub heading.


Fig 7
Working of Menu Page

For this page, I slowly entered a bowl of noodles (Chicken soup mee sua) from the left, then its name, and then three different buttons. For the noodle, I cropped out only the object (noodle) using by Photoshop. 

There have 3 buttons which is description button, ingredient button and more button. When you click the description button, it will bring you to the description page while you click the ingredient button, it will bring you to the ingredient page. And the last button which is More button, it will bring you to a web page that all the information about the food when you click it, 



Fig 8
Working of description Page

For this page, the food will come out from below and then the description appear slowly.


Fig 9
Working of ingredient Page

The 6 ingredient will appear when the noodle come from the left. There also has a back button bring you back to the menu page.

Final Outcome

Below is the link that you can click and explore.
https://advfinalproject-simon.netlify.app/

Reflection

For the UI design , although I had some concepts, I still didn’t know how to design it and I had to redesign it again. Fortunately, the interface design was finally completed. For interaction design, I brought the basic things I learned in class into my projects and pondered their principles.

Although the whole process was difficult, it was interesting for me and I also learned some basic knowledge that is often overlooked. I hope that I can go further in my future studies and learn more in-depth knowledge and techniques through my own efforts.

Popular posts from this blog

Final Project

-
Image
SIMON KO JING LIANG 0364359 Bachelor of Design in Creative Media FINAL PROJECT: INFOGRAPHIC VIDEO ANIMATION INSTRUCTION Progression In the first week, we formed a team of 10 people according to the requirements. After that we started to brainstorm our ideas. We decided to use water pollution as the subject for our final project.  Then our leader started to plan our work. Fig 1 Work assigned Fig 2 Contextual Research  We assigned the work in our meeting. Some of us doing sketches, some of us doing coloring and some of us doing animation.  Art Direction & Mood board Once we had assigned the work. We started to do the mood board and art direction. Fig 3 Mood board Fig 4 Art direction Also the timeframe and scenes: https://docs.google.com/spreadsheets/d/18JC6GKoaJ5WfJTMVOtlC9jCHI2721pKqhM6HsHPc7TQ/edit?gid=1942087598#gid=1942087598 Sketches & Wireframe Fig 5 Sketches & Wireframe - Part 1 Fig 6 Sketches & Wireframe - Part 2 Fig 7 Sketches & Wireframe - Pa...
Welcome

Minor Project

-
Image
SIMON KO JING LIANG 0364359 Bachelor of Design (HONS) in Creative Media Minor Project Lecture The first week, Mr. Mike introduces the module and briefing the projects. After that Mr. Mike let us to team up with seven people.  Project Brief Fig 1 Project Brief Instruction Fig 2 Module -PDF Process Week  1 After becoming a group, we started to choose our project of  this semester. The project that our group chosen is Warisan TrueXR project. First of all, we followed the steps started from contextual research. We separated to different part, some of the member search about the client, some of the member search about AR glasses, some of the group member researched about museum negara and so on. Fig 1 Contextual Research We noticed that the venue was at the National Museum, and this project was about immersive experiences, that is, mixed reality, so we went to the museum to learn more about the size of the muse...
Welcome

GAME DEVELOPMENT: Final Project

-
Image
26 December 2024 Simon Ko Jing Liang 0364359 Bachelor of Design (HONS) in Creative Media INSTRUCTION Fig 1 INSTRUCTION-PDF Process DONE Level 1 environment Player Control Coin item script Coin Collect UI YET TO DONE Level 2 environment Level 3 environment Level 1, 2, 3 UI Level 2 & 3 items  Enemies Obstacles (spikes and so on) Character animation
Welcome

Project 1: ANIMATED INFOGRAPHIC POSTER

-
Image
SIMON KO JING LIANG 0364359 Bachelor of Design in Creative Media Instruction Fig 1 Instruction -PDF Part 1: Infographic Poster  Infographic poster  reference  Fig 1 Infographic poster  reference  I choose this infographic poster as my reference to redesign because of its lots of text even though it has enough information about social media and mental health. Since the main target group for my redesign of this poster is young people, it is necessary to simplify the entire information poster and highlight the important information. Below is the important information that appeared in the poster. Fig 2 Infographic : Social Media & Mental Health - PDF Ideas & References Fig 3 Reference 1 Fig 4 Reference 2 Sketches Fig 5 Sketch 1 This is the first sketch that I made but from the feedback of Mr. Shamsul, the layout is not organized and didn't see the design principal such as contrast in the sketch. Mr. Shamsul suggested me to find some good references an...
Welcome

Final Project

-
Image
26 December 2024 Simon Ko Jing Liang 0364359 Bachelor of Design (HONS) in Creative Media INSTRUCTION Process When the prototype was working which is the AR map experiential, I added multiple 3D attractions in Unity to make the experiential more interesting but cannot import too much 3D model. I had imported more 3D model before but when reopen the project, all of the 3D model will disappear or some materials had missing. AR SCENE Fig 1 For AR scene, I created a Canvas and  added a panel then added a back button and text in the panel. For the back button can be click and back to Discover scene.  Fig 2 After that I created an image target that I had downloaded the image target from database(Vuforia).  Fig 3 Then I imported the 3D Model which is The Great Wall. Then I adjust its scale and its position so that when the camera scan the image target, the 3D model can be appear at the right position and the user can interact with it.  Fig 4 This is the Liberty...
Welcome