Interactive Design - Project 2 - Working Web Page
15.05.24 - 30.05.24（Week 9-Week10）
Qian Guoyi (0369462)
Interactive Design/ BDCM
Project 2 - Working Web Page
INSTRUCTIONS
Work requirements：
The objective of this assignment is to transform your static prototype from Project 1 into a fully functional and interactive web page. You will apply your knowledge of web layout class to create a working website that closely aligns with your original prototype.
Review your static prototype from Project 1 and analyze 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.
Aim for pixel-perfect precision while maintaining responsive design principles to ensure compatibility across different devices and screen sizes.
Upload the file in Netlify, update your e-portfolio with all the processes documented in the blog, and submit the link as a submission
Review your static prototype from Project 1 and analyze 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.
Aim for pixel-perfect precision while maintaining responsive design principles to ensure compatibility across different devices and screen sizes.
Upload the file in Netlify, update your e-portfolio with all the processes documented in the blog, and submit the link as a submission
My initial design aimed to use green and yellow as the color scheme for the interface, creating a scrollable long layout. Overall, I intended to divide the interface into two sections, with a line in the middle separating the content into left and right parts. I designed the interface with alternating colors, using a green section in the middle to separately elaborate on "About Me," "Education," and "Experience." On the left side, I also included a section for my skills.
But Mr. Shamsul thought that my interface was divided into five parts, which looked a bit messy. He suggested that I could design the resume interface more concisely, as a neat interface is more important.
So, I reformatted my profile, omitted the cover content on the first page, and started directly with the interface design, using a line to separate one-third of the way, dividing the whole into left and right parts, which made the resume more concise.
Fig1 Figma Sketch
I made some adjustments based on the original one and divided the overall interface into two sections, which can make the resume interface more tidy.Html:
Css:
Netlify link:
评论
发表评论