Interactive Design | Project 2
17.6.2024 - 30.6.2024 || Week 9 - Week 10
Yong Zhen Xing || 0359473
Interactive Design || Bachelor of Design (Honours) in Creative Media / Taylor's University
Project 2 | Working Web Page
Instructions
Working Web Page
In this second project, we needed to take our already created prototype using figma/Adobe XD and turn into a proper web page by using HTML and CSS. We needed to ensure that it looks as close as the original prototype as possible while maintaining compatibility across different platforms.
2. Process 
fig 2.2, Adding Slider (27/6/2024) 
fig 2.3, Hover Effect (28/6/2024) 
fig 2.4, Adding Grid (28/6/2024)
fig 2.5, Adding Grid 2 (28/6/2024) 
fig 2.5, Adding Grid 3 (28/6/2024)
fig 2.6, Adding Grid 4 (28/6/2024) 
fig 2.7, Coding for 'Projects' and 'Skills' (28/6/2024) 
fig 2.8, Rearranging Elements (28/6/2024) 
fig 2.10, Other Devices Optimization (28/6/2024)
fig 3.2, Final Working Webpage [Phone View] (28/6/2024)
Observations
Through looking and experimenting with many new elements in HTML and CSS, it made me realize how complex coding can really be. While I might not remember every element in both HTML and CSS, through sharing and learning coding from my classmates and lecturer, it has help me understand and learn more about coding. I have also noticed understanding how code works is way more important then simply just knowing what different elements does.
Findings
This project taught on making a webpage through HTML. Throughout the webpage making, I needed to recall and look for new elements to truly follow my old prototype. This helps me to explore new and different elements of HTML and CSS that I would otherwise not know.
Yong Zhen Xing || 0359473
Interactive Design || Bachelor of Design (Honours) in Creative Media / Taylor's University
Project 2 | Working Web Page
Contents
1. Lectures
2. Instructions
1. Prototype
2. Process
Final Outcome
3. Reflection
Note : Lectures are all documented and links to my exercise page.
Instructions
Working Web Page
In this second project, we needed to take our already created prototype using figma/Adobe XD and turn into a proper web page by using HTML and CSS. We needed to ensure that it looks as close as the original prototype as possible while maintaining compatibility across different platforms.
1. Prototype
Fig 1.1 shows my original prototype for the web page design. Just from looking at the design, I can already tell that making it into HTML was not going to be easy at all but I will definitely try my best.
fig 1.1, Prototype from Project 1 (19/6/2024)
2. Process
First I begin by adding contents from my original prototype first.
fig 2.1, Adding Content (27/6/2024)
Next, I turn my attention to the project section. I couldn't find a way implement a slider like I did in the original prototype to HTML, so I decided to use a scroll system instead.
Here I added hover effect for the footer of my webpage (fig 2.3). Then I rearranged both the text and also logos using grid (fig 2.4). I also reused back the same font from my prototype which are Rum Raisin and Abel.
The 'About Me' section took some time to get it right. For this part, I used grid for my text and icons in 'Interest' as well as flex to make 'Languages' in the same horizontal space. As for 'Experience' and 'Education', it was a just another grid to arrange it following my prototype.
The 'Skills' section took me the longest part as I couldn't get it to line up correctly, but after some experimenting with the code, I did end up creating what I wanted. As for the slider bar to show my skill level, I used an image by recreating it in Illustrator because I wasn't really sure how to replicate that. Fig 2.7 shows the HTML file for 'Projects' and 'Skill' section.
For my 'introduction' section I used flex with a simple white border line to separate the text.
In my navigation bar, I used elements like sticky to make it follow the page. I also made my name float left and menu float right as per my prototype. Then I added a hover effect (show in fig 2.9) as well as a on click effect to both the menu and my name.
fig 2.9, Navigation Bar (28/6/2024)
Lastly, I added optimization for other devices.
Final Outcome :
Link : View my Web Page here!
fig 3.1, Final Working Webpage [Desktop View] (28/6/2024)
To say this was the worse experience I had in an assignment, it's quite an understatement. This assignment reminded me of additional mathematics back in high school, and I absolutely despise it. This task really for me is just troubleshooting different elements until I get it right and I didn't like anything about it. There were just so many times I got absolutely frustrated with trying to get something simple working. It's clear to say my experience for this project in particular is simply terrible.
Observations
Through looking and experimenting with many new elements in HTML and CSS, it made me realize how complex coding can really be. While I might not remember every element in both HTML and CSS, through sharing and learning coding from my classmates and lecturer, it has help me understand and learn more about coding. I have also noticed understanding how code works is way more important then simply just knowing what different elements does.
Findings
This project taught on making a webpage through HTML. Throughout the webpage making, I needed to recall and look for new elements to truly follow my old prototype. This helps me to explore new and different elements of HTML and CSS that I would otherwise not know.
Comments
Post a Comment