Adv. Interactive Design - Task 1: Thematic Interactive Website Proposal
25 Apr 2024 - 19 May 2024 (Week 1 - Week 4)
I used Figma to create wireframes and tried out various layouts for each
page. The aim was to showcase the website with simplicity and clean
design, fully capturing the visual concept of the album and its songs.
Mr. Razif gave us more freedom to decide on the theme/topic for our
website. While this made me nervous because we used to have one-on-one
consultations with our lecturer to decide on one idea before further
development, it also inspired me to see it as a challenge to train my
intuition as a student designer and become more independent, rather than
constantly seeking reassurance from my lecturers.
Feeling reassured after consulting with Mr. Razif and receiving
feedback on my idea proposal, I am still grappling with uncertainties
regarding the amount of content to integrate—what's considered
sufficient?—and what's deemed suitable in terms of content,
responsiveness, and interaction elements. Additionally, I'm struggling
to decide on the art style for the entire webpage. It's imperative for
me to ensure that my idea transcends mere conceptualisation; it should
be brought to life in a manner that aligns with my skills and vision
for the project.
Looking back on recent experiences, I faced a lot of pressure and had
to redo my planning from scratch. Despite the struggles, I managed to
come up with a proposal that met my expectations.
While researching, I found some interesting trends like cursor-following, bold typography, and shape morphing for transitions. These helped me a lot when designing wireframes in Figma, where I had to experiment with typography and layout.
I also thought about adding sound effects for the loading screen, which I think will make the website more dynamic and fun to use. Since time is limited for this semester's tasks, especially with animating the website using Adobe Animate, I knew it was important to plan ahead and tackle challenges early on. One thing I needed advice on was whether to make the website one long page or split it into multiple pages. This decision could affect how well scrolling animations work and how engaging the website is for users.
In the end, these experiences taught me the importance of being flexible, staying resilient, and planning ahead when working on big projects. Even when things get tough, I'm committed to pushing myself and striving for the best results.
25 Apr 2024 - 19 May 2024 (Week 1 - Week 4)Vincent Lee // 0359386
Adv. Interactive Design // Bachelor of Design (Hons) in Creative Media //
Taylor's University
Task 1: Thematic Interactive Website Proposal
INDEX
- Ideas
- Research and Idea Development
- Task 1 Submission and Video Presentation
Instructions
<iframe
src="https://drive.google.com/file/d/1HLrXQ1grWUtRYq1IxHjxZjJWyqRd1SjM/preview"
width="640" height="480" allow="autoplay"></iframe>
Task 1: Thematic Interactive Website Proposal
Create a proposal for a thematic interactive website focusing on engaging users
with a specific theme or concept. Thematic interactive websites utilize
multimedia elements like videos, animations, and interactive graphics to
captivate users, offering dynamic experiences. Themes can range from product
launches to cultural exhibits or movie promotions.
Task Requirements:
- Choose a topic for your thematic interactive website proposal. [Options included in MIB].
- Develop a proposal outlining the thematic concept, interactive elements, and engagement strategies for your chosen topic.
- Ensure your proposal includes clear objectives, target audience analysis, and a description of how the interactive features will enhance user engagement.
- Submit your proposal for review and approval by the module coordinator before proceeding with the development of the thematic interactive website.
Week 1 | Ideas
The top three products that popped into my mind were:
- Album.
- Maggi Cup.
- Jenga
Figure 1.1 - Website Theme Ideas, Week 1 (25 Apr 2024)
Week 2 - Week 4 | Research and Idea Development
In this section, I conducted research and underwent an ideation process,
as depicted in Figure 1.2, to strengthen the concept of what I refer to
as an interactive and responsive website. Subsequently, I refined my
ideas further, as illustrated in Figure 1.3. Additionally, I visualised
the concepts through sketches and layout attempts, showcased in Figure
1.4.
Figure 1.2 - Content and Animation Ideation, Week 3 (09 May 2024)
The following slides contain the following information.
- Exploration/ Research [on existing websites]
- Art Direction.
- Information Architecture
- Sketches [as attached below the slides]
Figure 1.3 - In-Depth Research & Idea Development
[Latest Update: 03 June 2024]
Browsing through various websites and drawing inspiration from them has
enabled me to gather ideas about the available options and the types of
animations, including screen transitions, suitable for my theme.
However, there is still much brainstorming needed regarding the overall
integrity of the website theme and its message. To overcome the chaos of
ideas in my head and clarify my thoughts, I've included several sketches
of each category for the websites below.
Figure 1.4 - Conceptual Sketches and Storyboarding
[Latest Update: 03 June 2024]
Week 5 | Adv. Interactive Design_Task 1 Submission: Thematic
Interactive Website Proposal
This week, I enhanced my thematic website by adding more details,
including graphic elements, and defining the art direction.
Additionally, I incorporated wireframes, drawing inspiration from
designs on Pinterest, to create a standardised visualisation. This
ensured coherence between each page and helped identify potential
conflicts with certain graphics.
The following slides contain the following information:
- Introduction
- Information Architecture
- Wireframes & Storyboarding
- Art Direction and Moodboard
Figure 1.5 - Task 1: Thematic Interactive Website Proposal
[Latest Update: 03 June 2024]
Link to Figma: Wireframe
Figure 1.6 - Wireframes
[Latest Update: 03 June 2024]
Video 1.1 - Task 1 Video Presentation
[Latest Update: 04 June 2024]
Feedback
Week 2 | Content Integration and Art Direction
Instead of just using flat images, Mr. Razif recommend adding depth
(shadow??) and perspective to our designs. Focus on making them
interactive, immersive, and responsive while not including too many
context and keeping the layout simple. Use cutout images of the artist
and animate them with different transition and animation ideas. This
way, users can scroll through and see elements appear one by one,
synced with the music and message. While the artist's introduction/
prologue might be interesting at first (except include a
SKIP feature), it could become less interesting after the first
visit.
Interactions:
Click, Scroll, Customise, Click and Hold,
etc.
Week 3 | Art Direction & Development
The animation would be the most significant aspect for me, as the art
style of the loading screen (asteroid) and home page idea 1 -
Graphics/Collage art style is different. Hence, if ultimately I have
chosen the collage art style, then I would need to ensure smooth
transitions between screens and how the animations will be implemented
on the home page.
Reflection
Week 1
Week 2
It was harder for both the thinking process and actual production as
I couldn't figure out any other interactions and animations for
screens other than the intro and loading screens. In addition to
these challenges, I found designing the UI required massive
creativity, as the artist Rosé is very creative and a
perfectionist in her own way, especially in conveying her message
through her voice, lyrics, and music video.
Week 3
Week 4 - Week 7
While researching, I found some interesting trends like cursor-following, bold typography, and shape morphing for transitions. These helped me a lot when designing wireframes in Figma, where I had to experiment with typography and layout.
I also thought about adding sound effects for the loading screen, which I think will make the website more dynamic and fun to use. Since time is limited for this semester's tasks, especially with animating the website using Adobe Animate, I knew it was important to plan ahead and tackle challenges early on. One thing I needed advice on was whether to make the website one long page or split it into multiple pages. This decision could affect how well scrolling animations work and how engaging the website is for users.
In the end, these experiences taught me the importance of being flexible, staying resilient, and planning ahead when working on big projects. Even when things get tough, I'm committed to pushing myself and striving for the best results.
Resources: Font Pairing
Quick Links
