Labels

Advance Interactive Design/ Task 1: Thematic Interactive Website Proposal

25/9/2024 - 20/10/2024 / Week 1 - Week 4 
Janice Marie Eng Chia Hui /0361521
Advance Interactive Design/Bachelor of Design in Creative Media / Taylor's University 
Advance Interactive Design

Table of Contents:

Instructions


Lectures

Visit the Lectures/Exercise blog to view lectures.

Task 1/Thematic Website Proposal

To-do list:
  • Come up with 5 potential topic ideas for the task
  • Consult with Sir on the topic ideas.
  • Choose one topic to focus on
  • Come up with the UI/UX proposal doc (Concept, Moodboard, Flowchart, Wireframe)

5 Possible Ideas

On the top of my head, I knew that I was going to either do about a J-pop group called ATARASHII GAKKO or Mofusand. But as per Sirs request, I had to come up with 3 other ideas. So I decided to propose Shin Ramyun, One Piece: Egghead arc and Howls Moving Castle.

Figure 2.1 5 Proposed Ideas (15/10/24)

After consulting with Sir, he told me to focus more on Atarashii Gakko or Mofusand. Since I preferred to do Atarashii Gakko, I chose to do that.

Thematic Website Proposal

Concept

I did some research on the concept I wanted to go for based on Sirs feedback. Some of the design styles I researched about were:
  • ukiyo-e (Japanese wood block printing)
  • Superflat (2d illustrations with no shading)
  • Brutalism (focused on showcasing functions only)
  • Pop Art
  • Maximalism (More is more)
In the end, I decided on a Maximalist concept for my website. The website will showcase bold fonts and colours in line with the concept. 

Some of the reasons I decided on Maximalism for the website were:
  • Atarashii Gakko's (AG) motto is to stand out with individualism 
  • AG's explosive dance moves
  • New album drop, with the message of telling the world 'AG is arriving' 

Moodboard

My main inspiration for the web design was Japanese advertising. Additionally, I also had some reference for how I wanted the menu page to look like. Other than that, I knew that I wanted to include an animated text marquee on my webpage as well. 


Figure 2.2 Maximalist Web Design Inspo (16/10/24)

Figure 2.3 Text Marquee animation reference (16/10/24)

Figure 2.4 Menu Reference (16/10/24)

Design Direction

Since I am doing a maximalist design, I tried to find bold design elements.

Colour:
  • Bold blue and yellow colours
  • In line with AG latest album branding colours
Font:
Figure 2.5 Fonts I plan on using (16/10/24)

Figure 2.6 Colour reference (16/10/24)

User Flow

My user flow for the website is quite straightforward. So not much to discuss here. Please refer to my wireframe to better understand the user flow.

Figure 2.7 User Flow (16/10/24)

Wireframe

Landing page
Figure 2.8 Landing Page (16/10/24)

In the landing page, users will be greeted by the AG members jumping in the air. Circling them is a text that says "Atarashii Gakko". The text will be animated. I plan on animating some elements around them so it looks like they are floating. When the cursor hovers over the girls, a button that prompts the user to click will appear. 

Sir advised me to not use the word start for the button that appears. He said to try and find a different phrase that fits AG style more. 

About the Members
Figure 2.9 About them page (16/10/24)

In all consecutive pages, the title of the page will be placed in a text marquee animation. 

Now a bit about the 'About them' page. The girls will be placed in a billboard, and when the cursor hovers over one of the girls, they will be highlighted to tell the user that they can click on them. 

After clicking on the girl, the billboard will change like a, surprise surprise, electronic billboard. Users will now be able to read more about the girls. I plan to include some audio, where each girl will say 'Hi I'm (name)'. Additionally, I plan to arrange the style of the billboard like that Japanese talk show style. (will go more in detail in next task)

World Tour Pt1

Figure 2.10 World Tour page (16/10/24)

The world tour pt1 page will include some locations (not all cause there's a lot lol) of AG world tour. The locations will be pin in the map and users can click  on it to pop up a small image and description of the concert there. I plan to make an aeroplane fly to the spot the users click on.

Album Tracklist
Figure 2.11 Album Tracklist (16/10/24)

In the album page, I plan to have a TV appear, and when users click on the songs the music video will play on the TV. I might add buttons to the TV so that users can navigate tru it as well. Hmm or maybe I can take out the track list, just put the TV and let users click tru it. Hmmm

Merch page
Figure 2.12 Merch Tour

This page will feature AG tour merch. Users will be directed to their official page when they click on the merch. 

Menu
Figure 2.13 Menu

The text in the menu will scroll when users hover over it. Thats all.

Final Submission

Proposal Slides
Proposal for Atarashii Gakko Thematic website by Janice Eng

Feedback

Week 3:
Proposed Ideas
Atarashii Gakko: 
  • Your visual references remind me of Russian Constructivism 
  • You can read up on Art movements in Japan since your band is from there
  • You can also consider a pop art or maximalist design for the website
  • The content is a bit lacking right now, try to explore ways to expand it
Mofusand x Uniqlo Graphic Tees:
  • This idea is ok also but seems like you can try adding in more about the artist and don't focus so much on Uniqlo
Week 4:
Specific Feedback:
  • Make sure your design choices is consistent throughout the web design
  • For the menu button, its ok to leave it in a hamburger menu, cause users understand what it is. But make sure when your opening the hamburger menu, put the close button in the same spot at the hamburger menu.
  • For the landing page, to start maybe you can make it so that users have to click on the group, and when the cursor hovers over the image, a button that says 'starts' appears. However, you can try and change the phrase start to something else that fits the concept and theme of the group.
  • There is a way to embed Youtube, will try and find they way.
  • For the billboard, make sure the background is not empty as usually the billboard has a city scape background.
Week 5:
Specific Feedback:
  • For the tour locations, better to use their current tour locations, not their past tour locations. You can add in the itinerary of the tour and their planned stuff. 

Reflection


Comments

Post a Comment