Interactive Design GCD60904/Project2

2106/2024 - 28/6/2024 

Week 09 - Week 10

Wang Yifan (0368363) / Bachelor Of Design In Creative Media

Interactive Design / Project 2 | Working Web Page

 

Table of content

Lectures

Instructions

Project 02 – Working Web Page

---

LECTURES

Week 9 / Box Model Layout in CSS

Week 9 Slides

---

INSTRUCTIONS

Module Information Booklet

---

PROJECT 2

Part 1: Working Web Page (20%)

Task Instruction 

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.

Original Prototype Design 

At first, we were instructed to analyze the initial prototype design we created in project 1. Below is the original prototype layout I did in the previous project along with colours, and typefaces. 

Fig 1.1 Original prototype design, Week 6

my resume/ CV

Colour Scheme

Fig 1.2 Colours, Week 10

Typeface

Fig 1.3 Chosen typefaces,Week 10

At the top of the page I added a navigation bar to the resume using the navigation bar I learned in class and added interactive effects in css- I did not set the navigation bar to be fixed, I think a fixed navigation bar would interfere with the presentation of the resume.

Fig 1.4 BAR

Translating to HTML

Fig 2.1 Modified Codes, Week 10

Fig 2.2 Modified Codes, Week 10

To start the translation, I referred to the webpage design exercise we did in class the same week. This provided a solid foundation for understanding basic design principles. I made adjustments to the original design, including changes in color, typeface, positioning, and size, to enhance aesthetics and usability. I tested each modification to ensure the final result met expectations and effectively conveyed the intended message. This process resulted in a webpage that meets design standards and reflects my personal style.

Fig 2.3 Adding a hyperlink to the image, Week 10

In the "Contact" section.
At first, clicking on my profile image in the original prototype design would navigate to the 'About' page. I then added a link to the image and implemented a color change effect on hover. The color of my profile image was adjusted using a background fill layer and blending mode in Photoshop.

Fig 2.3  INTRO ,CONTACT

Final Outcome of Working Web Page

Fig 3.1 Final webpage fullscreen, Week 10

Netlify Link: https://sweet-khapse-6dae1b.netlify.app

CSS PDF

HTML PDF

Feedback

No feeback received for this project.

Reflection

I was initially very apprehensive about working on this project after completing Project 1, as I doubted my ability to succeed. Coding has always been a challenge for me, and I felt particularly unsure about this module. However, I dedicated myself to understanding all the information and knowledge taught by Mr. Shamsul.

In this project, I applied what I learned in class and conducted additional research to ensure my work matched my prototype. Completing the project brought me immense joy and satisfaction—I couldn't believe I had achieved it!

Looking ahead, I am determined to continue improving myself, especially with the final project still on the horizon. This project has been a tremendous learning experience, and by tackling practical tasks, I have gained much more confidence in my abilities.