Advanced Interactive Design - Task 1 Proposal
20/04/2026 - 7/6/2026 (Week 1 - Week 7)
Anggia Tsani Rachmadiyanti, (0368487)
Advanced Interactive Design DST60804 / Bachelor in Design (Hons) in Creative Media / Taylor's University
Advanced Interactive Design DST60804 / Bachelor in Design (Hons) in Creative Media / Taylor's University
Task 1 - Proposal
CONTENT LIST
- Instructions & Brief
- Lecture notes
- Task 1 - Proposal
- Progress
- Prototype (Figma & Link)
- Feedbacks
- Overall Reflection
Module Brief:
Lecture Notes
Please refer to
Exercises page
for lecture notes
Task 1: Thematic Interactive Website Proposal
Requirements:
We are required to propose and create a thematic interactive website proposal with the topic of our choice that can be based on:
-
A specific product of a particular brand launch/special
(i.e.: Nike brand new shoe), Beauty product launch (i.e.:
Sephora compact powder)
-
Movie promotion
-
Game release promotion
-
Gallery/Museum exhibit launch
-
Band/Artist latest release.
-
Or anything else you have in mind (subject to the module
coordinator’s approval)
Description:
Thematic Interactive Website Proposal for Brand Engagement. A
thematic interactive website is a website that focuses on a
specific theme or concept with the aim of incorporating
interactive elements to interact with users. Most such websites
utilize multimedia such as videos, animations, interactive
graphics displayed on the page, or other clickable elements
which have interactive components that provoke the user. This
dynamic experience is meant to keep the user interested in
addition to the thematic concept. Themes in such websites vary
from educational, cultural, promotional campaigns to product
launch. For example, a thematic interactive site could be a
museum. Users can go through a virtual exhibition space through
interactive tours, games simulation, or questionnaires. In the
event that it is a movie, the site can simulate movie universes
offering virtual tours through time and space, or any other
subject previously created in the movie. The aim of any such
site is to keep the user engaged in the medium through
interactive exploration.
Submission:
-
Completed UI/UX proposal document.
-
All processes (concept, wireframes, mood board, flow
chart/site map)
-
Prototype
Draft Ideas...
To start off, I chose Movie Promotion as my topic. However, I first
came up with 3 ideas of the movie plan, which are some of the good
movies i've watched in terms of visuals:
#Idea 1 - "Challengers" Movie Website Promo
#Idea 2 - "Inside Out 2" Movie Website Promo
#Idea 3 - "F1 The Movie" Movie Website Promo
#Idea 4 - "Enola Holmes" Movie Website Promo
I did researches and ideas of all the 4 onto Figjam boards:
(Fig. 1.1) - Week 1, Figjam of my 4 movie promo ideas,
24/4/2026
(Fig. 1.2) - Week 1, Figjam of F1 Educational Guide
website idea, 24/4/2026
(Fig. 1.3) - Week 1, Figjam of my ideas, 24/4/2026
I decided to go with "F1 educational beginner guide for newbies",
mainly targeted for kids, young teenagers who are new to f1. I
chose this because to me, I personally am an f1 fan, and i
experienced myself when i first started following f1, i find all
the new terms difficult and alot to understand, where i had to
search one by one of the terms in f1 meaning on google. Therefore,
I want to make a website that's fun and educational for new f1
fans to learn more.
This is my draft f1 website content flow:
(Fig. 1.4) - Flowchart draft for the f1 website
Below is my draft Document which I did on the contents,
informations to put in the website for each page. I also did
researches about the contents to put:
(Fig. 1.5) - Docs of the draft contents & info to
put in the website
Task 1 Website Final Proposal Canva Slides:
(Fig. 2.1) - Canva Slide Task 1 Proposal
Website References:
1) Hello Monday
Hello Monday was not the strongest website inspo, but their visual brush/sketch doodle bnw style was near to my chosen proposed direction for the F1 website..
This portfolio website was really catchy and fun to browse through with many clickable buttons in a very fun and playful style. Each hover has an animation to the button and leads to many different sections of the pages.
This website theme is a stroytelling flowing website as you scroll. Theres constant motion of the background and also cards come in with transitions, making the whole website feel alive. What I loved about this website is that even with just little / monochrome colours, all visuals are strong using handrawn brush visuals throughout. It's overall only scroll-based digital storytelling.
My F1 Website Draft Wireframes:
However, after this I did some changes to the figma, I decided not to put the ending "Now You're Ready" page since not every user will go through the same flow of the pages, and it's quite unnecessary. For the F1 Basic Key terms, I decided to place them all into interactive clickable F1 steering wheel interface screen like this:
Figma Working File Link & Progress (Week 6-7):
Link:https://www.figma.com/design/pvOyxL9bDnujGRkg73joyT/Adv-Interactive?node-id=0-1&t=FrDbP7Ycu46AoEcS-1
Following the wireframes draft sketch earlier, I started
making the pages work in Figma using slight animations using
after delay, components, buttons and variants.
I made some slider arrows, hover animations to make it more
engaging. To make this there were alot of thinking and
technical stuffs to think of. I have made alot of assets in
this prototype, making sure the whole website works cohesively
and good flow.
(Fig. 2.2) - Screenshot of Figma prototype
progress
(Fig. 2.3) - Screenshot of Figma prototype
progress
(Fig. 2.4) - Screenshot of Figma prototype
progress
(Fig. 2.5) - Screenshot of Figma prototype
progress
Process of drawing each visuals digitally on Ipad:
For the website, all visuals are self-drawn digitally on Procreate ipad, before transferred to figma.
Following my sketch style visual direction, for this website I really want it to be a special one, so I dedicate my time on drawing one by one, each of all the visuals (including the cars, steering wheels) digitally on my ipad myself, using a sketchy doodle style. All the images that supports the information on the website are drawn digitally by hand on Procreate which I did on my Ipad. After finishing all the assets of the visual elements and drawings, I vectorised all of them in Figma.
Fonts & Colours Used:
Figma Prototype Link:
(Fig. 3.1) - Embedded Figma Prototype Link
Figma Working Preview Prototype here:
(Fig. 3.2) - Screen recording video of working
prototype walkthrough video, Figma
Feedbacks
Week 7:
General Feedback: Mr Shamsul said continue doing our figma, make sure
the art styles are placed into the canva for our proposal
and ideas/references.
Specific Feedback: Mr Shamsul said my figma is good so far but he
gave me some stuff to edit:
- Make the arrow navigation just 2 lines, 3 is too much
- At the end of each page, dont put an arrow to continue to the next subpage, this is to indicate the user that they can move to the next page by clicking on the nextpage from the navigation bar ontop.
- For the car and tyres main page, add 2 buttons choice : Car parts and Tyres, so the user can choose and click, rather than just click continue:
- for the types of flag, for each flag page, add at the bottom a carousel nav of all the 8 flags, so the user will know how many flags are there:
Week 8:
Specific Feedback: Mr Shamsul said my Figma is all good and I can start doing the website on animate next week
Reflections
Experience: Briefin
Observations: None
Findings: None
Comments
Post a Comment