24.09.2024 - 15.10.2024 / week 1 - week 4

Velicia Raquel Dewi Setiawan | 0369188 | Bachelor of Design (Honours) in Creative Media

Advanced Interactive Design

JUMPLINK:

Lecture

Week 1
Week 2
Week 3
Week 4
Week 5

Instruction
Task 1 - Thematic Interactive Website Proposal

Research

Visual References
Proposal PPT

Progress

Final Proposal

Feedback
Reflection

1. LECTURE

Week 1 - F2F (24 Sep, 2024)

1. Mr said this week is free

Week 2 - F2F (1 Oct, 2024)

2. Shape Tool

This week, Mr. taught us how to use the rectangle tool both with and without object drawing. We learned how to apply it for fills and strokes, as well as how to draw within a fill.

Fig 1.1 Shape Tool Example, Week 2 (1/10/2024)

For our practical assignment, we were tasked with replicating a boat image in as much detail as possible. I utilized object drawing, the shortcut Ctrl+B, and the bucket tool to complete this.

Fig 1.2 Shape Tool Task, Week 2 (1/10/2024)

Week 3 - F2F (8 Oct, 2024)

3. Car Animation

In our second week, Mr. instructed us on creating simple animations using a car on a map. We drew the line to define the car's path, allowing us to visualize its movement. This exercise helped us understand the basics of motion in animation.

This is my attempt:

Fig 1.3 Car Animation, Week 3 (8/10/2024)

Fig 1.4 Car Animation, Week 3 (8/10/2024)

Week 4 - F2F (15 Oct, 2024)

4. Crab Animation

This week, Mr. focused on the concepts of ease in and ease out in animation. We were assigned a task to create a spider animation. However, I ended up making a crab instead, as I coincidentally chose a blue background and an orange ellipse that resembled a crab.

This is my attempt: https://veliciaexercise-bb0398.netlify.app/

Fig 1.5 Crab Animation, Week 4 (15/10/2024)

Week 5 - F2F (22 Oct, 2024)

5. Button Animation

During this week's lesson, Mr. taught us how to create a simple enter button animation using green screen techniques. He also introduced us to animating the button to respond to cursor hover. Additionally, we learned some Java coding to ensure the animation only occurs when the program opens, transforming the button into an interactive element.

This is my attempt:

Fig 1.6 Button Animation, Week 5 (22/10/2024)

Fig 1.7 Button Animation, Week 5 (22/10/2024)

2. INSTRUCTION

3. Task 1 - Typographic Systems & Type & Play

Description

Thematic Interactive Website Proposal for Brand Engagement. A thematic interactive website is a website that focuses on a specific theme or concept with the aim of incorporating interactive elements to interact with users. Most such websites utilize multimedia such as videos, animations, interactive graphics displayed on the page, or other clickable elements which have 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, promotional campaigns to product launch. For example, a thematic interactive site could be a museum. Users can go through a virtual exhibition space through interactive tours, games simulation, or questionnaires. In the event that 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. The aim of any such site is 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:

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 anything else you have in mind (subject to the module coordinator’s approval)

Submission

Completed UI/UX proposal document.
All processes (concept, wireframes, mood board, flow chart)

Have to be documented and posted in your E-portfolio as your reflective studies.

1. Research

To start, Mr. tasked us with searching for 5 topics and 10 visual references to base our thematic website on. He emphasized that we should pick something we’re passionate about, something that excites us and keeps us motivated when things get tough. After some thought, I settled on these five topics:

Sky: Children of the Light
This is an old game I played during the pandemic. Although I stopped playing because it became too grindy, it offers a rich lore and content to fill the website with.
The Wild Robot
A movie I recently watched with friends. However, I struggled to think of what to include as content.

At this point, I ran out of topics I was genuinely excited about. Shopping or brands aren’t really my thing, so I opened my music app and started scrolling through my favorite artists.

Sam Bowman
This artist consistently releases music, with my favorite songs from him being a few months old now. But I loved his recent work too, so I thought he could be a great choice.
Alive City
A band I discovered through their Christmas worship song, Hope is Here. I liked their style and energy.
Strings and Heart
This is another artist I admire. Their song Sunset Silhouette really resonates with me.

Visual References

I searched far and wide, using TheFWA.com to find inspiration. I categorized the websites by how strong they were in their design:

Music Websites (Best):

Music Websites (Okay):

Games Websites (Best):

Games Websites (Okay):

DDLC Plus

Portfolio Websites (Best):

Other Websites (Best):

Other Websites (Okay):

Proposal PPT

After gathering all these visual references, I compiled them into a PowerPoint and chose Sam Bowman as my final topic. I proposed this to Mr., telling him that Sky and Sam Bowman were my top choices. He encouraged me to choose whichever I felt had the most potential and to focus on figuring out the content and layout.

Fig 3.1 Proposal PPT, Week 3 (8/10/2024)

2. Progress

Why I Chose Sam Bowman

I chose Sam Bowman because I felt it would be easier to create content around his music. His style also had strong visual references that I wanted to explore, particularly his latest lyric video, which used a dreamy pink and cream palette. Most of his works feature simple black-and-white backgrounds, still blurry images, and clean typography, with a focus on lyrics rather than flashy graphics.

Fig 3.2 Sam Bowman, Week 3 (8/10/2024)

Visual and Design Inspiration

For this project, I aimed to base the website's visual aesthetic on Sam Bowman’s actual latest lyric video. The color palette for this particular song is a dreamy combination of pink and cream, which reflects the mood of the song.

Color Palette Mood Board:

Fig 3.3 Color Palette Mood Board, Week 4 (16/10/2024)

Color Palette:

Fig 3.4 Color Palette, Week 4 (16/10/2024)

Typically, his lyric videos use simple black-and-white backgrounds or still, blurry images paired with clean, straightforward fonts. The layout is always clear and focused on highlighting the lyrics rather than relying heavily on graphics. This visual simplicity aligns with his musical style, creating a minimalist yet immersive experience.

Structure Layout Mood Board:

Fig 3.5 Structure Layout Mood Board, Week 4 (16/10/2024)

I browsed Pinterest for further inspiration, particularly looking for layout ideas and color palettes that would complement this dreamy aesthetic.

Typography

When searching for the perfect fonts, I sought a serif font with contrasting thickness to create visual interest. After experimenting with several options, I found that Playfair works well for titles and headings, while Libre Bodoni fits seamlessly for body text. These fonts provide the elegant, clean look I wanted, and they worked perfectly within the layout I designed.

Font:

Playfair

Fig 3.6 Font, Week 4 (16/10/2024)

Libre Bodoni

Fig 3.7 Font, Week 4 (16/10/2024)

Website Structure and Content

I modeled the website layout based on this reference site, adjusting it to suit Sam Bowman's style. Here’s a breakdown of the content I planned for each page:

Fig 3.8 Reference Web, Week 4 (16/10/2024)

Home Page
This page will feature the album’s artwork with a play button leading directly to the video lyrics experience. The layout is simple, designed to draw the user’s attention to the music.
Video Lyrics
This is the main section, where the song will play with synchronized lyrics displayed in real time. The goal is to create an immersive, interactive visual experience that emphasizes the music and lyrics.
Song Credits
This section will offer a brief description of the song’s inspiration, alongside credits for the composer, lyricist, and producer.
Tracklist
A straightforward list of songs from the album, with links to either listen to the tracks or read their lyrics.
About Sam Bowman
This page will provide a concise bio of the artist, focusing on his style, influences, and musical journey, helping new listeners connect with his music.

Wireframe Design Breakdown

For the wireframe, I broke down the design into individual components:

Fig 3.9 Wireframes, Week 4 (16/10/2024)

Home Page:
The homepage includes a simple paragraph summarizing Sam Bowman's reasons for making music. The design will feature elements that fade in from slightly above and below, eventually settling into their final positions. An "Enter" button will lead to his latest song.

Fig 3.10 Homepage Wireframes, Week 4 (16/10/2024)

Lyric Video Page:
The lyric video page begins with a fade-in of the title and the artist's name. The video plays in the background, with navigational elements surrounding it. These include a menu bar at the top, credits and tracklist on the right, and an option to turn the song on or off. The bottom center of the page will display a progress bar showing the current time of the song. I’m still working on whether this is possible using JavaScript, as Mr. is going to review the coding feasibility.

Fig 3.11 Lyric Video Wireframes, Week 4 (16/10/2024)

Fig 3.12 Lyric Video Wireframes, Week 4 (16/10/2024)

Menu Bar:
The menu will drop down from the top, offering more options such as albums, popular songs, and links to streaming platforms like YouTube or Spotify. The menu will also include links to the "About the Artist" page and social media contacts. Each element will have interactive features that respond when hovered over.

Fig 3.13 Menu Video Wireframes, Week 4 (16/10/2024)

About the Artist Page:
This page will feature a simple layout that tells Sam Bowman's story, focusing on his musical journey and purpose. Given the amount of content, I aligned the text to the left to ensure it remains readable, especially compared to the credits page.

Fig 3.14 Artist Wireframes, Week 4 (16/10/2024)

Credits Page:
This page will display credits for the producer, lyricist, and composer of the specific song being played. It will also include the inspiration behind the song, as Sam Bowman often includes this in the song descriptions on YouTube. Since this page is more decorative, I centered all the elements, ensuring the key information is at the top.

Fig 3.15 Credits Wireframes, Week 4 (16/10/2024)

Tracklist Page:
The tracklist will be kept simple, appearing as a left sidebar accessible from the lyric video page. The title of the current song playing will be displayed in the top left. If clicked, the sidebar will open with the full tracklist.

Fig 3.16 Traacklist Wireframes, Week 4 (16/10/2024)

Flowchart

Fig 3.17 Flowchart, Week 4 (16/10/2024)

Homepage:
Introduction to Audio Visual Experience
Option to explore more about the artist, latest updates, or social media links
Button to enter the video lyrics page
Video Lyrics Page:
The lyrics of Sam Bowman's latest song "OH Wonder" play in the song video
A "Sound ON/OFF" button for user control
Option to explore the tracklist of other songs
Credits section for additional information on the song production
Menu button to the menu
Menu:
Links to learn more about the artist
Latest updates (album and popular song too) about Sam Bowman
Direct link to Sam's social media profiles
Tracklist Exploration:
Users can browse through and select the available songs
Songs available: from the latest to the oldest

Extra Details and Feedback

I wanted to expand the tracklist by making the song titles interactive—hovering over them would reveal a small video preview. However, this might be too complex to code, and Mr. mentioned that it could be too ambitious for this project. He also reassured me that the current tracklist layout is a commonly used format, so I should focus on adding my own unique style rather than worrying about similarity.

Fig 3.18 Tracklist Wireframes, Week 4 (16/10/2024)

Fig 3.19 Tracklist Wireframes, Week 4 (16/10/2024)

While designing the wireframe, I focused heavily on the aesthetic without considering the coding process. However, after feedback from Mr., I realized the importance of aligning design with my coding skills to avoid overcomplicating things. For now, I’m sticking to a clean, functional layout that emphasizes Sam Bowman’s music while maintaining some creative flair.

3. Final Proposal

https://docs.google.com/document/d/1KjjHOmYeJyBrYKO0DAFSs7jsKgGUhKJyC2rlqXSuIYY/edit?usp=drive_link

Fig 3.20 Tracklist Wireframes, Week 5 (22/10/2024)

4. Feedback

Week 3:

General Feedback:

Pick topics you're passionate about to stay motivated.
Use a lot of visual references to hone your design instincts.

Specific Feedback:

All the topics are good and have potential; I just need to choose one for the final proposal.

Week 4:

General Feedback:

No feedback as Mr. was unwell. Get well soon, Mr.!

Week 5:

Specific Feedback:

The layout looks good.
If I'm worried about it being too similar to my reference, I can change it with my own style.
I should also consider my coding abilities before finalizing the design to avoid overcomplicating things.

5. Reflection

1. Experience

Working on this proposal was a fun and enriching experience. My favorite part was exploring various award-winning websites, which inspired me and made me aspire to create something similar in the future. I spent hours browsing through countless sites, gaining valuable insights into how web navigation and interactive elements should flow. This exploration helped me understand the importance of creating a cohesive and user-friendly experience.

2. Observation

Creating the wireframe took a lot of thoughtful consideration, especially in deciding where to place elements to avoid clutter and ensure balance. I learned that a well-structured layout is key to making navigation intuitive, without overwhelming the user with too many pages or confusing options. Choosing the right font also took more time than expected, as I had to test several fonts to find the ones that fit the overall vibe of the project.

3. Findings

One key takeaway is that I need to consider my coding abilities before diving into the wireframe design to avoid getting overwhelmed during the development process. It’s also important not to merely copy other layouts, but to analyze them and incorporate my own style or twist. Lastly, I learned that procrastination should be avoided, as it can delay progress and affect the quality of the work.

Search This Blog

Velicia Raquel D.S (0369188)

Advanced Interactive Design - Task 1