12.06.2024 - 29.06.2024 (WEEK 8-10)

Koh Xin Yee / 0363349 / Bachelor of Interactive Spatial Design (Hons)

Interactive Design

Project 2

To do:

• Objective: transform static prototype from Project 1 into a fully functional and interactive web page, apply knowledge of web layout class to create a working website that closely aligns with original prototype

Progress:

I exported out the icons and images used in my figma prototype into png. files in order to insert them into the html code easily. The images are all located in the file name "images" to ease myself in locating the files while coding. 

I started translating my design into html code by first dividing the whole content into different sections, such as the home section, intro section, skills section, experience section and footer section. 

For the hero section (class="home" in my code), I first thought of exporting the profile image along with the wordings "INTERACTIVE SPATIAL DESIGNER" together into a png file, so it will be much more easier as it requires less coding, but I don't want the text on the image to be too small when the screen size of the device is reduced, so I had to code them one by one in order to make the design responsive. 

I started coding my CSS file simultaneosly, to make sure that the outcome turns out to be similar to my prototype. 

As style references, I use the CSS layout and typography code from the dev mode in figma, and change them accordingly so that it fits the website I'm coding.

For the Intro section, I had to divide it into left and right container, as in my prototype design, the sections are left and right, here and there. Coding them seperately is for me to better control the alignment of the divs and ensure that the left and right side won't overlap each other, even in the responsive design. 

For the skills bar in Technical Skills section in my protoype, I was using boxes to show the level of proficiency in various skills. In order to present this in HTML code, I'm using table and inserting classes named "filled" and "empty", style and arrange them accordingly.

The footer design is quite easy as I only need to insert the icon images, and <a> links, then style them in CSS to have hover effects etc. I also added  "a:visited:hover" style so that after the link is visited, when the it is hovered over the colour will also change. 

Responsive Design

After the static website is ready, I use media queries to achieve the responsive design of my webpage. The main thing I do is to ensure that my webpage design is still viewable in various screen sizes.

There are 3 media queries I've included in my CSS: (max-width:1040px), (max-width:880px) and (max-width:532px).