Interactive Design/ Final Project: Single Page Lifestyle Microsite

25/06/2024 - 03/08/2024 / Week 10 - Week 15

Lim En Yu / 0354452

Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor’s University 

Final Project: Single Page Lifestyle Microsite

---

TABLE OF CONTENTS

1. Instructions

2. Final Project: Single Page Lifestyle Microsite

3. Feedback

4. Reflection

---

Instructions

Fig 1.1 Module Information

---

Final Project: Single Page Lifestyle Microsite

We are instructed to prepare:

• Content structure
• Visual reference/design inspiration
• Mood board - Color scheme  (Primary, secondary, and ascent color), font choices (header, subheader, body copy, navigation), 
• Wireframe ( > 5 sketches)

Content Structure

• Introduction
• Mmbers
• Gallery ( Performances/ MVs)
• Albums
• Member's Instagram
• Subscribe Us!

Visual Reference/ Design Inspiration

Here are some inspirations I got from the Internet which will be the basic structure and style I would like to create for a fanpage for Aespa.

Fig 2.1 Visual References, Week 10 (29/6/24)

Here is the visual references with more specific design style that I wanted to do after Mr Shamsul has asked me to look for it.

Fig 2.2 Visual References #2, Week 11 (3/7/24)

Moodboard- Colour Scheme & Font Choices

According Aespa official fandom colour, the colour will be light purple and light cyan, therefore I decided to appply these colours to my web page design as it suits my concept also. Other than that, for the font choice, I would prefer Sans Serif font typeface as I think i tlooked more professional to me. Therefore, 4 of the font choices are all Sans Serif and I have chose a thickest typeface for the header.

Fig 2.3 Colour scheme and font choices, Week 10 (29/7/24)

Sketches/ Wireframes

As instructed, we are required to create mininum 5 skecthes of the wireframes to show Mr Shamsul, I have included all the contents required section by section with slightly different of arrangements and designs but overall will be the same.

Fig 2.4 Sketches/ Wireframes, Week 10 (29/7/24)

Prototype Figma Link: https://www.figma.com/proto/57zpuEX6mBTvTXcTg8FRyg/Final-Project?node-id=0-1&t=jjvS4fjkjKM67arX-1

Fig 2.5 Prototype for Final Project, Week 12 (10/7/24)

Header

For the navigation bar, I have total 8 sections including the "Fanclub" which is a call to action button. Also, I have included a logo of Karina at the left side.

Fig 2.6 HTML code for navigation bar, Week 13 (18/7/24)

I would like to do a sticky navigation bar which is same like what Mr Shamsul taught us and I have applied flex end to my navigation bar to make it at the right side. Other than that, I have also set a hover effect that enlarge the font, change the colour of the font and have a border bottom when we hovering on top. Same goes to the "fanclub" button, it will be bigger and change the colour when hovering it.

Fig 2.7 CSS code for navigation bar, Week 13 (19/7/24)

Initially, the navigation bar was in black and plain, therefore I decided to modify it. I changed it into a bit transparent as I think it looked more nice, also I have added a bit shadow under it. The button I have also changed to a more square shape that I preferred more.

Fig 2.8 First version of navigation bar, Week 13 (19/7/24)

Fig 2.9 Updated version of navigation bar, Week 13 (19/7/24)

On the other hand, I created a hamburger menu for navigation bar so that it can be collapsed when it is in a device screen that is smaller. I made it by searching the tutorial online.

Tutorial:https://dev.to/devggaurav/let-s-build-a-responsive-navbar-and-hamburger-menu-using-html-css-and-javascript-4gci

Javascript applied:

Fig 2.10 Javascript for hamburger menu, Week 14 (26/7/24)

Besides that, I have also set the background colour of the hamburger manu into black that is a bit transparent. Here are the different view of the hamburger menu from a mobile phone view and an ipad view.

Fig 2.11 Outcome of hamburger menu on phone and ipad, Week 14 (26/7/24)

Home Page
For home page, actually it was planned to only have 7 photos in total but she is too beautiful!!! I need to let more people to see her gorgeous face. Therefore, I have make total 11 photos for the slider of home page.

Fig 2.12 Photos used for slider at home page, Week 13 (19/7/24)

Here is the html code from bootstrap, actually it is the code of slider with indicators, not the auto playing code. I realised the auto playing code is just adding a "data-bs-ride="carousel" at the first div, then I have added it by myself.

Fig 2.13 HTML code for home page, Week 13 (18/7/24)

Here is the outcome of it is playing automatically:

Fig 2.14 Outcome of auto playing carousel with indicators, Week 13 (20/7/24)

However, I found out an issue is that when my mouse hovering on top of it, it will stop the auto playing, so I have searched for the way to solve it and here is the javascript to solve this problem.

Fig 2.15 Javascript added, Week 13 (20/7/24)

Apart from that, I have also make a fade in animation when opening the website to make it looked more fancy✧˖°⊹₊ ⋆ .

Fig 2.16 CSS code for fade in animation, Week 14 (28/7/24)

Outcome of the fade in animation when entering the page:

Fig 2.17 Fade in animation when entering the web page, Week 14 (28/7/24)

Introduction

I have included Karina's basic information in this introduction section and also some of her picture. I have made "Karina" as h1 so that people will aware of it at first sight. The next part in this section will be about her early life and education. 

Fig 2.18 HTML code for introduction, Week 13 (18/7/24)

First part of introduction will basically looked like this. The right section will arranged from h1, h3 and p.

Fig 2.19 First part at introduction, Week 14 (22/7/24)

The second part is almost the same, just that it does not include h1. Both pictures I have applied border radius 25px as it will looked more coordinated to the web page design.

Fig 2.20 Second part at introduction, Week 14 (22/7/24)

Also, this is my photo used as background. The logo is from one of their latest album and I have added some sparkles and stars but lower down the opacity so that it would not grab the audiences' attention away from the contents.

Fig 2.21 Background used, Week 13 (19/7/24)

Gallery

For my gallery images, I did not think of using image grid but when I browse through the code for images, I realised that it works on my gallery section.

Tutorial: https://www.w3schools.com/howto/howto_js_image_grid.asp

Fig 2.22 HTML code for gallery, Week 13 (18/7/24)

CSS code for gallery section:

Fig 2.23 CSS code for gallery, Week 14 (22/7/24)

Here is the outcome after I have applied the image grid code. It is more neat compared to my prototype in Figma. The pictures are arranged in set which are in different style of looks in different album but all of them are from the few latest album. I have used 1 portrait photo and 2 landscape photo in a set.

Fig 2.24 Outcome for gallery section, Week 14 (22/7/24)

As I want to make it more user interactive, I have added a hover effect on every picture, which it will minimize and has a glowing like effect when hovering on top. Here is a video showing the effect:

Fig 2.25 Hovering effect in gallery, Week 14 (22/7/24)

Latest MV

It is quite simple in this section, I just embedded the code of their latest MV which is "Hot Mess" from YouTube.

Fig 2.26 HTML code for MV section, Week 13 (18/7/24)

Fig 2.27 Latest MV section, Week 14 (22/7/24)

Albums

This part I have also utilised slider element but not 3 in a group as shown in the prototype. I decided to make it display it one by one while pressing on the button. Also, I have also added the audio play function that I have saw it online. I think it is much more convenient that I included it according to the album, compared to I embed an external link.

Fig 2.28 HTML code for albums, Week 13 (18/7/24)

Here is the outcome of only html code when I have not applied the CSS code.

Fig 2.29 Albums section without CSS code, Week 13 (18/7/24)

CSS code of the albums slider:

Fig 2.30 CSS code for albums, Week 14 (25/7/24)

Video demonstrating the use of the slider and audio play function. The sequence of the album was from the latest to the oldest and the song attached was each of the title track.

Fig 2.31 Outcome of albums section, Week 14 (25/7/24)

Instagram

As I wanted to promote her instagram as well, therefore I decided to add this section in this fan page. I have atteched the link of instagramn profile of both Aespa which is her group and herself as well. The same thing, I have added hover effect on the link.

Fig 2.32 HTML code for instagram section, Week 13 (18/7/24)

Fig 2.33 First part at instagram section, Week 14 (25/7/24)

In the same section but under the first part, I included the top 3 popular posts from Karina's instagram account that got most of the likes which are from 4.5millions likes to 5.5millions likes. On the of it I have added a banner thingy with the light cyan colour in the colour palette to attract the audiences' attention.

Fig 2.34 Second part at instagram section, Week 14 (25/7/24)

The hovering effect of course, I have also added to the instagram posts, it is also like a glowing effect. The photos included links that could direct the users to the instagram posts.

Fig 2.35 Hovering effect of instagram posts, Week 14 (25/7/24)

Subscription

Last but not least, the subscription section must be included as it is a compulsory element in a fan page. I would like to ask the fans of Karina to subscribe this page by providing the name and email address in order to get the latest information from Karina.

Fig 2.36 HTML code for subcription, Week 13 (18/7/24)

As I think that the subscription box was a bit plain, I modified it by adding a white box shadow to it. Here is the comparison with and without it:

Fig 2.37 Comparison of subscription box, Week 14 (26/7/24)

Other than that, as I noticed that Mr Shamsul has mentioned lightbox in the instructions, I have search for it, it is like a a window overlay that appears over a webpage, blocking some of the content and dimming and disabling the rest of the background. I think I can add it into the subscription section which the window will pop out after the user has hit the subscribe button.

Fig 2.38 Modal/lightbox for subscribe button, Week 14 (27/7/24)

Here is a video demonstrating it:

Fig 2.39 Video of the modal/lightbox , Week 14 (27/7/24)

Footer

After every section are done, I proceeded to the footer that will be included the logos and all the website links which are social media, online merchandise store, Spotify and YouTube. 

Fig 2.40 HTML code for footer, Week 13 (18/7/24)

Also, I have added another banner that echoed with the banner in instagram section. Both of them are asking for follow and subscription.

Fig 2.41 Footer, Week 14 (28/7/24)

Scroll to reveal

For scroll to reveal function, I have also searched for the tutorial online. After adding this function I feel that my web page look more professional :D

Tutorial: https://www.shecodes.io/athena/7981-how-to-create-scroll-animations-on-a-website

Fig 2.42 Scroll to reveal, Week 15 (31/7/24)

Final Outcome for Final Project: Single Page Lifestyle Microsite

------------ Final Website Link ------------

Fig 2.43 Final Outcome for Final Project: Single Page Lifestyle Microsite, Week 15 (31/7/24)

Fig 2.44 HTML code for Final Project, Week 15 (31/7/24)

Fig 2.45 CSS code for Final Project, Week 15 (31/7/24)

Fig 2.46 Javascript for Final Project, Week 15 (31/7/24)

---

Feedback

Week 11: This week I have shown Mr Shamsul my 5 sketches of wireframes, he said that overall five of them looked okay, but he will prefer the fifth one. However, Mr Shamsull advice me to focus on 1 member only so it will be easier to contruct the web page. Also, Mr Shamsul has asked me to look for more specific examples for visual references.

Week 12: This week we have no class but Mr Shamsul has asked us to upload our prototype link to Google Classroom for feedback. He has given me feedback that "The header is gigantic. Design is not very interesting and attractive. Need to improve the design."

Week 13: After I have told Mr Shamsul the elements I would like to utilise in the web page design. He suggested that I could apply Bootsrap into it. For the subscription part, he advised me not to use the word "Subscribe Us!" so that it would looked more professional.

---

Reflection

Experience

This is not easy for me, but compared to the last project I think I improved a lot. Through having so many practical classes, I have some basic knowledge for me to create a website but it is hard for me to make a perfect one. This time I did faced a lot a lot of frustrating moments as I kept wondering why the code not working, but I did not give up and kepe trying or find another way until it works. This definitely train my patience and of course coding skills. I really really happy during the moment that I finished my website, not only mean that I finish the project but I did actually create a fan page for my favourite idol!

Observations

I observed that many simple functions that I have seen daily actually is not that simple! It required more code and CSS code or even javascript to modify it. For example, the carousel at the home page, it looked so simple but if there is no reference from bootstrap I completely have no idea on how to do it. Other than that, the scroll to reveal effect I have also tried a lot of times only it works! I faced a lot of issues and it is because everytime I will do some little mistakes but mor eof the moments are I do not know where is the problem :D. So I will look for another way to solve the issues.

Findings

For me, I find this project interesting but frustrating at the same time, I think my strength is not on this :D Also, every single details is being code out by purpose, it will take a lot of times and many time of amendments made to achieve the expectation and ideal design. Although my fan page might look simple, but I really put in all my efforts and taking care of every details! This project is hard but indeed fun and enjoyable at the same time.