ADVANCED INTERACTIVE DESIGN TASK 1: THEMATIC INTERACTIVE WEBSITE PROPOSAL
25.04.2025 - 16.05.2025 / Week 1 -Week 4
step 1: make a ball
My initial choices explore a variety of engaging themes that could work well for a thematic interactive website. These include:
Emily Goh Jin Yee / 0357722 / Bachelor of Design (Honours) in Creative Media
Advanced Interactive Design / DST60804 / Section 02
Task 1: Thematic Interactive Website Proposal
TABLE OF CONTENTS
1. INSTRUCTIONS
2. EXERCISES
3. TASKS
4. FEEDBACK
5. REFLECTION
INSTRUCTIONS
CLASS EXERCISES (TUTORIAL)
WEEK 2 EXERCISE
We learned on how to use the tools and to draw on Adobe Animate. We were given an image of a sailboat and we have to trace it by using the line tool. After placing the image in Adobe Animate, we fill the background into blue and began tracing.
Fig E1.1 shapes and ball
Fig E1.2 given image and process of tracing
WEEK 3 EXERCISE
This week, we followed the instructions on creating basic animations. First layer was to create the shape animation, from a square, transforming to a triangle, a circle, then back to a square. After the first square was created, we aligned it to the center. Next, we enabled the ruler tool, grid lines should be pulled to the edge of the square from the ruler. We learned on adding a blank keyframe in a later frame(f5=fn+f5)(f7=fn+f7), and creating shape tween between the transformation(choose a frame between the two keyframes), additionally was to select 'ease out' in the properties panel. After completing the shape animation, we were tasked to create a 10seconds countdown animation. By adding the first number was '10' which consists of two digits. Therefore, we have to select 'break apart' twice (only break once when there's one digit), then create keyframes and repeat the steps, similar to the 1st layer.
Fig E2.1 process of countdown animation
WEEK 5 EXERCISE
This week was an online tutorial class, we were taught on creating basic animations like making an object move from a point to another. The first exercise was to create a ball that can bounce, making a car move by the road, and masking the tv.
step 1: make a ball
step 2: convert ball into graphic
step 3: add new layer(guided layer)
step 4: use pencil tool to draw lines(bounce)
step 3: add new layer(guided layer)
step 4: use pencil tool to draw lines(bounce)
step 5: connect object to the starting and ending point in the line (on first keyframe and last keyframe)
step 6: create classic tween: classic ease
step 6: create classic tween: classic ease
similar to the ball exercise, we draw a car out and the lines over the road and on the other layer(guided layer). connect the object to start and end point.
WEEK 6 EXERCISE
This week, we continued on last week's exercise of the TV (line animations) and masked it by adding a rectangle on the first keyframe and enlarge it on the last keyframe, then create shape tween on this layer. after that, the layers were automatically locked and the masking animation is created.
Next, we had to do another masking exercise on text. Instead of masking the shape layer, we had to create classic tween on the text layer. Before that, we move the text out the box where we want it to appear from.
As for the last exercise, we have to follow the example of the timeline. We were taught on creating buttons, labelling the action layer then add actions.
WEEK 9 EXERCISE
This week, we learned how to navigate between pages using sliding animations triggered by button clicks. Then, we were given a task to create a new project using similar steps. However, instead of navigating to different pages, we used a single image (found from Wallpaper Flare). With this image, we created buttons that directed us to different parts of the image by adjusting the x value in the actions code.
TASKS
TASK 1: THEMATIC INTERACTIVE WEBSITE PROPOSAL
We have to create a thematic interactive website proposal based on a topic of our choice. It can be for a product launch (e.g. Nike shoes, Sephora makeup), a movie or game promotion, a gallery/museum exhibit, a band or artist’s latest release, or any approved theme.
The site must be interactive and engaging, using elements like animations, videos, clickable features, or games. The goal is to keep users interested through dynamic exploration of the theme. We have to submit a completed UI/UX proposal document, along with our process work, including concept, wireframes, mood board, and flow chart.
My initial choices explore a variety of engaging themes that could work well for a thematic interactive website. These include:
Product & Lifestyle-Themed Concepts:
Focusing on items that reflect a particular lifestyle or aesthetic, such as wellness products, tech gadgets, or limited-edition fashion pieces. This theme allows for storytelling around how the product fits into a user's daily life.
Music Album Promotion:
Centered around a newly released album by a band or artist. This could include immersive experiences like interactive listening rooms, behind-the-scenes visuals, or fan engagement features.
Sneaker & Collaboration-Themed Ideas:
Highlighting exclusive sneaker drops or brand collaborations. This theme often appeals to niche audiences and could incorporate elements like virtual unboxing, limited-edition showcases, or countdowns to product drops.
These themes were chosen for their potential to engage users through rich storytelling and interactive exploration.
Initial Choices
3 album ideas
After receiving feedback in the first week, I decided to narrow my focus to music album concepts, as they align closely with my personal interests. I began exploring albums from artists I listen to frequently, selecting those with strong visual identities or emotional themes that I find both meaningful and aesthetically appealing. This direction allows me to create a more immersive and expressive experience that reflects the tone and message of the music.
Album Ideas
Lastly, after spending several days carefully considering and comparing different albums, I’ve decided to focus on LANY’s a beautiful blur. This album stood out to me not only because of my connection to the band’s music, but also due to its emotionally rich themes and dreamy, nostalgic aesthetic. I believe the visual style and lyrical content of a beautiful blur provide a strong foundation for an interactive experience that can be both heartfelt and engaging.
LANY's a beautiful blur album proposal in docs
FEEDBACK
WEEK 1
General Feedback
- propose 3 topic ideas in teams chat
Specific Feedback
- niko neko idea is interesting
- keep minimalist like the brand
- have to think of more ideas if going for perfume idea
- choose your preferred topic
WEEK 2
Specific Feedback
Fig F1.1 feedback
WEEK 3
General Feedback
- need at least 5 pages
- find inspirations from https://thefwa.com/cases/bruno-simon-portfolio
Specific Feedback
- don't refer to SZA's official website though the concept is strong for her style but the UI and design is terrible
WEEK 4
no class
REFLECTION
Experience
Reflecting on my progress so far, this project has given me the chance to explore different creative directions and really think about what themes resonate with me personally. At first, I explored a range of ideas—from lifestyle products to sneaker collaborations and music albums. But after getting some helpful feedback and taking time to reflect, I found myself naturally gravitating toward music-based concepts. Album-themed websites felt more emotionally connected and creatively exciting for me. I ended up choosing LANY’s a beautiful blur because of its beautiful visuals, nostalgic atmosphere, and heartfelt lyrics. It felt like the perfect fit for an interactive experience that blends storytelling, emotion, and design. This whole process has taught me how important it is to pick something you truly care about—it makes the work feel more meaningful. I’m looking forward to the next stage of this project… and I really hope my laptop cooperates this time!
QUICK LINKS
Comments
Post a Comment