Advanced Interactive Design - Task 1

24 April 2024 - 29 May 2024 / Week 1 - Week 6
Sim Jia Min 0349784
Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University
Task 1: Thematic Interactive Website Proposal

---

INSTRUCTIONS (MIB)

Task 1: Thematic Interactive Website Proposal

As week 1 started, the module was introduced briefly with the assignment details. The tasks will start with a proposal, then a prototype, and lastly a working website. We are going to learn how to utilise Adobe Animate to do website animation/motion. The website requirement is not like a traditional website with common navigation, we are going to make a thematic website based on a self-selected topic. The outcome is going to be different from what we had done in Interactive Design module, the requirement of this module is more of a creative design approach.

Mr Shamsul suggested that we can incorporate our work from other modules into the website to reduce our workload. Therefore, I decided to incorporate a conceptual brand created by myself, it is a work from Creative Brand Strategy module. The brand itself is a hawthorn sweet brand, it is a Chinese traditional sweet, but rebranded to be introduced in the global market, specifically targeting the younger consumers.

Figure 1.1: First mood board 

Figure 1.1 is my first mood board of the overall visual style of the brand, a old school + retro chinese visual style. But then I realised that this direction might not be suitable to apply to a globally launched brand, as people from other cultural backgrounds might feel not so related to this style, plus it doesn't really suit the idea of attracting new and young consumers. 

Figure 1.2: Refined mood board

So I headed in an entirely different direction, created another mood board (Figure 1.2) which focused on the geometrical shapes of the haw sweets, and contrasting colours that bring out the brand objective of attracting younger consumers globally and fit into the trendy branding in this modern world. 

Figure 1.3: Wireframes (first draft)

After having a solid concept I started to create wireframes, at this stage, I was still unable to decide which types of thematic website references would suit my concept. I wasn't entirely satisfied with the wireframes as I thought they looked boring and did not meet the requirements. After receiving feedback from Mr Shamsul, I decided to look for more references and refine the wireframes. 

Figure 1.4: A brief look of the refined wireframes

I looked for more thematic website references, and found that a horizontal-scrolling website is quite an interesting approach for my brand website. I did wireframes based on that concept and added some details of how the animation would look like.

FINAL SUBMISSION

Figure: Task 1_Thematic Website Proposal by Sim Jia Min

FEEDBACK

Week 3

- Website topic and concept approved

- Wireframes can include more details, for now it looks like a common website

- Look for more references of how non-traditional thematic websites look like

Week 4

- Wireframes can use some arrows to indicate the scrolling motion

- Flow chart needs to be more detailed, include all the buttons on the website

Week 6

- Wireframes are detailed

- The location page and other pages look different, can make them all under a similar structure and scroll motion

REFLECTION

The progress of doing this proposal was initially challenging as I was switching my visual concept, and also lost at looking for suitable website references for my website proposal. After a while of browsing through different thematic websites, I finally found a few references that are suitable and seem applicable to my website. Right now I am still not entirely sure how would I manage to actually code the website with motion/animation as the wireframes include many features, and to be honest I am quite anxious when thinking about all these. Hopefully the future me will find the way and solve them.