Interactive Design - Project 2: Working Web Page

on

09/10/2023 - 23/10/2023 / Week 7 - Week 9
Joey Lok Wai San / 0350857
Interactive Design / Bachelor of Design (Hons) in Creative Media 
Project 2: Working Web Page


TABLE OF CONTENTS


LECTURES
All lectures completed in Interactive Design - Exercises


INSTRUCTIONS

https://drive.google.com/file/d/1zzXnrHL39y2kBn-Hd5YoqvDFZwUugOXv/preview


PROJECT 2: Working Web Page

The objective of this assignment is to transform our static prototype from Project 1 into a fully functional and interactive web page.
  • Review your static prototype from Project 1 and analyze its layout, typography, colour 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.

Analyzing Prototype 
I started by reviewing my prototype from Project 1: Prototype Design; thankfully, my website was formatted more like a website rather than using the traditional resume/CV layout, which looks more challenging to code (I think).

I used headings to organize the content and create a hierarchical structure. Headings with a similar style with minor differences were categorized together to make the process in CSS simpler. E.g. <h3> subtitle and <p> paragraph are used multiple times, <h3> headings have varying font sizes but they all pretty much look the same.

Within the main seven sections, I broke down the layout to plan how to structure and organize the content. For instance, using "display: flex" to get content side by side, as seen in the "Education" and "Experience" sections; in the same section, I also used <ul> unordered lists to insert bullet points.



Fig. 1.1 Analyzing the Prototype, Week 8 (16/10/2023)


HTML based on Prototype Design
To start my favourite part of computer hacking- coding a website, I began by inserting all the content in my CV/Resume into HTML. After compiling the text, I went to icons8.com to search for and download similar icons to my prototype, as well as gather any images required. 

Fig. 1.2 Selecting Open Sans Font, Week 8 (20/10/2023)

Fig. 1.3 Collecting Images and Icons, Week 8 (20/10/2023)

I divided my content into seven sections using the <div> tag, and assigned class attributes to each: the header, about me, education, experience, skills, projects and contact. The <div> tag is easily styled by using the class or id attribute. Throughout the project, I noticed I used a lot of class attributes and only a handful of id attributes. This is especially because using id attributes only allows me to format one element in an HTML document.

Fig. 1.4 Pure HTML, Week 8 (20/10/2023)

This step is crucial to ensure the CSS process is as simple as possible. By labelling the elements with a specific class name, the content will be easier to identify and style in CSS. 

Fig. 1.5 HTML Code, Week 8 (20/10/2023)


Styling the HTML with CSS 
Once I had the content written out in HTML, I went ahead to style the page with CSS code, also known as the part that made me Cry, Sob, Stress (I'm kidding, well not really). 

The 'Introduction' Section
I placed my image in the same <div> container as the text, then used display: flex to get the text on the left and the image on the right, side by side. While all this is fairly simple, the part I struggled the most with was having the image flushed at the bottom of the container.

As shown below, the image had a large space from the bottom of the container, even with the padding-bottom and margin-bottom set to zero. 

 
Fig. 2.1 Space between image and bottom of the section, Week 8 (20/10/2023)

To fix this issue, I went to multiple resources before arriving and referring to this suggestion to make the image flush with the bottom of a div. I have absolutely no idea what position: relative and position: absolute was, but it worked. 

Initially, while the image sits at the bottom of the div, the content was overflowing causing there to be a horizontal scroll bar. I used the inspect tool on Google Chrome to figure out that the left margin and padding were too large, I adjusted them to ensure the image and text of the container were centred.


Fig. 2.2 Content overflowing, Week 8 (20/10/2023)

Fig. 2.3 Image positioned at the bottom of section, Week 8 (20/10/2023)


Fig. 2.4 'Introduction' Section, Week 8 (20/10/2023)

The 'About Me' Section
This part was the simplest and most straightforward to do with barely any styling required.


Fig. 2.5 'About Me' Section, Week 8 (20/10/2023)

The 'Education' and 'Experience' Section
This section was basically what we learned about the box model section, using display: flex again to get elements side by side. One thing I adjusted but not shown below was the line spacing of the text. Previously I used two line breaks <br> to get a bigger spacing between lines, but I realized you can't adjust them. Instead, I adjusted the bottom margin and padding of the text to get a larger spacing between each bullet point.  


Fig. 2.6 Two sections side by side, Week 8 (20/10/2023)

Fig. 2.7 Placing icons and text beside each other, Week 8 (20/10/2023)

Fig. 2.8 'Education' and 'Experience' Section, Week 8 (20/10/2023)

The 'Skills' Section
For this section, I coded a circular progress bar (this was all before I realized we could use a picture of the original progress bar). I struggled with this A LOT. I looked at so many tutorials online, but all of them required Javascript. After crying to my friend, she showed me this video tutorial that coded the progress bar without Javascript, and it was by far the simplest tutorial I've seen on this topic. 


Fig. 3.1 Circular Progress Bar, Week 8 (21/10/2023)

While I was able to centre the numbers according to the demonstration, I was not able to replace them with my icons. To solve this, I learnt from the same friend (my saviour) that I needed to adjust the transform value in order for the icons to be centred in the circular progress bar.

Fig. 3.2 Image in Circular Progress Bar, Week 8 (21/10/2023)

Fig. 3.3 'Skills' Section, Week 8 (21/10/2023)

The 'Projects/ E-Portfolio' Section
I thought coding the progress bar was challenging but DEAR LORD THIS CAROUSEL, I get PTSD just thinking about this. Most tutorials required Javascript, but I tried to code them nonetheless. I followed multiple tutorials step by step but all ended up with a multitude of errors. Below is the one of many attempts at coding a carousel:

Fig. 3.4 Attempt at coding carousel, Week 8 (21/10/2023)

It was only a few days later that I managed to code the responsive carousel slider. I used this to code which uses pure CSS only: Responsive Multiple Items Carousel Slider (credits to my computer science dad for finding this code). Since there was a lot of code for the CSS, I made a new file specifically for it and linked it to the HTML. I still encountered a number of errors but did not screen capture them as I was too caught up fixing the problems. 


Fig. 3.5 Carousell CSS Code, Week 8 (22/10/2023)

Once the carousel was functioning properly, I styled it according to the prototype which included changing the slider icon and adding the border-radius to the images. 

Fig. 3.6 Designing the Carousel, Week 8 (22/10/2023)

My prototype had grey placeholders to maintain a monotone colour scheme. However, I also wanted to keep the original colour of my projects. In order to achieve this, I added a grayscale filter and removed the filter when the image was hovered over.


Fig. 3.7 Grayscale Filter - Images change colour when hovered over, Week 8 (22/10/2023)

Fig. 3.8 'Projects' Section, Week 8 (22/10/2023)

The 'Contacts' Section
For the contact list, I coded the icons and contact texts side by side, following the same code from the 'Education and Experience' section. As shown below, the contacts were not in the right position so I added a red border to find out the spacing issue. There was a large amount of space being taken up by the subheading which made a third column; I put the text in a div and reduced the bottom margin.

Fig. 3.9 Formatting the contact section, Week 8 (22/10/2023)

I also learned to code a contact form, an interactive one in fact. I had some issues with the form growing bigger when text was entered but fixed it by adding a max-width. Clicking the area to enter text turns it a darker grey, and hovering over the 'Submit' button turns it a darker colour.  

Fig. 3.10 Interactive features, Week 8 (22/10/2023)

Last but not least, I followed what we learned in tutorial class on changing the appearance of links. When hovered over, the link becomes a darker colour with an underlined text decoration. I did not want to change the style of the link when it was visited as I thought it would ruin the overall aesthetic of the page.

Fig. 3.11 Interactive contacts, Week 8 (22/10/2023)

Fig. 3.12 'Contact' Section, Week 8 (22/10/2023)


Compatibility with Different Screen Sizes
I used @media to make the webpage responsive by specifying adjustments for screens or windows smaller than 600px. I designed a prototype for a smaller screen size in Figma to get a rough idea of how I wanted it to look. 


Fig. 4.1 Smaller screen size prototype, Week 9 (23/10/2023)

Throughout the entire coding process in CSS, I kept in mind to use % instead of px or pt for font sizes, margins, paddings, etc. This allows the elements to be adjusted instead of staying the same size in px or pt when the screen size is reduced. 
I made certain sections stack on top of each other rather than side by side on a smaller screen e.g. the education and experience section. I used display: block instead of display: flex for the elements to appear on top of each other. A big thanks to Mr. Shamsul for helping me adjust the element widths because some of them were preventing the page from going smaller.

 
Fig. 4.2 Webpage on 598px screen width, Week 9 (23/10/2023)


Final Working Web Page

Fig. 5.1 Final Webpage (23/10/2023)


           Fig. 5.2 Final Webpage - HTML Code (23/10/2023)


           Fig. 5.3 Final Webpage - CSS Code (23/10/2023)

FEEDBACK
WEEK 9
The colour palette and interactive features are good. Reduce the border-radius because the larger is it, the cheaper it looks.


REFLECTION
Experience
My experience with this project was more or less painful, to say the least. I know I have a very low patience level, but my god, coding made me realize I could not sit still to figure out that one line (or even worse one word) could break the entire webpage. As you can see from my experience above, there were a lot of pleas for help. While staring at code burns my eyes, figuring out how to code something and having it work is very rewarding, especially if you get stuck on the error for a long time. I found that taking a break and a few shits helps clear the mind and realize what you did wrong and why the code didn't work.  

Observations
Throughout this experience, I observed that coding is extremely challenging and not something you can do in one day unless you're very patient and intelligent on the topic (which I am neither). I have gained a lot of respect for web developers now.

Findings
I found that watching tutorials and looking through suggestions on how to code something helps you learn a lot. If you want to be extra and do something that was not taught in class yet, the internet is the best place to go. I also found that interactive features are the most challenging to code but give a very rewarding experience for the user and enhances the overall experience of the webpage.

Comments

Post a Comment