Labels

Interactive Design / Final Project

21.06.2022 - 09.07.2022 (Week 13 - Week 15)
Lulu Luisa Linardi / 0349358 / Bachelor of Design (Hons) in Creative Media
Interactive Design
Final Project: Design, Exploration, and Application

LECTURES

Fig 1.0: Thumbnail

All the lectures are done in Exercise page. To go to Exercise page, click here.

INSTRUCTIONS


Final Project: Design, Exploration, and Application

Students are required to develop a minimum of 5 pages of a website. The website should use valid XHTML and using external CSS. The content must use original text and original graphic design. The website should not have broken links and proper use of HTML Tags. The final website is to be uploaded to Netlify.

Before starting this final project, I considered a lot about what page should I create. And finally, I decided to create 5 more pages and designed the layout for each page.

Here's the prototype of my pages. REMINDER THAT THIS IS NOT THE FINAL LAYOUT FOR MY WEBSITE PAGES.
1. Account–Login Page
A page for buyers to log in to their account or sign up for a new member account.

Fig 2.1.1: Login Page Prototype

2. CD&DVD Page
A page containing 16-24 CD&DVDs from various artists.

Fig 2.1.2: CD&DVD Page Prototype

3. Product Page
A page showing the particular product that can be accessed from the call to action button (Get Yours!) on the landing page. For the content of this page, I chose to put NCT Dream's 2nd Repackage Album – Beatbox.

Fig 2.1.3: Product Page Prototype

4. All Artists Page
A page containing 16-24 artists. The particular artists can be clicked and it will redirect the buyers to the artist's page.

Fig 2.1.4: All Artists Page Prototype

5. Selected Artist Page
A page that contains a short description of the particular artist with a picture of the artist and their products (16-24 products). For this page, I chose to use NCT as it has many units so I can display many things and products there.

Fig 2.1.5: Selected Artist Page (NCT) Prototype

The next step is to create the working website page for the 5 additional prototypes. I really put a lot of effort into my final project. I learnt so many new things, especially things about CSS styling by myself to get what I wanted. I tried several bootstraps and CSS to make a nicer webpage. Each picture of the artist was resized so it shows the same size which makes them look nicer and tidier. It took me so long to gather and edit all the images for every page. Below is my working process. I only managed to screen capture the progression of the product page and login page because those two are the most stressful page to create. 

Fig 2.2.1: Messy Product page

Fig 2.2.2: Login page before adding CSS

Fig 2.2.3: CSS added to Login page

Fig 2.2.4: Login page after the CSS is added

Fig 2.2.5: Better-looking Login page

Here's the Netlify link to my final project.

Now I will explain how the entire website works.

1. Landing Page
The homepage of Keypopies website which has 5 different sections. What can be accessed from this page:
– Login Page
– CD&DVD Page
– All Artists Page
– Selected Artist–NCT Page
– Product Page
Buyers can also click the search button on this landing page. It will show the search bar, but unfortunately, it can't be used to search for things.

Fig 2.3.1: Final Landing Page

2. Account–Login Page
A page for buyers to log in to their account or sign up for a new member account. This can be accessed by clicking the user button that is placed on the top right of the every page's navigation bar.

Fig 2.3.2: Final Login Page

3. CD&DVD Page
A page containing 24 CD&DVD products from various artists. This page can be accessed by clicking the CD&DVD button that is placed on the navigation bar on every page. Buyers can go to the Login page and Product page from this page.

Fig 2.3.3: Final CD&DVD Page

4. All Artists Page
A page containing 24 CD&DVD products from various artists. This page can be accessed by clicking the 'More Artists' button that is placed on the 'Pick Your Artists!' section on the landing page. Buyers can go to the CD&DVD Page, Login page, and NCT Page from this page. To go to NCT Page, just click the NCT option.

Fig 2.3.4: All Artists Page

5. Selected Artist–NCT Page
A page that contains a short description of the NCT (the artist) with a picture of them and their 24 products. This page can be accessed from both 'Pick Your Artists!' section on landing page and the all artists page. Just need to click the one written NCT and it will redirect the buyers to this page. From this page, buyers can go to the CD&DVD page, Login page, and Product page. To go to the product page, click the first product 'NCT Dream | The 2nd Album Repackage – Beatbox (Photobook ver.)' which is located on the top left product section.

Fig 2.3.5: Final Selected Artist–NCT Page

6. Product Page
A page showing the product 'NCT Dream | The 2nd Album Repackage – Beatbox (Photobook ver.)' that can be accessed from the call to action button (Get Yours!) on the landing page, CD&DVD page, and NCT page. Buyers can modify their buying quantity, add product to their wishlist by clicking the love icon, and can see the more detailed part of the products with the magnifier glass in each image. Buyers can go to the CD&DVD page and Login page from this page.

Fig 2.3.6: Final Product Page

Below here is a tutorial video to access Keypopies website. The video also shows the CSS styling that I added.


Fig 2.3.7: Full Tutorial on How to Access Keypopies Website

In case you miss it, I will put my website link again. Here's the Netlify link to Keypopies website.
https://keypopies.netlify.app/

REFLECTIONS

Throughout this big project, I really learnt a lot of things. I get to know not only how to design a better layout but also how to realize my layout into a real webpage. Although this is my very first time creating a website from a blank HTML and CSS code, I feel like my final outcome is so great. I'm very satisfied with what I did in the past few weeks, even though it needed a big effort, but I think my effort paid off after the website is done. It's not that I didn't encounter problems. I did encounter so many problems while doing this project. However, I tried to calm myself down and look for a solution on Google. There were also times when I was so desperate to look for solutions, so I forcefully asked for help from my cousin and friend who are studying web programming. Also from this project, I get to discover and try new things like bootstraps and CSS styling to my webpages. Lastly, I would say that this is the most fun and exciting project and module that I've ever had. I really enjoyed all the processes that I went through despite the hard times that I encountered.