20/Sep/2022 - 27/Nov/2022 (Week 4 - Week 5)
Kim MinJoon (0353248)
Bachelor of Design (Honours) in Creative Media / GCD61004 / Taylor's
University
Assignment 2 & 3
Instructions
In assignment 2, we were told to make a working landing page from the
designs of assignment 1. And with all of the exercises done to help us
through, I started workingon the landing page.
I first started with the header and it was really difficult. I searched up
many different ways to put the header separated from different div's, and a
logo in the middle and nothing was really going well. But in the end I got
it to work and the next part was the gender section.
|
|
Figure 1.1: Header Design |
I was thinking of just making it like the illustrator design, where all of
the components were all near to each other but when I made the code, it
was very far from each other and to be honest, it looked a lot better in my
opinion. However, I wanted the gender section to follow through every time I
scrolled and I searched it up for quite a while and followed many of the
instructions given on Youtube and eventually got it to
work.
|
|
Figure 1.2: Gender Section Design |
With the header and and the other things done, all I had left was the page
layout. This was pretty simple as it was pretty much like the exercises we
did in the class. However, there was the carousel and that was pretty new to
do. For the carousel, I downloaded some of the 4k photos that I could find
online and I resized them manually to the same size so that the carousel's
dimensions wouldn't be messed up when scrolled through. Then I just followed
a guide on how to make a carousel and luckily it worked.
|
|
Figure 1.3: Carousel Design |
Then, finally the footer, I didn't want to waste too much time and I didn't
really think that it was going to effect the page too much so I just
searched up on how I can make a footer on Youtube and followed the
guide.
|
|
Figure 1.4: Footer Design |
Link to Assignment 2 -
here
For the final assignment, I had to make 4 more different sub-websites that
is responsive to the landing page. So I decided on going with a support
page, Log in page, Collection page #1 and Collection page #2 and just for
fun, an error page.
By following many of Youtube tutorials and searching up different
codes on Google, I finally managed to get the codes right.
I didn't want to spend time making adjustments on CSS for each html so
I just made a separate CSS that all the other HTMLs can direct
to.
Website Codes
Figure 2.1: Index Code
Figure 2.2: Log-In Code
Figure 2.3: Customer Service Code
Figure 2.4: Fall Collection Code
Figure 2.5: Back 2 White Collection Code
Figure 2.6: Error Code
Link to Final Website - here
Link to Website Files - here
Reflections
Experience
During the entirety of the assignments that were given to us, I think that this was definitely the most fun and the most challenging part for me. It was not something like we have done before and this really required a real dedication and sacrifice of time to get this done. I think that I have learnt truly a lot of things when doing the final project and I am quite glad how it turned out in the end.
Observations
For this, I think that there was plenty of time left for me to finish off the assignments, but I wanted to get this done as quick as possible because I have chosen quite a modern design and I wanted to get this as accurate as possible to how I imagined it to be so I think that I kind of rushed it so that I could get this out of the way.
Findings
The fact that I had to make 4 more websites that corresponds to the index was a real shock for me because I had spent way too much time on the index alone, and I thought that this would've taken me ages, however, because the layout of the thing was already made, like the header and the footer, it was really easy to breeze through the other things for the other web pages.
Comments
Post a Comment