INTERACTIVE DESIGN - PROJECT 1

Week 6 - Week (20/05/2020-)
See Zi Yi 0340094
Interactive Design
Project 1 - Landing Page Design

---

INSTRUCTIONS



Week 5 (13/05/2020)

For our first project, we were tasked to create a static landing page for a topic of our choice. We have to indicate the type of website we would like it to be as well as the call to action. I have chosen to create a website for my favourite Taiwanese music band: Mayday.

Below are some screenshots of Mayday's official website:

Fig. 1.0 Official website for Mayday (header)

Fig. 1.1 Official website for MayDay (albums)

Fig. 1.2 Official website for Mayday (Introduction of the band)

Fig. 1.3 Official website for Mayday (music videos)

I also did some research on some web layout design which are music-related. Below are some examples:

Fig. 1.4 Music website layout reference #1

Fig. 1.5 Music website layout reference #2

Fig. 1.6 Music website layout reference #3

With all the references I collected, I started to pen down a rough idea of the purpose of my website:

Fig. 1.7 Brainstorming

Here's a summary of my website:

• Purpose: Informational website for Mayday's fans all around the world to get updates about their band, view their music videos, purchase concert tickets, send a private message to the band.
• Call to action: "Follow Us"/ "Subscribe Now"
• Potential sections to be included:

1. Navigation bar with translation function
2. Header section with a call to action
3. Introduction to band members, their roles
4. Music playlist bar/ music streaming on Spotify or Apple Music
5. Updates on upcoming tours/ ticket purchasing section
6. Share your favourite memories with the band, to the band

Then, I developed my five sketches on my wireframe:

Fig. 1.8 Idea sketch #1

Fig. 1.9 Idea sketch #2

Fig. 1.10 Idea sketch #3

Fig. 1.11 Idea sketch #4

Fig. 1.12 Idea sketch #5

Week 6 (20/05/2020)

Out of 5 of them, I like the second layout design the most, hence I started off with that. But I was advised by Mr Lun to feel free to experiment with different section layout instead of sticking on one.

Before creating the layout design, I collected images and icons which I think I might need. Below is a compilation of them.

Fig. 1.13 Images and icons

And with the images and icons, I started designing my layout. I wanted my design to have a more stylish and modern kind of vibe, hence I tweak the colour balance of most of the images from red & green to pink & blue. The result is evident in the header image as shown below:

Fig. 1.14 Working in progress

After a few rounds of trials and errors, below is my first attempt at Project 1:

Fig. 1.15 Attempt 1 

However, I don't think the third section with the map is turning out well. The legibility is weak and it looks like the tracker for Covid-19 cases around the world... Hence, I tried out something new: to have the countries landmark shown instead. This way, it will be easier for the viewers to grasp the idea at a glance. Below is my attempt after I have amended the third section.

Fig. 1.16 Attempt 2

I also made some variations for the fourth section's background image. Below are my attempts:

Fig. 1.17 Attempt 3

Fig. 1.18 Attempt 4

Week 7 (27/05/2020)

I showed my work to the lecturers in class, and Mr Shamsul said I can submit Fig. 1.17. However, after listening to the feedback given to my classmates, I feel like I can further improve it. Hence, for my most recent version:

1. Header - added another line "for Mayday's latest news" after "Follow Us" and remove the Chinese title.
2. Best of Mayday - made the white arrow keys and play button more visible.
3. Footer - changed its pattern to make it look more solid as a base of a web layout.
4. Overall layout - gave more padding for each section and changed the typeface from Futura to Josefine Sans as Futura is not available on Google Fonts.

Fig. 1.19 Attempt 5

I also noticed that the rounded buttons are not visible, hence I filled it with white. Below is my final outcome of Project 1.

Fig. 1.20 Final Outcome of Project 1 (JPEG)

After finalizing my landing page, I created a Google Slides as requested by the lecturer. We were tasked to embed our design in the Google Slides as our Project 1 submission.

---

FEEDBACK

Week 6 (20/05/2020)

Mr Lun commented that Fig. 1.9's world map section is interesting. Also, even though I have my wireframes sketched out, I can still mix and match different sections to create my final layout as it's not mandatory to follow the layout I opted for strictly. He also said I can start working on it digitally.

Week 7 (27/05/2020)

Specific Feeback:
Mr Shamsul commented that my layout design is great and said I should go with Fig. 1.17 for my final design, as the last section's background image, is the clearest in that figure. We shouldn't have a pixelated image for our layout design as it degrades the whole website. For the MP3 design, it's not necessary to create it from scratch but I can just upload an image of it. Mr Shamsul said the landmark icon is better than the world map too. I was told to do some research on Bootstrap as well, before proceeding to Project 2 next week. The second attempt looks better.

General Feedback:
We should always look for references for our design. For our font for our landing age, we should pick according to fonts available on Google Fonts. Besides, we should always inform what the users can do on our website and state everything clearly. Always work on a few options and treat the lecturers like clients.

---

REFLECTION

Week 6 (20/05/2020)

Experience: I am so glad my exercise layout turned out nicely! It feels as if my effort has finally paid off. I struggled really hard at first, but I am glad I invested the time and effort into learning it. Looking at the end results is really satisfying. I can't wait to do more hands-on exercise on this module.

Observation: I observed a classmate of mine's layout (Cerene's!), and it indeed looks very professional. Some of my friends have very interesting layouts too! But some of them seemed to only utilize the layout taught in last week's class.

Findings: Even though I think I did well, I still have so much to learn from my classmates and lecturers. I am also very grateful for the existence of the Internet. It's seriously where the magic happens.

Week 7 (27/05/2020)

Experience: Today's class was more of a consultation session so it was rather relaxing.

Observation: I noticed some classmates are still working on their layout design and only a few have done theirs. I also noticed a few friends' designs that are really appealing, probably because they have done sufficient research before working on it.

Findings: I am glad I am on track as I was just left with touching up with my layout design. I am more or less sure of my working frame to produce relatively good work - 3 days. I guess I have to train myself to work at a faster pace as a lot of assignments are piling up.