INTERACTIVE DESIGN / FINAL PROJECT
28.03.2022 - 00.00.000 (Week 1 - Week 5)
Muhammad Azka Farezi Septenal / 0351345 / Bachelor of Design (hons) in
Creative Media Interactive Design
Final Project
INSTRUCTION
TASK
PROJECT 3 : FINAL PROJECT
Students are required to create the remaining pages for their
website as their final project. They will be required to develop
at least five pages, including the landing page. Students were
also instructed to upload their final websites via netlify.com
and submit them via google classroom with a blog.
Initially, I intended to exclude five primary pages from the
landing page, including "Rose 31", "Other Collections", "Store",
"Cart", and "Log In." However, I decided to remove the Cart
section from my navigation because it was time-consuming to
create.
- FIRST PAGE (ROSE31)
On the home page of my website, I chose to feature a product
that best represents the site. This page will contain five
sections: navigation, header, section 1, section 2, and
finally footer. I intended to create an interactive website
for the plan by embedding clickable content throughout this
page and directing the user to the desired page.
Figure 1.0 First Page (06/07/2022)
HEADER (CAROUSEL)
For the first section of this page, I decided to implement a
carousel. Initially, I had considerable difficulty creating a
responsive carousel for my content. Nonetheless, with a little
assistance from Bootstrap and a YouTube tutorial video, I was
able to complete this responsive swiper for my website.
CONTENT (ICON)
To exhibit the products. I decided to use a 300 x 300-pixel PNG
background image of the products. I also added a border to the
image to make it look like a card. To make it clickable, I
decided to include a link that directs the user to the sign-in
page.
FOOTER
For the footer, I chose to utilise a bootstrap-provided footer
template. It was difficult for me because the majority of the
available footers in Bootstrap are not functional, making it
difficult for me to find one.
- SECOND PAGE (OTHER COLLECTIONS)
Similar to the previous page, the purpose of this page is to
showcase additional collections from this company; however, I
decided to use a slightly different website layout on this page.
This website consists of seven distinct sections, including the
navigation, first section, card 1, second section, card 2, and
footer.
The primary issue with this website is adjusting the spacing
between each section and row. It was extremely challenging for a
novice such as myself, but luckily I figured out how to
manipulate it and make it responsive.
Figure 1.1 Second Page (06/07/2022)
HEADER
Initially, I intended to use a static image with multiple texts for the
header section; however, I discovered a YouTuber who instructed me on how to
create a simple animation for my header text. I found it intriguing and
sophisticated due to how the result appears.
SECTION
It is the simplest and easiest component to create on this website;
however, the primary issue with this component and this page is the padding
and margin. It is extremely risky to manipulate padding and margin in this
section due to its complexity and potential to destabilise the entire page
layout, particularly if these sections are not responsive.
Figure 1.2 Section Part
CARD
Similar to the previous page, this section is not a card but rather an
image with a background colour that makes it appear to be a card. To
make it clickable, I decided to add a link to the sign-up page.
FOOTER
For the footer, I chose to utilise a bootstrap-provided footer template.
It was difficult for me because the majority of the available footers in
Bootstrap are not functional, making it difficult for me to find one.
- THIRD PAGE (STORE)
This page is the most straightforward among the others. For this page of
this website, I decided to reuse the same section of code because this
section of the website does not require a variety of code types.
Figure 1.3 Third Page (06/07/2022)
SECTION
It is the simplest and easiest component to create on this website;
however, the primary issue with this component and this page is the
padding and margin. It is extremely risky to manipulate padding and margin
in this section due to its complexity and potential to destabilise the
entire page layout, particularly if these sections are not
responsive.
FOOTER
For the footer, I chose to utilise a bootstrap-provided footer template.
It was difficult for me because the majority of the available footers in
Bootstrap are not functional, making it difficult for me to find one.
- FOURT PAGE (LOG IN)
This section of this website is the most fundamental when compared to the others. There are only two sections on this website: the navigation bar and the login page. Since it requires a great deal of code and animation code in CSS, this page is, in reality, quite complicated.
Figure 1.4 Fourth Page (06/07/2022)
SECTION
This section will provide the user with a login form so that they can log in to the website and place orders via this website. This section is actually quite enjoyable to create because it requires a great deal of animation.
PROJECT 3 : FINAL RESULT AND SUBMISSION
Figure 1.5 Final Outcome (09/07/2022)
Figure 1.6 Website Preview (09/07/2022)
REFLECTION
Although it takes me about a week to complete my own website, the investment is well worth it and I am extremely pleased with the outcome. I am ecstatic with the results; I received some assistance from YouTube and an online tutorial. I also decided to put myself to the test by using Java script, and it was well worth the effort. I am also pleased with this project because I am able to learn new coding that I have never encountered before. Overall, I am extremely pleased with the outcome, and I look forward to learning to code in the future.
Comments
Post a Comment