Advanced Interactive Design - Task 1: Thematic Interactive Website Proposal

on

24/09/2024 - 15/10/2024 / Week 1 - Week 4
Joey Lok Wai San / 0350857
Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media 
Task 1: Thematic Interactive Website Proposal


TABLE OF CONTENTS


LECTURES

All lectures and exercises completed in Advanced Interactive Design - Lectures & Exercises


INSTRUCTIONS

https://drive.google.com/file/d/1jb7SAHLergayyQzswyaGmOKr6Rq0Kefj/preview


TASK 1: Thematic Interactive Website Proposal

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, and promotional campaigns to product launches. 

For example, a thematic interactive site could be a museum. Users can go through a virtual exhibition space through interactive tours, game simulations, 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:
  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
  6. Anything else you have in mind (subject to the module coordinator’s approval)

Proposal Ideas 
We were tasked to come up with 5 ideas that we would like to develop for our final project, as well as include visual references and website references. I chose 'Percy Jackson', 'The Empire' from 'Star Wars', 'Jedi: Fallen Order' (game), 'Barbie', 'Sabrina Carpenter' and 'Taylor Swift' as my themes. 

Fig. 1.1 All Proposal Ideas, Week 2 (05/10/2024)
 
Among these six themes and ideas, I preferred 'Percy Jackson' and 'Star Wars: Empire' because they would be more interesting to develop a website for. There is a lot of information and content to develop for these two ideas as well as having a whole franchise behind them. The other ideas I had also had lots of content, but I did not focus on them as much and they did not really interest me as much as the first two did. 

Here are all my proposal ideas combined in a Figma file:

Proposal Ideas Figma Link: 
https://www.figma.com/design/wzMaXRl9jN0cmvYxsjsP3z/Adv-Interactive---Proposal-Odeas?node-id=0-1&t=RvIZpRVIedYNKqZH-1 

Fig. 1.2 Proposal Ideas, Week 2 (05/10/2024)

After showing my ideas to Mr. Shamsul for feedback, he suggested that I go with the Star Wars idea since it would be simpler to develop. He also asked me to narrow done my ideas since The Empire is a large topic. I can focus on a character (e.g. Darth Maul - since he is not as popular as Darth Vader), the Empire ships (e.g. Star Destroyer), etc.

Fig. 1.3 Chosen Idea, Week 2 (05/10/2024)


Finalized Concept
Darth Maul - "The Rise, Fall, and Legacy of a Sith Assassin”
This website is a deep dive into the life and legacy of Darth Maul. It covers his transformation from a Sith apprentice to a vengeful outcast, explores his relationships with key allies and enemies, and highlights his weaponry and combat skills. 

Fig. 2.1 Darth Maul, Week 3 (11/10/2024)

I also did some research on the story of Darth Maul as I am not the most familiar with his story. I watched a few YouTube videos as well as read through his biography and other pages about him. The story of Darth Maul is quite a long one but definetely one of the more interesting stories in the Star Wars universe. 

Fig. 2.2 Research on Darth Maul, Week 3 (11/10/2024)


Visual Design Style
For the overall visual design style, I went with a dark, authoritative aesthetic with sharp edges (based on Darth Maul’s horns). This reflects Darth Maul's aesthetic and overall story, which is very dark and horrific. 

Moodboard
I improved upon my initial moodboard for my proposal ideas. This time I made it more related to Darth Maul and the Empire's siths (kinda).

Fig. 3.1 Moodboard, Week 3 (12/10/2024)

Color Palette 
The color palette is similar to the one chosen in the proposal idea, consisting of black, grey/ silver, white and red. This mirrors Darth Maul's look and dark nature, as he is commonly only seen in these colours. Furthermore, the contrast with red and black would make the website stand out especially when using red as the accent colour.

Fig. 3.2 Color Palette, Week 3 (12/10/2024)

Typography
For the fonts, I chose to go with sharp, modern fonts with a subtle glow effect for headers. The sharp fonts match Darth Maul’s horns and the glow effect is to stand out and is inspired by lightsaber’s glow. The body text is sans-serif for easy readability.

I went through a bunch of different options for fonts that I could find online, especially for the header and subheader. These are the ones that I like and chose for my design.


Fig. 3.3 Typography, Week 3 (12/10/2024)

After the feedback given by Mr. Shamsul on Week 4, I changed my header font to something more bold and easily readable. I went with 'Impact' as other bold blocky fonts were too wide and takes up a lot of space.

Fig. 3.4 Finalized Typography, Week 4 (15/10/2024)

Illustration Style
I wanted to keep the illustration simple as possible because of (1) time constraints and (2) a flat-style illustration keeps the design clutter-free and makes use of clean, bright shapes. Darth Maul only has 3 main colors, making it easy to do a silhouette of him in flat illustration.

Fig. 3.4 Illustration Style, Week 3 (12/10/2024)


Visual References 
The visual references I had for this website is more or less the same as what I had for in my initial proposal idea. The theme is mostly Star Wars related as well as consisting of an overall dark aesthetic to reflect the dark side, the Empire. I found most of these on Pinterest and the visual design of this inspire my ideas.

Fig. 4.1 Visual References, Week 3 (11/10/2024)


Fig. 4.2 Main Visual References Close-Up, Week 3 (11/10/2024)


Research on Existing Websites
Website #1: Balans Studio

Fig. 5.1 Screenshot of Balans Studio's Website - Landing Page, Week 3 (13/10/2024)

Balans Studio is a creative agency focusing on fashion and advertisement. It offers art direction, photography, film production, and visual concepts tailored to brands. The website features bold designs with smooth, immersive animations and transitions between sections and elements. It features dynamic layouts with various scrolling patterns such as horizontal, vertical, parallax and image scrolling. The aesthetic is minimal but artistic, reflecting on showcasing their works of fashion and advertisement. The typography is clean and emphasizes key messages by highlighting particular words in red to stand out.


Fig. 5.2 Parallax Scroll to Display Content, Week 3 (13/10/2024)

Website #2: Chrono Threads

Fig. 5.3 Screenshot of Chrono Thread's Website - Landing Page, Week 3 (13/10/2024)

Chrono Threads is an experimental fashion project blending timeless design with futuristic aesthetics. Upon entering the website, there is a hologram figure where you can click a button to view details. The music matches the theme of the website and is able to toggle on and off on the top-right corner button. The website features smooth animations, interactive 3D models, and scrolling effects, which all create an immersive experience. While scrolling through the website, text is revealed in a type-writer motion. It highlights innovative materials like holographic and metallic leather, allowing users to customize a clothing item.


Fig. 5.4 Music Toggle "On-Off" & Text Reveal, Week 3 (13/10/2024)

Website #3: Zentry

Fig. 5.5 Screenshot of Zentry's Website - Landing Page, Week 3 (13/10/2024)

Zentry redefines gaming and enables players to connect across different digital and physical games. The website features smooth, futuristic design elements and showcases projects to enhance gameplay. The website has smooth transitions between sections e.g. scrolling through the website, the image zooms in and becomes the background of a new page. There are lots of multimedia content especially videos that keeps the website dynamic. 


Fig. 5.6 Image Becomes Entire Screen & Hover Plays Content, Week 3 (13/10/2024)


Research on Animations
I did research on other animations that I was interested in incorporating into my website or using as inspiration. Gloria Wong's website has images placed in a grid, and when scrolled down, the image comes into view. The images can also be clicked to be seen in a larger view and are displayed in a slideshow.

 
Fig. 5.7 Scroll animation & click to view in a slideshow, Week 3 (13/10/2024)

I also found a scroll feature on the website Cosmos Studio. Upon scrolling, the content comes to the foreground and becomes larger in size and less blurry. When hovered over, the content becomes clear and information appears, even if the content is further in the background.

Fig. 5.8 Scrolling brings content to the foreground, Week 3 (13/10/2024)


Flow Chart
For the flow chart, I did a few variations in MIRO by specifically following the content I would like to include on my website. I started by making a very rough sketch on paper of how the structure of the flow chart would look like so I would have some reference to begin with.

Fig. 6.1 Flow Chart Sketches, Week 3 (13/10/2024)

Flow Chart MIRO Link: https://miro.com/app/board/uXjVLT5_q4c=/?share_link_id=784556733790

Fig. 6.2 User Flow Chart in MIRO, Week 3 (13/10/2024)

I don't really know what possessed me to make four separate user flow charts, but it was probably because I wanted to find the content I felt was most important to incorporate. The first attempt was made before I went into a deep dive into Darth Maul's story, so the pages were a bit generic.


Fig. 6.3 User Flow Chart Attempt #1, Week 3 (13/10/2024)

For the second attempt, I sort of got the gist of what I wanted to portray on my website. His story isn't just about the usual: start, battles, end. Darth Maul's story had a lot of betrayal and revenge, and how he survived throughout everything and it is really interesting. I tried to capture that a bit more in my second attempt.


Fig. 6.4 User Flow Chart Attempt #2, Week 3 (13/10/2024)

I polished up my user flow chart a bit more from the second attempt to get my final flow chart. I realized it was a bit too complex with a few too may elements, so I decided to cut down a few parts and make it more manageable to develop and design in a few weeks.


Fig. 6.5 Final User Flow Chart, Week 3 (13/10/2024)


Fig. 6.6 Final User Flow Chart (Simplified), Week 3 (13/10/2024)


Wireframes
To get begin on the wireframes, I followed the flow chart and its pages so it was much easier to imagine the website page by page. I started by doing some sketches on ibisPaint, which gave me a rough idea of the layout design before developing them in Figma. 

*All the wireframes are explained in the presentation slides

 
Fig. 7.1 Wireframe Sketches, Week 3 (13/10/2024)

Wireframes Figma Link: https://www.figma.com/design/5EPOmVuNoYh0WsQrybtHiJ/Adv-Interactive---Proposal-Wireframes?node-id=0-1&t=4ykZj6N2sqOdqT5E-1


Fig 7.2 Wireframes in Figma, Week 3 (13/10/2024)

I sectioned all the frames I made in Figma into sections so it was more organized. All the explanations of each wireframe and its animations can be found in the slides below. Basically the gist of it is, I made various layout designs for each page so I could develop the best layout overall.

Fig. 7.3 All Wireframes, Week 3 (13/10/2024)


Fig. 7.4 Final Chosen Wireframes, Week 4 (14/10/2024)


Final Task 1: Thematic Interactive Website Proposal


Fig. 8.1 Final Thematic Interactive Website Proposal, Week 4 (14/10/2024)
Advanced Interactive - Task 1 Proposal by Joey

FEEDBACK
WEEK 3
The ideas are good. Since you already focused on Percy Jackson and Star Wars, you should continue with those ideas. The topic should be narrowed down a bit more and be more specific since the franchise is huge, either focusing on a character, an object, etc. For Star Wars, perhaps you could do about Darth Maul since not many people know about his story, they know more about Darth Vader, the Sith, etc. You can also do something about the battleships or maybe the lightsabers. 

WEEK 4
It looks okay. Change the header font to a bold, clear font like the reference website. It's fine if the layout is similar because then users are more familiar with it.

REFLECTION

Experience
My experience with the first task is good. Making proposals and creating ideas for a website is pretty familiar to me since we've done this before in Interactive Design. There's nothing much that stands out from the rest of the assignments. The only difference is that this is a thematic website so there will be a much more engaging way for users to interact with the website and I'm quite excited to develop it, even though I'm still unfamiliar with Adobe Animate.

Observations
I observed that we shouldn't be too ambitious with what we want to achieve with our website. We only have a few weeks to develop the content of the website on top of learning a new application. I had to cut out quite a few things of what I wanted to add to my page which is kind of sad but would definitely save my sanity at the end of the semester. 

Findings
From my research on thematic websites, I found that most of it has a lot of complex animations, especially in terms of transitions from sections and scrolling. Everything from the text to the image is animated so there is no boring moment when you're browsing the website. I also found that websites make use of different types of scrolling throughout the website, such as vertical, horizontal, parallax, etc. It adds more variety to the page.

Comments

Post a Comment