ADVANCED INTERACTIVE DESIGN - TASK 1: THEMATIC INTERACTIVE WEBSITE PROPOSAL
23/04/2026 - 11/05/2026 (Week 1 - Week 8)
Madeline Ordelia Tjahjadi (0376920)
Bachelor of Design in Creative Media
Task 1: Thematic Interactive Website Proposal
Table of Content
1. Lectures
2. Instruction
3. Process Work
4. Feedback
5. Reflection
1. Lectures
Week 1
Mr. Shamsul briefed us on our Task 1 proposal and told us to download
Adobe Animate. We need to propose three ideas for an interactive website. He also shared some example websites to guide us.
Week 2
In this week, we have a tutorial session of how to use adobe animate. We
were tasked with making a beach ball and tracing a boat.
Figure 1.1: Beach ball (1st practice)
(ps. my laptop keep crashing so I don't have the screenshot of when I
make the first practice, so here's the photo instead)
Figure 1.2: Tracing the boat (2nd practice).
After that, I consulted him regarding my new third ideation, which he
approved. I have now started working on the proposal.
Week 3
No class
Week 4
This week, we were given another tutorial, but now it's about how to
animate. We're starting with a simple movement: a ball bouncing on a
string.
Figure 1.3: Bouncing ball.
After that, we tried to create a spider with legs that moves from the top of
the screen down to the ground.
Figure 1.4: Spider movement
Note: To create more than one movement, we need to convert the spider into a
symbol first so we can edit it (as shown in the picture below). Editing the
spider separately makes it much easier to animate the leg movements and the
spider dropping down from the top of the screen.
Figure 1.5: Edit symbols button.
After the tutorial, I consulted with Mr. Shamsul regarding my proposal. I
gave him the updated version, and he gave me feedback on how to improve it
especially my wireframes.
Week 5
This week tutorial, we learn how to animate text. We will create text that
shows one by one and then ending it with a box with text to enter.
We first put a text and convert it to symbol: graphic. After that we create
keyframe on 15 and go back to the first keyframe and make the text go left
and then change it to alpha to make the opacity 0%. After that, we put
classic tween on the first keyframe to create movement. Repeat this step to
make the text go out (use ease out: quad, when text enter and use ease in:
quad, when text out).
Figure 1.6: Text in and out.
After that, use the Ruler tool to create box around the text. Break apart
the box, and then group each individual line using
Cmd + G. Next, select all lines and distribute them to layers
so that each line occupies its own independent layer. Once isolated, break
apart all the lines again. Finally, gradually delete portions of the lines
across consecutive keyframes until only small segments remain, creating a
clean revealing or disappearing effect.
Figure 1.7: Making the box.
Last step we put enter text into the box just like when we animating the
other text. One last touch, we create another layer and put box and
mask.
notes:
- Graphic and movie clip symbol differences: graphic need keyframe but movie clip will start animating immediately.
- fn + f8 to create symbol
Week 6
In this week tutorial, Mr. Shamsul taught us how to add an action button.
First, we create a new layer called "btn_enter". After that, we go to the
end of our main timeline, move one frame forward, and insert a new keyframe
on this new layer. On that keyframe, we use "paste in place" to paste the
button artwork from the previous keyframe. Next, we convert this pasted
object into a button symbol.
To customize the button, we double click it to edit its timeline and create
a hover effect. We insert a keyframe in the Over to change the
button's appearance when a user hovers over it, To make sure the entire
button area is responsive, we insert keyframe in the Hit and draw a
rectangle inside. This defines the clickable hit area, allowing the hover
effect to trigger no matter where the user hovers over the button.
Once the button is ready, we return to the main timeline, right-click the
keyframe, and select Actions. In the actions panel, we use the action
wizard to add a stop(); code. This stop action pauses the animation,
preventing it from moving forward and giving the user a chance to interact
with the button.
Figure 1.8: Progress making the hover effect.
Figure 1.9: Adding the action stop();.
After that, we want the user to go to the homepage when the button clicked. To
do this, we first design the homepage inside a new layer. Then, we create a
new keyframe right after the stop action (parallel to the new keyframe and new
layer for homepage design) and give it the frame label "start". Next, we
right-click the "enter" button on the stage and open the actions panel again.
Using the wizard, we add a "go to frame and play" action and change the target
destination to our "start" label. The code will now automatically direct the
playhead to the "start" frame when clicked. Finally, to prevent the website
timeline from continuously playing past the homepage, we add another stop
action at the very end of the homepage keyframe.
Figure 1.10: the code to go to the homepage.
Figure 1.11: Added stop action at the end of homepage.
Final outcome
Week 7
For this week tutorial, Mr. Shamsul gave us a file and we need to make the
button works with actions, just like last week tutorial.
Figure 1.12: Tutorial for week 7.
2. Instruction
Document 2.1: Module Information Booklet for Advanced Interactive.
3. Process Work
On this task we required to propose 3 ideas. The topic can be based
on:
- A specific product of a particular brand launch/special, beauty product lunch
- 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)
The submission consists of:
- Completed UI/UX proposal document
- All processes
- Prototype
Proposal ideas:
To begin with, we should come up with a minimum of three ideas to propose. I have compiled three ideas based on my interests, as well as the recommended topics.
- Interstellar movie
- Olivia Rodrigo's album "Sour"
- Childhood Traditional Games in Indonesia
Below is the presentation slides of my proposal ideation:
Finalized Concept:
After consulting with Mr. Shamsul regarding my ideation process, my third
concept: childhood traditional games was approved. Following that, I began
drafting my proposal.
Concept Name: Main Lagi
This website centers on traditional Indonesian childhood games. The goal is
to provide a sense of nostalgia while allowing users to discover the unique
history behind each game.
Problem Statement
Nowadays, the rise of digital media is causing traditional childhood games
to fade away, as children are exposed to digital screens long before they
ever experience traditional play. To prevent this cultural loss, "Main Lagi"
provides a nostalgic and educational digital space where users can
rediscover the history behind these games. Instead of fighting the rise of
digital media, this platform embraces the trend, combining digital exposure
with cultural learning to turn a modern habit into a tool for cultural
discovery.
Target Audience
The primary audience will be age around 18-35, individuals who seeks a
nostalgic experience and deeper understanding of the history behind
traditional games.
The secondary audience will be age around 7-17, students and young learners
who use website as an educational tool to interact with.
Mood board
Because the website will be quite heavy on illustration, I aim to use a
simple art style. I researched current design trends that would effectively
reach our target audience.
Figure 3.1: Art style mood board.
The figure above shows vector graphic arts. Additionally, I want to
incorporate Bauhaus-inspired geometric shapes.
For the typography, the main title will feature "Rammeto one", while the
body text, I will be using "Poppins".
Figure 3.2: Font used.
As for the color palette, my goal is to create nostalgic feelings with muted
color. I used the reference image below to generate a palette via Adobe
Color. The reference reminds me of the color that Indonesian artist usually
use to create childhood story back in the days.
Figure 3.3: Color palette reference.
Figure 3.4: Color palette.
Next will be my character art style. Since my art style also includes
bauhaus geometric style, my character will have geometry face and body like
the picture below.
Figure 3.5: Sketch of the character.
To develop my wireframes, I searched some reference website to explore
layouts that are both visually engaging and interactive.
Figure 3.6: Hurry up & Have fun homepage.
This website features the style I aim aiming for: geometric styles paired
with bold, large-scale typography for headlines. It has been a major source
of inspiration for my visual layout.
Figure 3.7: Maxima therapy programs page.
This website captures the playful energy I want to bring to "Main Lagi". Its
vibrant color palette and dynamic animations inspired my approach to the
wireframes and the interactive elements.
Figure 3.8: Loading page and Homepage.
The loading page inspired me to design a similar onboarding experience,
while the bottom navigation bar gave me the idea to implement a dedicated
icon dock for switching between games.
Figure 3.9: Idle state in homepage.
The idle state of the homepage inspired the design of my homepage game
elements, making it clear that they are clickable and will direct users to
another page. Additionally, the card layout inspired the design of the 'how
to play' page.
Website Elements
1. Five traditional childhood games
Including Congklak, Engklek, Kelereng, Lompat tali and Gasing.
2. History of the games
the origin, popular in which area, and what is the meaning/value of the
games.
3. How to play
the equipment needed, the demonstration of the game and let users experience
how to play it.
Web content:
Wireframe
I make my wireframe and userflow together because my website is heavy on
illustration.
Figure 3.10: Wireframe draft #1.
Mr. Shamsul told me that interactive website should not have long landing
page. User need to interact with something to go to another page, so I made
another wireframe.
Figure 3.11: Wireframe draft #2.
On my second draft, I need to figure out how users can tell that the game
elements (the circles with an 'X' in homepage) are clickable. I should
probably create an idle state so that even without hovering, users know
exactly where to click.
For my 'About' page, I need to change the hierarchy. Mr shamsul told me to
look into the Laws of UX and apply them to the page's layout. As for the
game elements pages, it's good and I can proceed to create the prototype.
Figure 3.12: Final Wireframe (wip)
Figure 3.13: User Flow & Wireframe (wip)
Upon entering the website, users are greeted by a loading screen before
being transitioned to the homepage. From there, they can use the
navigation bar to access the "About" section or explore the interactive
game elements featured on the homepage. Hovering over or clicking on a
specific game element will direct the user to its dedicated game page.
Once inside a game page, users can seamlessly switch to other games using
the icon in navigation bar provided.
Prototype
Once I finished the user flow and everything, I consulted one more time
and then begin my prototype. In the prototype I create only Kelereng page
because the rest of the games will most likely have the same layout with
different content inside.
Figure 3.14: Prototype progress.
In week 7, I consulted my prototype. Mr. Shamsul said it's good but I need
to work on my navigation, to create a more user friendly website. So each
page can navigate to another page without going back too much.
I decided to make an overlay for the about page. Instead of navigating to
an entirely new page, clicking 'about' will now show an overlay that the
user can close.
Figure 3.15: Refined about page.
I also removed the loading bar in loading page since I already have the
kelereng as the indicator of the loading.
Figure 3.16: Refined loading page.
Figure 3.17: Figma work view.
Figure 3.18: Figma present view.
Final Proposal slides:
4. Feedback
Week 1
Mr. Shamsul like one of my ideation about interstellar, but at the time I
only propose 2 ideation, next week I will consult one more.
Week 2
I consulted with him regarding my final ideation, and he approved it. The
interactive elements I want to include in the website are interesting, so I
can proceed with my proposal.
Week 3
No class
Week 4
I gave him update of my progress especially the wireframes. He told me to
avoid landing page and give buttons instead and let users interact with the
website.
Week 5
After the tutorial, I started to consult my wireframes. I need to be aware of
the hierarchy (Laws of UX) of my about page. One more thing, I need to
let my game icons indicate that they are clickable, there must be an idle
state for each of my icons in the homepage.
Week 6
I have a consultation session on Monday and shows my progress and changes I
made. He approved my wireframe and I can proceed with the prototype.
Week 7
I consulted my prototype and he told me to change the loading page by removing
the bar. Create a user friendly website by fixing the navigation, so each page
can navigate to others.
5. Reflection
In this task, we basically created an interactive website, literally an advanced version of interactive design. We developed a proposal from ideation to the final prototype. I explored so many concepts and even learned how to use a new adobe which is animate. It's quite hard because it's a bit tricky to use (ps. my adobe keeps crashing), but I'm amazed by how much you can actually with it. Building a prototype in Figma that closely mirrored what I planned to do in Adobe animate later on was so much fun. Overall, I learned a lot, and I really appreciate how every piece of feedback Mr. Shamsul gave me actually made my project better.
Comments
Post a Comment