Atarashii Gakko!: Fly High! Album Interactive Website

Duration: 25/9/2024 - 8/1/2025 (15 weeks)
Project: Building an Interactive Website
Project type: University Project

Table of Contents:

  1. Overview
  2. The Process
  3. Proposal
  4. Planning
  5. Prototype
  6. Implement
  7. Final Design 
  8. Reflection

Overview

During my fifth semester at university, I was allowed to design an interactive website for a product, brand, TV show, game, movie or band. The only thing was that the website had to be themed and interactive. I decided to make an interactive website for my favourite band, Atarashii Gakko, latest album, Fly High!.

This was an individual project and some of the things I have done included:
  • Research
  • Prototyping
  • Asset Sourcing
  • Implementing Website
Programmes Used:

The Process

The end product of this project was not user-tested, hence the process only involves prototyping and implementing. 

Figure 1.1 The Process

Proposal

For the proposal, we were required to have at least 5 ideas before focusing on one idea to propose. My initial 5 ideas were ATARASHII GAKKO, Mofusand, Shin Ramyun, One Piece: Egghead arc and Howls Moving Castle. 

After getting my ideas approved, I focused on generating a proposal for an Atarashii Gakko website. I was advised to get a concrete concept down for the website to ensure that its theme was consistent. 

The final concept I chose to use was Maximalism as it aligns well with the band's motto, which was to stand out with individualism. 
Proposal for Atarashii Gakko Thematic website by Janice Eng

Planning

Moving on from that. Before starting the prototyping phase, I made the user flow for the website.

Figure 1.2 User Flow of the website

Additionally, I made some really Low-Fi sketches to help me understand what each page should look like. 

Figure 1.3 Really Low-Fi Sketches

On top of the sketches, I also planned out how the animation on each page should look like. This was done by showing a reference animation or using pictures to showcase what happens after the animation. 

At the same time, I also decided on the art direction of the website.
Interaction Design Planning and Prototype by Janice Eng

Prototype 

Moving on, after all the planning was done, I started making all the needed assets in Adobe Illustrator while compiling them into Figma to make the prototype in. 

Figure 1.4 Website Prototype in Figma

Implement

After the prototype was done, I brought all the assets into Adobe Animate to build it into a working prototype. This was by far the most tedious part as Animate is not meant to build websites on. 

Following that, I uploaded the file onto Netlify to make the prototype live. 

Figure 1.5 Final Working Prototype (pls wait for a moment for it to load)

Final Work

Website Link:
https://agcallingalbum.netlify.app/

Website:

Figma Prototype:

Reflection

This project was a breather from my studies. It allowed me to explore creating a themed webpage as well as learn about different types of interaction and animations that can be implemented into a website.

Moving forward, if given the chance to do this type of project again, I would wish to include in more interactive elements to really showcase the interactivity of the website (while also making sure its still usable of course).

Comments

Post a Comment