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.
Requirements Students are required to 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.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)
Submission
Completed UI/UX proposal document.
All processes (concept, wireframes, mood board, flow chart/site map)
Prototype
Have to be documented and posted in your E-portfolio as your reflective
studies.
When Mr. Shamsul introduced this assignment and showed us an example of a
senior's work by Tracy Angeline Tio, I immediately got inspired, as it
reminded me of a project from a previous module, Information Design, in
which I created an agnolotti recipe infographic.
Figure 1.1: My Previous Work, Infographic Poster from Information
Design Module
#2 Skincare Product Launch - Papua Red Fruit Plumping Cream
Besides that, I am also interested in product launches. I came across a
skincare brand called From This Island, which originated in Indonesia. I
heard that the brand uses Indonesian native plants as key ingredients in its
skincare products. I think it would be interesting to create a launch
campaign for one of their skincare products, as the brand's story is deeply
rooted in Indonesia’s rich botanical heritage.
I then consult my idea to Mr. Shamsul and told him for the first idea, I
have created all my assets since my previous Information Design modules
task is creating agnolotti recipes infographic, recipe from
Pasta Grannies.
I asked him whether I need to make new assets in Adobe Animate. Since this
project focuses on animation, I don’t want too spend my focus on
recreating assets, I want to focus learning on the animation. Mr. Shamsul
immediately agreed that there’s no need to redo them in Adobe Animate,
just use the previous Information Design assets. So then I agreed to
proceed with the first idea.
Finalized Concept: Agnolotti recipes
This website brings the story of Grandpa Andrea’s
handmade agnolotti to life, inspired by the authentic
cooking traditions shared on Pasta Grannies. Blending
storytelling with interactive design, the site guides
users through the origins, ingredients, tools, and
step-by-step process of crafting this classic Italian
pasta.
Figure 2.1: Chosen Recipe - Ravioli / Agnolotti by
Grandpa Andrea (Pasta Grannies
on Youtube)
Objectives
To educate users about the history, ingredients,
tools, and preparation process of traditional
Italian agnolotti in a clear and accessible way.
To apply animation principles and Adobe Animate
techniques in developing an informative and
visually appealing digital experience.
To preserve and promote traditional culinary
knowledge by transforming authentic recipe
content into an interactive web-based format.
Target Audience
Designed for food enthusiasts, home cooks, and
beginners aged 18–45, the website offers an engaging
experience that celebrates traditional Italian
cooking while making the recipe approachable and
enjoyable to recreate. It appeals to individuals who
enjoy exploring food culture, learning new recipes,
and experiencing interactive storytelling through
digital media.
Moodboard
Here are below some shots derived from the Youtube video
that inspired my color palette and art style. I try to
capture the Grandpa’s personality and unique dish
identity in the website as part of the narrative
structure. So I chose a color palette and art style that
match the video and Grandpa’s personality.
I asked Mr. Shamsul whether I need to create new assets in Adobe
Animate, he mentioned that since I’ve already created the assets,
so making new ones would be a waste of time. I told him can I
importing PNG files because my Illustrator files is too heavy, he
said that PNG can become pixelated when enlarged. He advised me to
check the raster effects settings (Effect -> Document Raster
Effect Settings), currently at 300 ppi, which is quite high for
screen use, and change them to 72 ppi instead. After adjusting and
re-saving, I can try importing the assets again. He also suggested
that I can import elements into different layers later in Animate.
Then I showed some references, a scrolling reference where the
content moves to the right, he said it may be difficult to
achieve unless I get additional help using AI assistance. Then I
showed the other reference example, the horizontal movement side
scrolling. He confirmed that it works fine, and suggest
including the hover interaction where the scrolling stops.
I also showed 5 content pages and he is okay with that. He
concluded that I don’t need to recreate the assets, which will
save time and allow me to focus more on the animation work
instead.
WEEK 4
I showed him the references of the animation and also show him my
unfinished work in Figma prototype. He says it's good to reuse back all
the previous assignments, you speed up your process. He mentioned to use
PNG file, make sure you use assets that is created in adobe illustrator
because you need to maintain the vector format. if photoshop can but
convert as png become flat, you cannot animate separate parts of ur
objects. I ask in Figma do we need to animate, no for the prototype
Mr.Shamsul just wanna see the UI design, u can click click, motion if you
want to create one ok acceptable, but if u already provide the sample then
should be enough.
WEEK 7
The layout is clean. Mr. Shamsul also mentioned his concern is the
spacing, please add more margin and narrow it down a bit so it doesn't
fill the entire screen. The font size is too large; the minimum font size
should be 16. I asked whether the Figma prototype needs to be functional,
and he said that a working prototype is not necessary at this stage. Only
the final version needs to be fully functional.
REFLECTION
Through the initial idea development process, I learned how to evaluate
and refine multiple concepts before finalizing a direction for my
project. Comparing different ideas helped me understand how important it
is to consider available resources when making design decisions.
I
also learned the value of building upon previous work. Reusing my
earlier Information Design project allowed me to save time while also
strengthening the concept by expanding it into a more interactive and
animated format. This helped me realize that past assignments can be a
strong foundation for new creative outcomes rather than starting from
scratch each time.
In developing the concept, I gained a
better understanding of how storytelling and design can work together.
Translating a traditional recipe into a digital experience required me
to think about how to structure information in a clear and engaging way,
especially when combining educational content with visual
storytelling.
Overall, this assignment helped me improve my
ability to justify design decisions, organize visual direction, and
develop a clearer understanding of how to research for references
support the creative process.
23/04/2026 - 14/06/2026 (Week 1 - Week 8)
Comments
Post a Comment