Advanced Interactive Design - Task1

-

9.23.2025 - 15.10.2025 (Week 1 - Week 4)

Lin chenyi/ 0367008

Graphic design/Bachelor of Design in Creative Media

Advanced Interactive Design  -  Task 1

INSTRUCTIONS 


LECTURE

WEEK 1

This week, Mr. Shamsul first gave us an overview of the semester and explained the tasks we would be completing over the next 14 weeks. To help us get a feel for the project, he also showed us some excellent website projects on fwa.awards.com, which was truly inspiring. This week's assignment was to install Adobe Animate and then begin developing three proposal ideas for Task 1.


WEEK 3 —— 学习 Adobe Animate 基础

This week, Mr. Shamsul introduced us to the basics of Adobe Animate and familiarized us with the toolbar.

Many features are similar to those in Illustrator and Photoshop, such as the selection tools, shape tools, and color fill tools, making them easier to understand.


In class, we learned how to draw a beach ball.

The tools used included the Oval Tool, the Line Tool, and the Paint Bucket Tool.

During the drawing process, Mr. Shamsul also taught us some useful shortcuts to improve efficiency:

  • Command + A → Select all objects
  • Command + B → Break apart selected symbols or text
  • V → Use the Selection tool to transform a straight line into a curve
  • Command + D → Duplicate and repeat the last transformation
  • Command + Shift + S → Save as a new file

Spacebar → Temporarily switches to the Hand tool for easier canvas movement

When adding a shadow to the beach ball, we learned a simple but effective technique:


First, draw the straight line and then bend it. Cut and separate the area to be shaded, and then adjust the color contrast to create a natural shading effect. This not only adds depth to the shape but also makes the work appear more vivid and three-dimensional.

In the second half of the class, we'll continue our illustration practice, drawing and coloring the sailboat.


WEEK 4

This week, Mr. Shamsul taught us how to animate our drawings. We began with the most basic movements, learning how to break a static image into different stages of movement, and then gradually developing a coherent animation.

In class, we first tried using a simple line to simulate the sensation of bouncing up and down, like being stretched and then rebounding. This helped me better understand the concepts of "motion rhythm" and "easing."


Next, we practiced animating a bouncing ball. By adjusting the ball's speed, the time interval, and the degree of "squash and stretch,"




Task 1

WEEK 2

I began thinking about interactive website themes and actively searched for inspiration. Ultimately, I settled on three distinct ideas: an interactive website for artist albums or personal albums, an interactive website for Kodak film, and an interactive website for Western restaurants.

During the conception process, I referenced some of my favorite websites and collected relevant images and resources to support my proposals.

For the Western restaurant theme, I wanted the website to convey the story behind the restaurant and the provenance of its ingredients, highlighting the brand's culture and values.

The film interactive website aimed to educate more people about the charm of film photography, promoting both knowledge and sharing.

For the album interactive website, I hoped to showcase the creative stories of the artist and their album, strengthening the user's emotional connection with the music while also promoting and promoting album sales.


Creative Development

I chose the album interactive website as my interactive website project. For inspiration, I researched several existing music websites.

Research on Existing Websites

Website#1： https://www.paolofornasier.com/

Upon entering the website, the user is greeted by a "Click to enter" welcome screen and prompted to "Sound on for the best experience," giving the visitor a sense of "entering an art space and initiating an experience." The website emphasizes sound and the musical experience, prompting users to turn on the sound for the best experience.

  • Hover-triggered sound effects: When you hover your mouse over a title or text, a piano chord or other sound effect plays.

  • When you hover your mouse over a title or text, a related image appears behind the text/title as a visual supplement.


Website#2： https://www.apparelmusic.com/

Entering the page creates a sense of ritual, and the overall visual atmosphere is strong, giving the impression of entering a "music/art space."On the homepage/scroll area, you can see numerous works/cover images displayed in a grid/overlapping format.

  • Hovering triggers mouse effects. While I didn't catch all the sound effects, the images/thumbnail covers have subtle animations (fading in/enlarging/switching) when the mouse hovers over them.

  • The dynamic transitions are smooth.

Website#3： https://www.paolofornasier.com/

The overall page style is modern, simple, and atmospheric, emphasizing visual impact and typographic rhythm.

The page features scrolling animations, image/background transitions, a portfolio area, and navigation anchors (Selected Work, Info, Skills, Contact, and Project).

  • Full-screen immersive visual layout (large photos + dynamic text)
  • Scroll-triggered animations (fading images, floating titles, color blocks)
  • A rhythmic blend of audio and video (useful for song presentations)
WEEK 3

Visual design style

The website will adopt a simple and modern design with soft blue, beige and retro film texture as the main colors, echoing the visual style and nostalgic atmosphere of the album.

Moodboard：


Target Audience Analysis

1. Rosé's Fans and BLACKPINK Supporters

This audience has a deep emotional connection with Rosé and seeks to delve deeper into her personal growth, creative philosophy, and the stories behind her albums.

The website should reinforce her personal image and artistic charm through visual storytelling and emotional design, allowing fans to experience a sense of "entering her inner world" while browsing.


2. Listeners of Pop and Indie Music

This group has high expectations for the visual presentation and interactive experience of music, and they tend to understand music through a multi-sensory approach.

The website can combine music with visual animation to create an immersive listening experience, emphasizing the integration of sound, image, and emotion to enhance the artistic appeal.


3. Young Digital Natives (18-30 years old)

They are accustomed to consuming content online and seek personalized, interactive, and immersive experiences. The website should focus on interactive design and a smooth experience, such as scrolling storytelling, dynamic effects, and personalized interfaces, to suit their usage habits and aesthetic trends.

User Flow



Wireframe / Prototype Development

After completing the user flow, I quickly began working on the wireframes. Following my previous process plan, I began with the loading page and gradually designed the main page structure and interaction paths.

I followed the logical order of the flow chart, designing each interface step by step: from the homepage's entry animation and loading effects, to the main menu's functional options, and then to the subsequent content display and tips & tricks page.

Figma link：https://www.figma.com/design/1eaDLz7bodnHk5BdiYBb3k/%E4%B8%93%E8%BE%91?node-id=0-1&m=dev&t=U9UueUa0BQYBccRV-1

 WEEK 4
After the teacher’s feedback, I corrected my framework in time.
I first standardized the font size and style, creating a clear hierarchy between titles, subtitles, and body copy, eliminating the ambiguity of font size. I also focused on shape and composition, rather than jumping right into the final visual stage. This allowed me to focus more on the relationships between components, such as the proportions of image and text, the balance of white space, and the rhythm of the page.

In referring to Chanel's official website, I learned that it uses clean lines, a regular grid system, and clear white space. I incorporated similar linear elements into my design to guide the visual flow, divide the content, and create a more organized layout.






Final Deliverable Task 1: Themed Interactive Website Proposal


FEEDBACK

WEEK 2

Mr. Shamsul suggested that creating an interactive website for a single album would be more appropriate than covering multiple albums, because if the scope is too broad, the theme will become vague and lack a clear focus.

WEEK 4

This week, I received feedback from Mr. Shamsul, who hopes I can achieve greater consistency in my design. He mentioned that my text size is somewhat inconsistent, and the proportions of some headings and content vary significantly, creating a lack of overall coordination. Therefore, I will need to standardize the font size and style in my upcoming revisions to make the page look more organized and clean. My teacher also advised me not to rush into finalization, but to focus on the shapes and typographic structure first to create a more balanced and rhythmic overall layout. He encouraged me to prioritize lines, blocks, and content placement before considering color or details. In addition, my teacher suggested I look at the layout of Chanel's official website. Their website features numerous delicate lines, clean typography, and white space, all of which can help me create a more organized design. I plan to incorporate similar line structures in future versions to enhance the page hierarchy and visual consistency.


REFLECTION

Experience
Through this project, I explored how to design an interactive website that combines music, visuals, and emotion. I also began learning to use Adobe Animate and familiarized myself with its toolbar and basic operations, such as drawing shapes, creating shadows, and using keyboard shortcuts. Through practice, I gradually mastered the fundamental principles of animation and timeline control, which will be very helpful in my future interactive design work.

Observations
I observed that successful interactive websites often create a strong emotional atmosphere through smooth transitions, sound effects, and simple layouts. I also discovered that color, fonts, and animation play an important role in expressing the artist's personality and the musical atmosphere.

Findings
Through this learning experience, I deepened my understanding of UI/UX design and interactive storytelling. I realized that design is not just about static presentation but also about the flow of emotion and rhythm.






评论

发表评论

此博客中的热门博文