Advance Interactive: Task 2

22nd May - 11th June 2024 / Week 5 - 8
Alana Sofia Othman / 0353451 / Bachelor of Design (Hons) in Creative Media
Advance Interactive
Task 2

---

INSTRUCTIONS

Task 2: Interaction Design Planning & Prototype

Progress

Background Loop

Video 1.1 Gradient Loop Background - Test 1

Video 1.2 Gradient Loop Background - Test 2

Video 1.3 Gradient Loop Background - Test 3

To start off designing my website, I started with my gradient loop that I intend to use as a background. In my head, I had a vision of what I wanted the loop to look like but of course, achieving that was something else. I followed three different youtube tutorials to create a gradient background in After Effects, all 3 used different methods, allowing to have slightly different movements and flows.

Test 3 was my favourite in terms of gradient movement, however, it was done through code in After Effects, meaning no keyframes, which would not work well as I needed a short clip to loop it in the background. This would be because I will be placing it into Animate for a website, making it unwise to have a heavy full length video in the background. So instead, I went with the next best option, which was Test 1. However, although the colours were of what I had propsoed in my Task 1 Proposal, they did not work well here as a background as it would be too heavy and a bad idea, so I decided to change the colours, as seen in Video 1.1 (Note: Video 1.1. shows a version where I already edited the colours because I forgot to save the previous version).

Video 1.4 Gradient Loop Background - Test 1.2

After I was happy with the colour though, I was less happy with the loop of animation. It looked as if it was on play, rewind, play, rewind. So I made some changes with the keyframes and loops to ensure it would do a full movement loop nicely and not look as if being rewound. Thus, Test 1.2, where I was finally happy with it.

Draft Design

Figure 1.1 Draft Designs 1

Figma apparently does not allow free users to place videos in, so instead I exported a frame of my looped background and just worked with that for now. I began with a simple layout, testing fonts, colours, elements and so on, as seen in Figure 1.1. I struggled a little with the fonts as I spent hours (not kidding about the plural in 'hour'), searching for a font to fit. I also struggled with the pages looking empty as the artist does not really have any design elements I could play around with. His visual style, especially for this EP, is mainly styled photography. Which, for me, means I should be playing with typography more to balance it out.

Figure 1.2 Draft Design 2

Since I wanted to be more playful with type, I decided to try outlined fonts and have it way bigger to fill up space. For the most part, it worked, but then with this draft, it also felt that everything was too big and there did not seem to be any smaller elements or a sense of hierarchy. So, I worked on refining these designs more, and once I was satisfied, got my final outcome.

Final Outcome

Prototype & Design

Figure 2.1 Final Design Outcome

I finally was satisfied with my designs. Although the pages are still simple, they do not feel too bland to look at, in my opinion atleast. Once I had these down, it also became easy to design the navigation bar and ticket purchasing pop up card. See Design & Prototype on Figma Link Here

Slides

Video Presentation

---

FEEDBACK

-

---

REFLECTION

Experience

nootnoot

Observations

nootnoot

Findings

nootnoot

---

FURTHER READING

-