Advanced Interactive Design - Task 1: Thematic Interactive Website Proposal
25.04.2024 - 19.05.2024 / Week 1 - Week 4
Lim Rui Ying / 0358986Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media
Task 1: Thematic Interactive Website Proposal
INSTRUCTIONS
TASK 1: Thematic Interactive Website Proposal
A thematic interactive website focuses on a specific theme or concept and
incorporates interactive elements to interact with users.
Task requirements:
1) Create a thematic interactive website proposal with one topic based on the
following:
- 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's latest release
- Or any other topic (subject to the module coordinator’s approval)
2) Incorporate interactive components such as interactive graphics and
clickable elements
3) The aim is to engage users in the medium through interactive exploration
1. Proposed Ideas
Idea #1: Collapse List (Album by Novo Amor)
|
| Fig. 1.1 Collapse List |
Objectives:
- To promote the album
- To increase album sales
- To introduce the inspiration for the album
Interactive elements:
- Engage users with interactive elements that reflect the album's aesthetics
- Allows users to play the tracks, view lyrics and music videos
Idea #2: The Lain Lain Project Exhibition
The Lain Lain Project is an exhibition that unveils narratives, dialogues,
and chronicles stemming from three transformative journeys undertaken by the
Borneo Laboratory over the past four years, culminating in a trilogical
exhibition curation.
|
| Fig. 1.2 The Lain Lain Project |
Objectives:
- To promote the exhibition and introduce its concept and content
- To provide an exhibition guide for visitors
- To provide visit information: location and visiting hours
Interactive elements:
- 360 virtual tour: users can explore the exhibition through an immersive tour, with a description provided for each section
- Use the exhibition layout plan as the directory: every section can be hovered with a description provided and is clickable, which would direct users to the 360 virtual tours of the particular section
2. Idea Development
I selected Idea #1: Collapse List for my interactive website project.
To gather inspiration, I explored several existing music websites.
Research on existing websites
Website #1: Chiara Luzzana
|
| Fig. 2.1 Screenshot of Chiara Luzzana's website landing page |
Website #2:
Paolo Fornasier
|
| Fig. 2.2 Screenshot of Paolo Fornasier's website landing page |
What amazed me most was the hover effect on each title on the landing page.
When I hovered over "MUSIC," a piano chord played and an image appeared
behind the text. Users can listen to the soundtracks the artist created on
the "MUSIC" page. The website features smooth animations and transitions, as
well as intriguing hover effects throughout. It also creatively plays with
font sizes and layouts, ensuring that the text and images are well-balanced
and aligned.
Research on scrolling animations
Besides, I did research on various scrolling animations that I plan to
incorporate into my website. Codrops is a website that offers various
animation demos and tutorials. I found a scroll animation there that is
suitable for image grids, which I plan to use on the tracklist page. In this
animation, the images are squeezed and become smaller upon scrolling.
|
| Fig. 2.3 Scroll animation for image grids (Source: Codrops) |
I also found a similar scroll animation on Gloria Wong's website. In this
version, the images fade in as users scroll down the page. Users can also
click on an image to see a larger view.
|
| Fig. 2.4 Scroll animation on Gloria Wong's website (Source: Gloria Wong) |
Based on my research on existing music websites and scroll animations, I
have identified several scroll patterns and elements commonly used, such
as large font sizes for titles, smart animations, parallax effects, and
animations on scroll. I plan to incorporate these patterns and elements
into my website to enhance the visual appeal and user experience.
Vinyl animation exploration
During week 3, I did exploration on the vinyl animation in Figma to see what
content I could include on my website.
|
| Fig. 2.5 Creating vinyl animation in Figma |
|
| Fig. 2.6 Outcome of the vinyl animation |
I reviewed the vinyl animation and found it awkward to place the vinyl
player directly on the website. Therefore, I further developed the website
content to explore how I could implement the vinyl player more seamlessly.
|
| Fig. 2.7 User flow chart |
After framing the user flow chart, I have better ideas for designing each
page of my website, regarding the layouts and interactions. I explore
different layouts for the landing page and tracklist page, as well as
possible animations to incorporate into each element.
Fig. 2.8 Landing page attempts
Fig. 2.9 Tracklist page attempts
I compiled the user flow, wireframes and animations of the website into
the slides, and explained them in the presentation video.
Final Submission
Presentation Slides
Task 1: Thematic Interactive Website Proposal - SLIDES, Week 4
(19/5/2024)
Presentation Video
Presentation Video - Task 1: Thematic Interactive Website Proposal, Week 4
(19/5/2024)
FEEDBACK
WEEK 2
Idea #1: Collapse List (Album by Novo Amor)
Consider creating and prototyping the animation of inserting the album
disc into a CD player to visualise and explore feasibility. Mr Razif
suggested exploring more interactive elements to promote the album with
enhanced user engagement and immersion.
Idea #2: The Lain Lain Project Exhibition
Utilising a 360 virtual tour to promote the exhibition is a solid and
straightforward approach, as there are such tours and tutorials available
online. I may explore more on the interactive elements that enhance the user
experience and provide a unique perspective on the exhibition.
Compare interactive elements of both ideas to determine which idea is more
interesting and has greater potential for development.
WEEK 4
Incorporate more interactive elements such as scrolling lyrics and dynamic
backgrounds like rainfall into the website. It is unnecessary to highlight
other albums on the website. Besides, consider adding a timeline when
introducing the artist.
REFLECTION
I'm intrigued by this project because it allows us to develop a thematic
website based on our personal interests. I chose to promote a recently
released album by Novo Amor, s I find his music incredibly peaceful and
calming. Initially, I was excited about diving into this project, but I
found it challenging to plan the animations and interactions for the website
to create an immersive experience. After conducting research on existing
websites and animations, I gained better insights that helped me refine my
ideas for planning and designing the website. However, I believe I can
improve better on the website layouts and implement more effective
interactions to enhance the overall experience.
Comments
Post a Comment