Posted by

Advanced Interactive Design Task 1

23/9/2024-20/10/2024 Week1-Week 4

Jie Xuan/ 0356515

Application Design/ Bachelor of Creative Media/Taylor's University

Project 1: Thematic Website Proposal

TABLE OF CONTENTS

1. Lecture

2. Instruction

3. Project 1: Thematic Website Proposal

4. Feedbacks

5. Reflections

LECTURES

Week 2
This week, Mr. Shamsul introduced us to Adobe Animate. He showed us how to create a new file in the program and taught us some basic tools, like drawing shapes and breaking them apart. To help us learn, he demonstrated by drawing a beach ball, and we followed along.


Our first task was to replicate an image of a boat using Adobe Animate. 


Week 3
In Week 3, we learned more about animation using simple shapes. Mr. Shamsul taught us how to use the timeline in Adobe Animate, create keyframes, and explained the different types of keyframes. He also introduced us to techniques like "ease in" and "ease out," and how to create a "classic tween" for smooth transitions in animation.
tutorial exercise 1 week 3

tutorial exercise 2 week 3

Week 4
This week, Mr. Shamsul showed us how to create a "letter morphing" animation, where one letter changes into another using keyframes. We used the "create shape tween" function between two letters. He encouraged us to use the letter forms we had created in our advanced typography class. But I used a random font. 


Not only that, we learned how to animate a spider. As always, I created keyframes so that the spider could move from one place to another. This time, Mr. Shamsul taught us how to isolate parts of the spider (like its legs) and make additional keyframes so that the legs move continuously as the spider travels. I also added an "ease in bounce" effect to make the animation smoother and more dynamic.
tutorial exercise week 4

Below is the final result of my spider animation.



INSTRUCTION

module information

PROJECT1: THEMATIC WEBSITE PROPOSAL
In this task, we are required to come out with a Thematic Interactive Website Proposal. 
A thematic interactive website is a site that focuses on a specific theme or idea and includes interactive features to engage users. These websites often use multimedia elements like videos, animations, and interactive graphics or buttons that users can click on to explore and interact with. The goal of these interactive parts is to keep users interested while highlighting the website’s theme. Themes can range from educational and cultural topics to promotional campaigns and product launches. For example, a museum-themed website could allow users to explore a virtual exhibition space with interactive tours, games, or quizzes. If the site is based on a movie, it could simulate the movie’s world, offering virtual tours through the settings or storylines. The main purpose of these sites is to keep users engaged by allowing them to interact and explore the content in a dynamic way.

The topic:

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 any other topic subject to the module coordinator's approval
Requirements of contents:

1. Concept

2. Mood board

3. Wireframes

4. Flow Chart

A. Research & Ideation

With all the research I did, I came up with three potential options for thematic interactive websites:

Option 1: Inside Out

I explored the idea of creating a playful and nostalgic interactive website based on Inside Out. The website would feature an interactive character introduction, allowing users to click on each emotion—Joy, Sadness, Anger, Fear, and Disgust—to learn about their personalities, roles in Riley’s mind, and key moments from the movie. I focused on integrating interactive animations, character bios, and teaser clips, paired with engaging visuals that capture the movie's colorful and imaginative style. Users could also explore Riley's emotional, experiencing how each emotion shapes her thoughts and actions through flipping the emotion card. The goal was to create a space where user not only learn about the movie but also feel connected to its heartfelt themes, keeping them curious, entertained, and emotionally engaged throughout their visit.

Option 2: Vida Drink Website

Vida C Drink would be a fun and engaging way to showcase the brand’s flavors, health benefits, and products. Users could explore different flavors and their nutritional benefits through clickable product displays. A “Build Your Healthy Routine” tool could help customers create personalized wellness plans featuring Vida C. Simple animations and infographics could explain the benefits of Vitamin C, while quick quizzes could recommend the best drink based on user preferences. The website could also include an online store and a loyalty program for easy shopping and rewards. To keep users engaged, challenges and games could encourage healthy habits with discounts and prizes. This platform would not only promote the brand but also create a fun and interactive experience for customers.

Option 3: Van Gogh Art Website
Creating an interactive Van Gogh website offers an engaging way to explore the life and art of one of history's most celebrated painters. The platform could feature virtual galleries showcasing his iconic works, such as Starry Night and Sunflowers with interactive elements that allow users to zoom in on brushstrokes, uncover hidden details, and listen to expert commentary. Visitors could also navigate a timeline of Van Gogh’s life, exploring key events, personal letters, and emotional struggles that influenced his art. Additionally, the website could include immersive experiences, such as virtual reality (VR) tours of his studio or reimagined landscapes from his paintings. For educational purposes, interactive quizzes, art tutorials, and storytelling videos could make Van Gogh’s work accessible to learners of all ages. By combining technology, storytelling, and art appreciation, this website would provide a dynamic and engaging way to connect with Van Gogh's genius on a deeper level.


B. Development

After consultation from Mr. Shamsul, I decided to choose to do the website for Inside Out. It is because I like cute websites. The movie are filled with warmth, friendship, and a sense of curiosity, which I would want to make it into an interactive website. With this in mind, I decided to dive deeper into Riley's emotions world and explore ways to bring out this movie.

I also spent time find many types of sample for interactive websites. I looked into examples that use animations, videos, and playful designs to engage users. 

Concept and Theme

The visual style is inspired by the movie illustrations of Inside Out, with a energetic, calming, and friendly hues. This variety naturally draws attention and encourages users to explore the site further.

Website Structure

The website itself is divided into several sections:
Loading Page: 

Home Page: 
A welcoming message and interactive homepage. This is designed to grab users' attention right away.

Character Page: This section is a simple character introduction page. User can click left right to see different character name. 

Riley's Emotion: Here, users can click right and left to see Riley's with different emotions through an interactive page. User also can also flip the emotions card. There are different emotions sentences behind Riley's card. 

Teaser Page: The final section of the website is the teaser page, where users can browse Inside Out Teaser. The play button link user immediately to YouTube official teaser. 

Wireframe
Loading Page
Home Page
Character Page
Riley's Emotion
Teaser Page

Flowchart
After the wireframes were in place, I moved on to the flow chart. A flow chart is a diagram that shows how different pages or sections of the website are connected. It helps visualize how users will navigate the site and ensures that all the interactive elements work smoothly together.




FEEDBACKS
Mr. Shamsul suggest me not to do website that about Singer/Artist. He is Okay with Inside Out Website Idea. 

REFLECTION
Experience
During this project, I learned both the technical and conceptual aspects of website development. Beginning from scratch with Adobe Animate, I explored its tools for creating animations, which was a completely new experience for me. Each task, from replicating the boat image to animating the spider, provided a deeper understanding of how animation principles function in tutorial practice. Additionally, designing an interactive website themed around Inside Out allowed me to merge creativity with technical skills, including wireframing and flowchart creation, which were essential for organizing the user journey and site structure.

Observations
This project was recognizing the importance of balancing aesthetics with functionality in an interactive website. While creating visually compelling content is essential, it’s equally vital to ensure ease of navigation and interaction for users. Feedback from Mr. Shamsul have the value of enriching the website’s content. By adding more educational and interactive elements, I realized how I could enhance the user experience beyond simple product promotion. 

Findings
Throughout this project, I learned the significance of planning and structuring the website before diving into the design phase. Building wireframes and flowcharts helped me visualize the final product and ensured a smoother development process. I also discovered the important role of research in the creative journey. Exploring other thematic websites provided inspiration and fresh ideas for my own project. Lastly, I found that user engagement can be significantly improved with interactive features, like animations and clickable areas, which make the website more dynamic and enjoyable to explore.

Comments

Post a Comment

Popular Posts