Advanced Interactive Design - Task 1: Thematic Interactive Website Proposal
⭐ 24/9/2024 - 15/10/2024 (Week 1 - Week 4)
🎀 Yan Zhi Xuan | 0369425
💜 Advanced Interactive Design | Bachelor of Design (Hons) in Creative Media | Taylor's University
📚 Task 1: Thematic Interactive Website Proposal
TABLE OF CONTENTS
1. Lectures
2. Instructions
4. Feedback
5. Reflection
1. LECTURES
Week 1: No class
Week 2: Adobe Animate
(Exercise 1)
In our Week 2 lesson, we
learned how to draw with
Adobe Animate. We were
trained on how to
utilize several tools,
including the form tool,
selection tool, and
paint bucket tool. After
the tutorial, Mr.
Shamsul asked us to draw
a boat for practice
purposes.
Fig. 1.1 Screenshot of Work.
(Week 2, 1/10/2024)
Week 3: Adobe Animate
(Exercise 2)
This week, we
studied the
fundamentals of
using animation with
Adobe Animate.
During class
activities, we
worked on producing
the shapes
moving and
using ease-out and
ease-in effects at
various keyframes.
At the end of class,
we had a half-hour
consultation session
with Mr. Shamsul to
go over our Project
1 possible
topic.
Week 4: Adobe Animate
(Exercise 3)
In class, we learned
how to use shape
tweening. In shape
tweening, we studied
how to draw a vector
shape at one specific
frame in the Timeline
and then change that
shape or draw another
shape at another
specific frame.
Fig. 1.2 A-D. (Week
4, 15/10/2024)
Fig.
1.3 Spider. (Week
4, 15/10/2024)
2. INSTRUCTION
Doc. 2.1 Module Information Booklet - Advanced Interactive Design.
Introduction:
Thematic Interactive Website Proposal for Brand Engagement. A thematic
interactive website is a website that focuses on a specific theme or concept
to incorporate interactive elements to interact with users. Most websites
utilize multimedia such as videos, animations, interactive graphics
displayed on the page, or other clickable elements with 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, and promotional campaigns to
product launches. For example, a thematic interactive site could be a
museum. Users can visit a virtual exhibition space through interactive
tours, game simulations, or questionnaires. If 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. Any such site aims 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:
1. A specific product of a particular brand launch/special
(i.e.: Nike brand new shoe), Beauty product launch (i.e.: Sephora compact
powder,
2. Movie promotion
3. Game release promotion
4. Gallery/Museum exhibit launch
5. Band/Artist latest release
Or anything else you have in mind (subject to the module coordinator’s
approval)
Submission:
1. Completed UI/UX proposal document.
2. All processes (concept, wireframes, mood board, flow chart)
3. TASK 1: THEMATIC INTERACTIVE WEBSITE PROPOSAL
Workflow of My Thematic Interactive Website Proposal
Project
1. Choices of Topics, Research & Visual References
2. Selected Topic - Concept
3. Moodboard
4. Wireframes
5. Flowchart
6. UI/UX Design
During week 2, I think of 5 possible topics:
Fig. 3.1 5 Possible Topics.
The following is my draft proposal:
After consulting with Mr. Shamsul, I selected the topic #2: Spider-Man: Across the Spider-Verse (Movie Promotion):
Fig. 3.3 Selected Topic.
Fig. 3.4 Concept Development.
Fig. 3.5 Moodboard.
Fig. 3.6 Visual References.
Fig. 3.7 Visual References of Website.
Typography
I selected 3 font families: Bebas Neue, Montserrat, Roboto
Fig. 3.8 Selected Font Families.
Colour Scheme
Fig. 3.9 Colour Scheme.
Wireframes
.jpg)
Fig. 3.10 Wireframes Overview.
Fig. 3.11 Wireframes.
Links to More Visual References/
Information:
4. Wikipedia
User Flowchart
The following is my final proposal:
4. FEEDBACK
Week 3
Mr. Shamsul said if my selected topic is movie promotion, if it is the new movie, then I can proceed with my proposal with wireframes, flowcharts, and UI/UX designs.
Week 4
Mr. Shamsul said we need to work on our visual design and start planning their website’s interactive design elements and features.
5. REFLECTION
Experience
I think the experience of working on a thematic interactive website design has been an engaging process that allowed a deep dive into both creative storytelling and interactive media design. This experience reinforced the importance of aligning a website’s functionality with the theme of the content—in this case, blending the rich, varied universes of the Spider-Verse with interactive features that capture the energy and dynamism of the movie.
Observation
I observe some existing interactive websites keep users engaged for longer periods. These sites often include elements such as character customization, unlockable content, and real-time interaction with media. They also have interesting elements to enhance the user’s connection to the narrative. Another key observation was that maintaining consistent visual and thematic elements is crucial. The interactive elements help immerse the user deeper into the world, providing a cohesive experience across different pages.
Findings
The project highlights the importance of effective storytelling through UI/UX, personalization, and navigation in creating immersive experiences. Thematic interactive designs, such as the Spider-Verse, communicate the variety of worlds and Spider-heroes without lengthy descriptions, enhancing user engagement. The Suit Customizer allows users to create their own version of Spider-Man, enhancing satisfaction and encouraging repeat engagement. Overall, interactivity deepens user connection to the story and website content.
Comments
Post a Comment