Advanced Interactive Design - Final Project

27/06/23 - 16/07/23 / Week 12 - Week 15
Azriq Anwar Bin Saprudin / 0353272
Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media
Final Project


Final Project

Art Direction

For this project, I decided to make my website into a promoting website for an album by a band called Coldplay. I will be using the aesthetics that the band used for this particular album, 'Music Of The Spheres', which had an outer space vibe to it.

Fig 1.1 Reference 1

Fig 1.2 Reference 2

I started working on the layout design. I placed these 'planets' as an intro to the website. Referring to their aesthetic for this album, these planets represent a different world dedicated for each song on the album.

Fig 1.3 Intro layout design

Also referring to their album's aesthetic, I used a similar font that they used and the pink hue for the texts and boxes

Fig 1.4 Home page layout design

Fig 1.5 Buy Album page layout design

Fig 1.6 Merchandise page layout design

Fig 1.7 Navigation layout design

For the navigation, I have them at the top of the page with their respective buttons. The 'Coldplay' button acts as a home button where it will take you back to the home page.


Fig 1.8 Final Layout Design 

The next part is to do the animating and coding for the website in Animate CC. Luckily, Mr. Razif provided a tutorial playlist essentially to guide on how to work our way through this project. 

Fig 1.9 Animating the intro

Fig 1.10 Coding with gsap script

Fig 1.11 Web Server

After all necessary animating and coding is done, it was then published through Animate CC. I downloaded Simple Web Server to test out if the website was working correctly. At first there was an error and nothing was popping out. I then realized I had to name the main html file index for it to work. Eventually it worked. 

Then I proceeded to create a Netlify account in order to upload and deploy my website.

Final Submission

Link to netlify: https://musicofthespheres.netlify.app/


REFLECTIONS

Experience
This particular task was quite a question mark for me because it was delayed immensely so every part of this task felt rushed. I was familiar with Animate CC as I used it before but the thing that took me a while to figure out was the coding. It was a fascinating experience knowing that it was possible to do coding in a software that primarily does animation. I would have dive into more of the coding but due to the limited time that I have, I made it as rudimentary as I can to make some things work.

Observations
I observed that coding took most of my time for this task because if I make one small mistake or like I missed a dot or a semi colon, the whole thing messes up. Knowing where to put the coding was also confusing and time consuming.

Findings
I found that doing the coding itself, I had to be much more articulate than doing the designs. Thankfully the website that I referred to had cheat sheets and guides on how to do individual sets of coding. I found it horrific learning coding in a short period of time but I think I would enjoy learning it when I have the time to.

Comments

Post a Comment

Popular posts from this blog

Advanced Typography - Task 3: Type Exploration and Application

Image
 24/05/23 - 05/07/23 / Week 8 - Week 14 Azriq Anwar Bin Saprudin / 0353272 Advanced Typography / Bachelor of Design (Hons) in Creative Media Task 3: Type Exploration and Application LECTURES Lectures 1 to 5 in  Task 1 / Exercises: Typographic Systems & Type & Play   INSTRUCTIONS Task 3: Type Exploration and Application For this task, we were given the freedom to propose our own project. We were required to either research the usage of typeface in our field of interest or develop a typeface to address a challenge in that area. The final product would be the developed typeface used in whatever medium relevant to the problem being solved. Final Project Ideas Chosen Idea Revival Typeface Fig 1.1 Proposal, Week 9 (31/05/23) ...
Read more

Major Project

Image
25/09/24 - 08/01/25 / Week 1 - Week 15 Azriq Anwar Bin Saprudin / 0353272 Major Project / Bachelor of Design (Hons) in Creative Media Major Project INSTRUCTIONS Major Project In this module, the task was to work independently by tailoring content, which eventually will create an eventful and skillful design project.  To develop the ideas I have in mind, I consulted with my lecturer, Ms. Anis, on which ideas are preferably tailored for my interests and capabilities.  These were the ideas that I had in mind: An experimental hand drawn animation that progressively grows to become a product feature. A comic book style animation with typography enforced. Video game mock (?) Modern day mockery of leaders through hand drawn animation Magazine product line Current world events related graphics A musical promotion for a local band I was circling around the idea of the "modern day mockery of leaders......
Read more

Packaging and Merchandising Design - Task 1 - Exercises

Image
31.08.2022 - 07.12.2022 (Week 1 - Week 15) Azriq Anwar Bin Saprudin / 0353272 Packaging and Merchandising Design / Bachelor of Design (Hons) in Creative Media  Exercises INSTRUCTIONS Exercise 1 - Packaging Design Case Study Our first exercise is to do a case study on an existing packaging design. We are to study the packaging's practicality, functionality, ergonomics and concept. Also to study its functions, forms, structure, and material. Furthermore, to study its target audience, design elements and how it lines up with the brand image of the packaging. EXERCISE 1 FINAL SUBMISSION Exercise 2 - Box Making  We have to choose 2 loose items and create a packaging out of it. The item size cannot exceed 300mm.  The loose items that I chose is a face wash and toothpaste. I did some sketches on the items. Fig 1.1 Item 1 and 2 Sketch EXERCISE 2 FINAL SUBMISSION
Read more