Advanced Interactive Design: Task 1

-

26/9/2024  - 18/10/2024 (Week 1 - Week 4) 

Lim Yu Xuen / 0359676 

Advanced Interactive Design / Bachelors of Design (Hons) in Creative Media / Taylor's University

Task 1: Thematic Interactive Website Proposal

Module Information

LECTURES

Week 1 — Lecture
Module Information Briefing

(Delayed by 1 week; Week 1 class was cancelled) 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.

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


Week 2 — Lecture
Adobe Animate: Keyframe Animations (Exercise 1)

Class notes
  • create frames adjust circle to move a little each frame
  • onion skin to compare each frame’s position
  • copy 1-10 frames and paste it at the back, right click to invert frames
  • loop can be used throughout the frames for animation to loop
  • command + enter to preview these frames in my browser
Week 3 — Adobe Animate
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.

Week 4 — Adobe Animate
Adobe Animate: Exercise 3

In class, we learned how to use shape tweening. In shape tweening, we studied how to draw a vector shape at one specific frame in the Timeline and then change that shape or draw another shape at another specific frame.

TASK 1: THEMATIC WEBSITE PROPOSAL

Task Requirements

Create a thematic interactive website proposal with the topic of their choice that can be based on: 
  • a specific product of a particular brand launch / special (i.g: nike brand new shoe), beauty product launch (i.g: sephora compact powder)
  • movie promotion
  • game release promotion
  • gallery / artist latest release
  • 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)

Workflow
  1. choices of topics, research & visual references
  2. selected topic - concept
  3. moodboard
  4. wireframes
  5. flowchart
  6. UI/UX design
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: Roboto

Figure 3.3 Selected Font Family





2. Colour Scheme

Figure 3.4 Colour Scheme

3. Lo-Fi Wireframes

After confirming the idea and path I want to do, I started on the wireframes, I did not go into detail as I just wanted to show the base of the website idea. Attached below is 3 slides showing the wireframe 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 the Animal Crossing topic is good, he then said that its better to be more detailed as my idea was very broad. It took me a few trial and error and decided to go for the topic Seasons as it is very specific and should be easy to have all the information needed.

Week 4
Mr Shamsul said we need to work on our visual design and start planning the website's interactive design elements and features.


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