Project 2: Prototype

-

 SIMON KO JING LIANG
0364359
Bachelor of Design (HONS) in Creative Media
Advanced Interactive Design
Project 2: Prototype

Instruction

Fig 1
Module - PDF

Progression

Ideas, moodboard&sample animations

For the task, we were going to create a prototype of interactive website that the topic we chose.
The following is the mood board and some sample animations that make me have some inspiration and ideas.


Fig 1.2
Mood Board


Fig 1.3 
Sample animation

I also looking for some animations that can add into my interactive website to make it more attractive.

Sample animation 1: https://www.pinterest.com/pin/443745369546835314/



Wireframe&User Flow


Fig 1.4
Wireframe

The wireframe I had done with using adobe illustrator and for the pictures in the website, I will use images and some graphics that I find or design by myself. For the white and black buttons in the prototype just a draft because I haven't find a suitable graphics or images.



Fig 1.5
User Flow

User flow Link: https://www.figma.com/design/tXy7cRgzBLqSS0P5voQms6/Flow?m=auto&t=sTA4gzXM5vReen1H-6

Prototyping




Fig 1.6
Prototyping

Prototype Link: https://www.figma.com/proto/hjpqry0uNPFl8P1dEiIVxv/Prototype?page-id=0%3A1&node-id=1-3&viewport=170%2C2275%2C0.25&t=7wX2fSajyjAvlVQv-1&scaling=contain&content-scaling=fixed


Final Submission

Presentation Slides



Presentation Video


Fig 1.7
Presentation Video

There may be a slight delay in the early stage in the video.


Popular posts from this blog

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

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