Advanced Interactive Design Task 2

Eric Chang (0378298)

Bachelor Of Design in Creative Media

Advanced Interactive Design

---

Instructions:

---

Task 2: Website Prototype

Students are required to work on their visual design and start planning their website’s interactive design elements and features. Unlike traditional static website, when it comes to interactive design where animations are present, the plan not only should include the layout visuals but also the animation example or reference. Students can build their animation or user-reference animation to demonstrate the intended idea.

Requirements:

• Walkthrough Video presenting the plan and showing the animation examples and/or references. (Compulsary)
• Online posts in your E-portfolio as your reflective studies with links to any resource involved in the creating of the plan. (i.e.: Figma link, Miro link, etc.)

Before doing this task, I look around for some inspiration that i can use. I was aiming to create something that could present a clear information, this means that i am going for a minimalist website. 

So for the prototyping I took some inspiration from this website:

https://elimar.lmigroupintl.com/

Now offcourse there's no way that i could create the same website with a short ammount of time, however I decided to copy the animation from that website.

Below is the Progress of creating the website:

Font Selection:

For this project, I decided to use "italiana" and "instrument serif" font. I picked Italiana because it looks like a Java (not the coding language) font, which kinda represents Indonesia, and for the instrument serif, I picked this font because it kinda fits well with the Italiana font.

For the start page, at first I decided to add some background to the "who are they?" section and "what they do?" section. However, after some second thought, it actually ruins the overall consistency of the website, so I decided to remove the background. and so below are the revised version.

After I've done the start page, I decided to move on the the selection page. At first, i didn't plan to include this section, but after some second thought i decided to add it. so i can include more information on my website.

For the selection page, I decided to make it simple since it is just for selecting the person that the user wants to learn more. For this page, i decided to add a little hover effect when the user hovers their mouse over the picture, where it would show a short description about that person.

After the selection page, it's time to create the main content of the website. For the main content, I decided to include: a short description about that person, their early life, their education, their achievement, and their end of life. 

I decided to make this part simple, to share the information as clearly as possible, I this is why the color palette that I picked for my website is black and white (although I might change it). below are the progress for the main pages of my website.

The picture above is the top section of my page, where I included a short description about the person. Next is the Early life and education section, where I talked about that person's childhood and education journey.

After the Early Life and Education section, the last section talks about that person's achievements. Basically, this section talks about why that particular person is popular or why that person is still being remembered to this day.

Lastly here's my video presentation for this Task and my Canva slide:

Canva Slide:

Advanced Interactive Task 2 by ERIC CHANG