6/25/2024
ALTAIFI, LEEN MAAN A (0367698)
Bachelor of Design (Hons) in Creative Media, Taylor's University
Interactive Design
Table of Content
1. Lectures
2. Instructions & Tasks
3. Reflections
1. Lectures
Refer to Interactive Design: Exercises
2. Instructions & Tasks
Module Information Booklet
Project 2
The objective of this assignment is to transform your static prototype from Project 1 into a fully functional and interactive web page.
My prototype from project 1 is essentially divided into 4 main sections:
 |
| Fig. 1.2: Projects Section |
Respectively, I divided my html code into sections so it would be easier for me to work with, as well as it functioning as the destinations for the navigation bar. The divided sections are: Profile, Skills, Projects, and Contact Me.
 |
| Fig. 0: Html Code |
I first laid down the layout of the html structure to have the backbone ready before working on the CSS sheet, that includes headers, divs, columns, and rows. After that, I worked with the HTML and CSS code simultaneously trying to match my original prototype.
 |
| Fig. 1.5: Html progress 2 - Adding Background |
 |
| Fig. 1.4: Html progress 1 - Basic Layout |
Here, I am styling the html code with CSS, following the original prototype's design. I tried to ensure they are alike pixel by pixel.
 |
| Fig. 1.6: Html progress 3 - Styling with CSS |
 |
| Fig. 1.7: Html progress 4 - Adding Navigation Bar |
The section where I have my personal information was particularly tricky; inside the div where I have my image, there are the icons and my social information, and it was challenging to align all of it perfectly whilst it being responsive. It took a huge chunk of my time due to all the trial and error, because once I think I have it all aligned, I try it in a different screen width, it turns out it is only perfectly aligned in my screen width, so I attempt to fix it all over again.
 |
| Fig. 1.9: Html progress 6 - Aligning |
 |
| Fig. 1.8: Html progress 5 - Adding Icons |
I made the mistake of fully finishing the website design without considering the responsiveness aspect whilst coding, so when I inspected my website on chrome in a mobile device view, I realized I have to reconsider my code. I went over the CSS sheet, and changed all the sizings from pixels to percentages, and made all the height into ‘auto’ size, that way, it would be responsive no matter what width the screen is. To prevent from the content becoming too small when the screen is minimized, I made sure to add ‘min-height’ to the content, so that it wouldn’t get smaller than the size I had set.
 |
| Fig. 1.11: Responsive Layout process 2 |
 |
| Fig. 1.10: Responsive Layout process ` |
This is the process of correcting my mistake and trying to get the content to be responsive without having to ruin the full website view and altering too much of the original code.
 |
| Fig. 1.12: Responsive Layout process 3 |
 |
| Fig. 1.13: Responsive Layout process 4 |
I've stumbled upon a problem when I resized the contact form. As you can see on the right, the columns are way too small in width. To fix this, I realized that I had unnecessary padding from left to right, which solved the problem.
 |
| Fig. 1.15:Responsive Layout process 6 |
 |
| Fig. 1.14: Responsive Layout process 5 |
And finally after making all the sections responsive, the webpage is looking decent.
 |
| Fig. 1.17: Layout Design Upper Section |
 |
| Fig. 1.16: Layout Design Lower Section |
Final Website Submission
 |
| Fig. 1.18: Screen Grab of Final Deployed Site |
Final Website Submission Link: here
3. Reflections
Working on this project was very helpful in solidifying my html and css coding skills; I feel like I learned a lot with trial and error and persistently trying without giving up.
Trying to replicate my prototype design into an interactive working website with coding was very challenging to say the least, I know understand how developers feel when given a complicated design by designers :D. Nonetheless, despite it being challenging, I didn’t give up on replicating the original design pixel by pixel, as well as making it responsive to other devices’ sizes.
This was a necessary head start to the final project, so now I am aware of which mistakes not to repeat, and hopefully the process of coding the final project wouldn’t be as rocky as this one was, since I know what to do and how to have better coding practice.
back to top
Comments
Post a Comment