Advanced Interactive Design - Thematic Interactive Website Proposal (Task 1)

24/4/2024 - 29/5/2024 (Week 1 - Week 6)
Katelyn Tan Kye Ling (0354148)
Bachelor Of Design In Creative Media (Advanced Interactive Design)
Thematic Interactive Website Proposal (Task 1)

INSTRUCTION

WEEK 1:

During our first week of class, Mr. Shamsul briefed us on the tasks we have for the semester. Then he proceeded by asking us to start our proposal and think of the topic we want to create a website for. Since I really like makeup and the makeup brand called Clio, I decided that I'll do a product launch website for their new makeup series (Fig 1.1).

Fig. 1.1 (Clio New Makeup Series)

I then started looking for inspiration for my moodboard. I looked for websites that looked nice and features that the websites have that I would like to include into my own website. (Fig. 1.2)

Fig 1.2 (Week 1 - Moodboard)

WEEK 2: (No class - Holiday)

I worked on the flowchart first because I wanted to know what I'm going to include in my website and how it's going to flow. It took me quite some time to think about it because I found it hard to visualise the website and I was lacking of ideas. After a while of thinking, I came out with a simple flowchart (Fig 1.3). 

Fig. 1.3 (Week 2 Flowchart) 

WEEK 3:

During class this week, we learned how to draw on Adobe Animate. We were first given a tutorial on how to use the tools, then Mr. Shamsul asked us to draw a few objects. This was my take on drawing the objects (Fig. 1.4).

Fig 1.4 (Week 3 - In class exercise)

I then redid my moodboard and found some pictures on Pinterest and also a website that really inspired me (Fig 1.5). I then also removed the product introduction page from my flowchart as I thought that page was unnecessary.

Fig 1.5 (Week 3 - Updated Moodboard)

WEEK 4:

We first started off with a simple animation tutorial and had to try it ourselves. We were to make a bouncing ball animation.

Fig 1.6 W4 Exercise

I started to work on my wireframe. I was struggling slightly so I did my work halfway (Fig 1.6) and decided to consult Mr. Shamsul for the rest of the wireframe pages.

Fig 1.7 (Week 4 - Halfway done wireframe)

After the consultation, I was more clear on how to do the rest of the wireframe and completed it. (Fig 1.7)

Fig 1.8 (Week 4 - Rest of the wireframe)

WEEK 5:

I got my feedback through WhatsApp this week since Wednesday was a public holiday. I had to redesign my wireframes as well as make my flowchart more detailed. I changed up 3 of the products wireframe design and explained each page with much detail in my slides. 

WEEK 6:

This week was our submission date, we were given time to clean up and make final changes for our proposal. In class, we also learnt more about adobe animate. We learn how to do a few more animations.

Here is my take on the exercise:

Fig 1.9 (Week 6 - In class exercise)

FINAL PROPOSAL SLIDES: Click here

WEEKLY FEEDBACK

Week 3 (8/5/2024):

- Flowchart needs explanation.

- Concept isn't clear enough.

- Moodboard isn't showing what the website will look like. Moodboard doesn't necessarily need to be websites, it can be pictures, movies etc.

Week 4 (15/5/2024):

- Each page should include title, body copy, image, and other interactive elements.

- No need to put the loading part in the flowchart

- Wireframe is ok, can put the unicorn running for the loading page.

- For the product pages, can show more information by asking users to click on certain places of the page.

Week 5 (24/5/2024):

- The topic is okay but the wireframe not very clear and not consistent in terms of the layout.

- Flow chart is too simple, write out the interactive elements inside of each product.

REFLECTION

Experience
For this first task, I found a topic quite easily because I wanted to create a website for something I am interested in, and I personally really like the brand "Clio" which is the brand I'm going to create a website for. The product already had a theme on its own so creating the theme and moodboard was pretty simple. However when it came to the flowchart and wireframe, that was where I started to struggled. Back in interactive design in Semester 2, we had to create our own website as well but it wasn't this detailed. Therefore, all these are still pretty new to me. But with Mr. Shamshul's guidance and feedback I was able to pull through and understand things better.

Observation
I observed that even if it's just a simple proposal, it has to be detailed too. For example, in my first flowchart I did not include the interactive elements that will be in each page which will cause people to not fully understand my website proposal. I also observed that sometimes simple is better, too many elements on the page can make a website messy and all over the place.

Findings

While I was looking for inspirations for my website proposal, I found myself admiring different interactive websites. At one point it got me thinking whether or not I am able to make a website up to that level. I find myself appreciating websites more now especially those that are highly interactive as it isn't easy to even propose the idea, the planning alone takes much time and effort.