Interactive Design: Project 2
22.5.2023 - 11.6.2023 / Week 8 - Week 10
Sylvia Lau / 0356130
Bachelor of Design in Creative Media
Interactive Design: Project 2 / Working Web Page
Final Outcome using HTML and CSS:
FEEDBACK
Sylvia Lau / 0356130
Bachelor of Design in Creative Media
Interactive Design: Project 2 / Working Web Page
INSTRUCTIONS
Project 2: Working Web Page
In this task, we were assigned to transform our static prototype from Project
1 into a fully functional and interactive web page. We also need to apply our
knowledge of web layout class to create a working website that closely aligns
with our original prototype.
Reviewing our static prototype from Project 1 and analyzing its layout,
typography, color scheme, and imagery. Use HTML and CSS to translate the
design elements into code, ensuring a faithful representation of the
original prototype.
The aim is for pixel-perfect precision while maintaining responsive design
principles to ensure compatibility across different devices and screen
sizes.
Week 8 & 9:
At first, I tried using the knowledge from the previous class to do an attempt
of my prototype, but it came out as a disaster. So, without struggling too
much, I searched for tutorials from Youtube as a guide for my project since I
was still unfamiliar with the code.
Figure 1.1 Original Prototype
Figure 1.2 Changes
Final Outcome using HTML and CSS:
Figure 1.3 First page of the carousel
Figure 1.4 Second page of the carousel
I made some changes to the prototype in Project 1, for example, the icons at
the navigation bar, I'd changed to words as I think it was easier to adjust
by just typing out the words. From the tutorial video, it taught me how to
create a responsive navigation bar and apply a hamburger icon. I added a
hover effect on the buttons so that the users could know where they were
selecting.
The first attempt of the buttons was rounded buttons. After getting
feedback, I changed them to square buttons because the buttons on my whole
page were in a square design.
After I did the navigation bar, I continued with the next part, which was
the carousel slider. From my prototype, I wanted to make it slide over but I
was not sure how to complete it by using the code. The suggestion that got
from Mr. Shamsul, he suggested me using Bootstrap to complete this because
the code was complete and I could just copy the provided code. I also found
another tutorial on how to apply the code in Dreamweaver. The changes I made
in this section were the text layout, I moved it to the middle and made the
background dimmer because there would be a contrast with the white text.
Figure 2.1 Original Prototype
Figure 2.2 Final Outcome using HTML and CSS
The second part was the category section. From the prototype, I planned to
do a slider where the user could click the right button to see more
selections. But with my limited skill, I decided to change it to a button at
the top right for users to shop more categories.
Week 10:
Figure 3.1 Original Prototype
Figure 2.2 Final Outcome using HTML and CSS
I struggled a lot while doing this part. I tried typing the code and
figuring out how to arrange the images according to the prototype layout,
but I failed to create that. So, without spending too much time struggling,
I searched for tutorials and found one video teaching the layout at the
right, which was the four images.
I decided to remove the left image and replace it with text. From the
prototype, I only had two lines of text and it would be a lot of empty
spaces. I went back to the Wayfair website and copied the text which was
related to the content to fill up the spaces.
Besides, I also added a hover effect for the images. When the users dragged
the pointer to the images, it would show the image in a dimmer appearance. I
tried adding the text on the images, but the text didn't show on the images.
Figure 3.1 Original Prototype
Figure 3.2 Final Outcome using HTML and CSS
I reused the code that I typed in the category section because the layout
was similar. I moved the title to the middle since the category title was
also in the middle.
Figure 4.1 Original Prototype
Final Outcome using HTML and CSS:
Figure 4.2 First page of the carousel
Figure 4.3 Second page of the carousel
Figure 4.4 Third page of the carousel
For this part, it was also a carousel slider. But it was challenging for me
to arrange the content in the box, so my final decision was to make them
into images, so it would be easier for me by just inserting the images.
After applying the code from Bootstrap, there was a problem which was the
arrow couldn't be seen and I still couldn't find a way to change the arrow
buttons. Other than that, I also added a shadow effect on the box.
Figure 5.1 Original Prototype
Figure 5.2 Final Outcome using HTML and CSS
I had adjusted the size of the image and I couldn't make it according to the
prototype. Other than that, I did try doing the transparent effects on the
text box, but I failed to do so. I decided to make the whole image a dimmer
appearance to make a contrast with the text. I also changed the "shop
all" button to square like the other buttons before.
Figure 6.1 Original Prototype
Figure 6.2 Final Outcome using HTML and CSS
The layout of this section was also the same as the category, but just
removing the hover effect, as it was just a piece of information for users
to know.
Figure 7.1 Original Prototype
Figure 7.2 Final Outcome using HTML and CSS
In the footer section, I arranged the text and layout again, which I think
would be convenient for me to code. I found a tutorial video that taught me
how to apply the social media icon and also create the form-filling section.
Final Submission:
Link to the website:
Overall, there were still a lot of things that I need to improve. For
example, some of the parts in my website were not responsive, because I was
still not sure how to type the code out. Besides, the spacing between each
section is a bit too tight, which I think it make the website looks too full
and packed. The margin of the whole website is also not consistent.
From this particular task, I struggled a lot and learned a lot. Although the
outcome was not perfect as the prototype, I was satisfied with the outcome.
From this experience, it will definitely benefit me in the final project.
Good. The button at the navigation bar can change to square button as the rest of the buttons are also square.
Comments
Post a Comment