Advanced Interactive Design: Task 1

-

Thematic Interactive Website Proposalㅤ 

 Table of Contents 

Module Information

 Lectures 

Week 1
➜ Module Information Briefing

Mr Shamsul briefed us on the module and the tasks for our semester. We were instructed to begin our Project 1 proposals by brainstorming topics for our thematic website. I had a few ideas in mind so I started listing them out in my notes before I work on my proposal. We were informed to download Adobe Animate before next week's class.

Mr Shamsul tasked us to go through projects listed in this website: FWA

Week 2
➜ Absent with Permission (Leave)

Based on what other's have learnt, there was a class exercise to replicate a ship.

Week 3
➜ Adobe Animate: Exercise 2
This week, we studied the fundamentals of using animation with Adobe Animate. During class activities, we worked on producing the shapes moving and using ease-out and ease-in effects at various keyframes. At the end of class, we had a consultation session with Mr Shamsul to go over our Project 1 topic. 

(insert the animation i created the countdown)

Week 4
➜ Class got cancelled
 Task 1: Thematic Website Proposal 

Task Requirements
Students are required to create a thematic interactive website proposal with the topic of their choice that can be based on: 
  1. A specific product of a particular brand launch/special (i.e.: Nike brand new shoe), Beauty product launch (i.e.: Sephora compact powder,
  2. Movie promotion 
  3. Game release promotion
  4. Gallery/Museum exhibit launch 
  5. Band/Artist latest release
  6. Or anything else you have in mind (subject to the module coordinator’s approval)
Submission:
  1. Completed UI/UX proposal document. 
  2. All processes (concept, wireframes, mood board, flow chart)


Draft Proposal
During this week, I listed out a few possible topics (3) and proposed my ideas to our lecturer.

Figure 3.1 Draft Proposal

After consulting with Mr Shamsul, I selected the topic #3: Animal Crossing (Game Promotion)

Figure 3.2 Selected Topic

Further Concept Development

1. Typography
I selected the font family: FOT Bokutoh Pro (EB) & FOT Seurat Pro (B)
These 2 font families are from the original game.



Figure 3.3 Selected Font Family


2. Colour Scheme
I have selected earthy-tone colours as it is inspired from the common colours seen in the game.

Figure 3.4 Colour Scheme

3. Lo-Fi Wireframes

After confirming the idea and path I want to do, I started on the wireframes. Attached below is the lo-fi wireframes overview.
Figure 3.5 Wireframes Overview


4. User Flowchart

Figure 3.6 User Flowchart


5. Final Proposal

Below shows the presentation slides for my final proposal.

Figure 3.7 Final Proposal


 Feedback 
Week 3

Mr Shamsul mentioned that I can go ahead with my Animal Crossing title, and start thinking of the colour scheme and typography. He recommended to plan my wireframes for at least 4 pages, and then try to align the visual design with the actual game design.

 Reflection 

In this task, it was pretty easy to get done with as all I had to do was to choose a topic that I am interested in, and from there, be more specific with which to do. It took me awhile to come our with the three topic ideas, but im glad Mr Shamsul could help me narrow it down for ease of selection of topics.

I also learnt to create low-fidelity wireframes with Figma, and applied it in this task. Even though the wireframes I created are not detailed and designed super minimalistic, I was able to fix on the idea of my website and have a clearer vision of it before proceeding with Task 2, which is the interactive design elements and animations.


 ↑               →
      top                             task 2