Advanced Interactive - Task 2

NAME: SARAH CHEONG YINSHI                                                                                                        I.D: 0354962

COURSE: BDCM

WEEK 8 - WEEK 10

19/10/2023 - 07/11/2023

ADVANCED INTERACTIVE

⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫

INSTRUCTION

⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫

PROGRESS RECORD | WEEK 8

For this week, we were briefed about how to create a flowchart. I searched some examples on flowchart, as I have no experience on it, it took me quite some time to brainstorm the flow of my website.

For my website, focusing on the product, I do not need customer profile (log in/sign up) and purchase. It is more towards a page that tells more about the brand and product itself.

Figure 1.1 - Flowchart example

Before constructing my flow chart, I also studied my brand's original website design on how their place their layout and flow.

Figure 1.2 - Chuck's website

Flow:

• Full screen slideshow

• Just In/ Best Selling

• Location (Find Chuck’s)

• Photography close up of skin

• Introduction of brand

• Sign Up for News Letter

• Logo

• Footer

  
  

  Navigation:

  • Shop all

  • New in

  • Chuck’s

  • Motherchuckers

  • Last Chance

  
  

  Logo

  
  

  Side Bar:

  • Rewards

  • Login

  • My Bag (Cart)

PROGRESS RECORD | WEEK 9

My website will be focusing a lot on the product, the 4 navigation will be 

- Home

- Location

- Product 

- Contact

The brand story and description will be under Home page

Figure 1.3 - Flowchart

PROGRESS RECORD | WEEK 10

For this week, I did a rough slide to record what I had for now, include the flow of my website and some reference I found for the layout and color scheme.

Figure 1.3 - Ideation record

I did mostly of my research on Pinterest, I saved all the references into a folder : 

Click here to view my Pinterest

As they have mostly the website animation, I can easily know which concept and animation I am going to use on my website

Figure 1.3 - Concept 

⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫

FINAL SUBMISSION

Flow Chart

Figure 2 - Flowchart

Concept

Click here to view my Pinterest

Figure 2.1 - Concept 

Moodboard

Figure 2.2 - Moodboard

Wireframe

Figure 2.3 - Wireframe 

Video

⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫

FEEDBACK

WEEK 8

As we don't have class this week, I tried to scroll on Pinterest for animation ideas and style of my website.

WEEK 9

After completing the filter for Chuck's Co, I had a more clear direction for the design style to be applied into my website design. We had practical session in class to learn the basics of animation that could be useful for our website design. Lecturer gave explanation on how we should design our flowchart, since most of us are not from uiux, we are not quite familiar with it.

WEEK 10

We had to complete our flowchart. While also we had more session on how to animate some of the shapes using Adobe animate. 

⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫⧫

REFLECTION

The process of creating a website is not as easy as I thought. It's my first time being so detailed before starting my design. I had seen so many different types of animation website while doing my research. It may looked easy but once I started to construct the process, it took me a lot of time, even though it's still on the process of even start to code the website.