Advanced Interactive Design / Task 2

29.5.2024 - 23.6.2024 (Week 5 - Week 9)

Loke Yan Ling / 0344602 

Advanced Interactive Design / Bachelor of Design in Creative Media

Task 2 - Interaction Design Planning and Prototype

---

Instructions

---

Task 2: Interaction Design Planning and Prototype

Adobe Photoshop

Fig 1.1 Researching

Fig 1.2 Masking

Following the consultation with Mr. Shamsul, it was determined that character images should be isolated without backgrounds. To source suitable images for the prototype, I conducted a comprehensive search on Pinterest and Google. Once selected, I refined these images in Adobe Photoshop. The finalization process involved precise masking and color adjustments to ensure visual consistency across all characters.

Prototype in Figma

Fig 1.1 Logo

Fig 1.2 Landing Page

Inspired by the letter ‘H’ from The Hunger Game, I embarked on an iterative design process to develop a distinctive logo. Through experimentation, I arrived at a tilted H with varying line lengths. This design was chosen to visually represent the concept of stability and defiance which aligns with the overarching themes of hope and rebellion for the thematic website.

The typeface has been uniform into sanserif typeface and mockingjay pin at the centre to signify the rebellion of hope.

Fig 1.3 Character wireframe to prototype

Fig 1.4 Character Carousel

The character carousel and detail pages feature images with removed backgrounds. Initially, I used a poster of Katniss Everdeen from The Hunger Games where she faced right. While this image was visually appealing, it became apparent that a consistent character orientation would enhance user experience and visual harmony. By standardizing the character facing direction across all profiles, the overall aesthetic is improved, and users can more easily compare and differentiate between characters.

Fig 1.5 Event Place wireframe to prototype

Fig 1.6 Event Place carousel

The Event Place carousel showcases representative images directly from the movie. To visually indicate the user's selection, a brightness effect is applied to the chosen image. When a particular event place is selected, its image becomes brighter, while the remaining options are dimmed. This visual cue mirrors the selection mechanism employed in the character carousel, providing a consistent and intuitive user experience.

Fig 1.7 Contact Us wireframe to prototype 1

Fig 1.8 Contact Us wireframe to prototype 2

The contact us page features an updated book cover using the Hunger Games poster as its base image. To maintain visual consistency, the poster's color palette has been harmonized with the overall logo color scheme. A subtle radiance effect has been applied to the image to enhance its prominence and visual appeal.

Fig 1.9 Process of developing

Fig 1.10 Layout

Fig 1.11 Decided Layout

Designing the character detail page presented the greatest layout challenge due to its relatively lower visual impact compared to the landing page and character carousel. To enhance the overall aesthetic, numerical indicators (1-4) were replaced with icons, and the background was transformed from a solid circular shape to a more dynamic composition of lines and spheres. Additionally, the mockingjay pin was enlarged and given a translucent overlay to create a subtle background element.

Fig 1.12 Radiance

Fig 1.13 Final Colour

I was quite hard to decide the sidebar menu colour. While I was initially drawn to the radiant color scheme of the logo, I was concerned about potential overemphasis and thematic inconsistency. Mr. Shamsul suggested exploring the second color option, orange, as a potential alternative for the sidebar background.

Fig 1.14 Auto Layout

To maintain consistent spacing throughout the prototype, Figma's auto layout feature was employed. This tool significantly streamlined the design process by automatically adjusting element spacing, ensuring visual harmony and efficiency.

Fig 1.15 Transition

Most of the transition used in the prototype is ease in, only except the carousel used a different animation, custom beizer(1,0,0,1) with a duration 1500ms.

Fig 2.1 Updated Final Layout

Fig 2.2 Updated Final Layout and design

Fig 2.1 and 2.2 is the updated layout with feedback given of positioning the button on landing page and removing the icon in Fig 2.2.

Mr. Shamsul expressed concern about the term "Event Place," suggesting it might be misinterpreted as a physical location rather than a category of events. He pointed out that the inclusion of an event titled "The Reaping" further emphasized this potential confusion.

Final Submission 

Link: https://www.figma.com/design/Protortpe

Fig 3.1Thematic Interactive Website Prototype

Fig 3.2 Thematic Interactive Website Interaction

---