19 Jun 2024 - 29 Jun 2024Shim Yi Xun || 0363292
Bachelor of Design (Honours) in Creative Media
Interactive Design GCD 60904 Project 2 - Working Web Page
Content Jumplink
Instruction
Project 3 / Working Web Page
Objective:
Transform the static prototype from Project 1 into a fully functional interactive web page. You'll use your knowledge of web layout to create a working website that closely integrates with the prototype you designed.
Requirements:
1. Review your static prototype from Project 1 and analyse its layout, typography, colour scheme and imagery.
2. Use HTML and CSS to translate the design elements into code, ensuring a faithful of the original prototype.
3. Aim for pixel-perfect precision while maintaining responsive design principles to ensure compatibility across different devices and screen sizes.
4. Upload the file in Netlify, and update your e-portfolio with all processes documented in the blog. Submit the link as a submission.
Since I have already designed my digital resume on Project 1, so I directly move on to Adobe DreamWeaver to start my coding. I first opened the HTML and CSS files separately because this is a requirement of Mr. Shamsul, mainly to prevent the two codes from being mixed together.
Process of coding HTML:
Next is CSS coding, which is also the most struggling part.
Following the design of my resume prototype, there is a line with a star in the middle of the career part. Not only that, the star was positioned in front of my portrait.
I didn't want to give up this design, so I spent a lot of time thinking and figure how to do it. Ultimately, my solution was to turn this element into a PNG, and I set it as the background image. Fortunately, the result somewhat met my expectations?
Lastly was the artwork part. I slightly changed the design of it. The initial design was four artworks, but I reduced them to three and lined them up in a row.
Link to view for the website:
Feedback
WEEK 10:
General
-
Specific
-
Reflection
Although this was not the first time creating a website, it was still challenging. In Project 2, I became more proficient in CSS, especially Flexbox, in order to design this layout. This endeavour gave me a thorough understanding of the entire spectrum of website development, from initial design prototypes to complex coding. As a result, my proficiency with HTML, CSS, and Figma has improved significantly, making me more confident in my skills.
.png)
Comments
Post a Comment