Interactive Design Project 2 | Working Web Page

03.10.2023 - 24.10.2023 | Week 6 - Week 9

Zoë Lena-maria Nelson | 0364991 | Rotterdam University Of Applied Science

Interactive Design | Project 2: Working Web Page

---

Requirements

Review and analyze the provided design prototype's layout, typography, colour scheme, and imagery.

Action Steps:

1. Review and Analysis: Thoroughly examine the provided design prototype to understand its layout, typography, colour scheme, and imagery.
2. HTML and CSS Implementation: Translate the identified design elements into HTML and CSS code to create a web page that faithfully represents the original prototype.

Detailed Description:

1. Review and Analysis:

• Carefully inspect the design prototype to understand its visual elements, including the arrangement of elements on the page, font styles, font sizes, colour choices, and the use of images.
• 
  

2. HTML and CSS Implementation:

• Create an HTML document that mirrors the layout of the prototype.
• Utilize appropriate HTML tags to structure the content, ensuring that it aligns with the design's layout.
• Apply CSS to replicate the design's typography, including font family, size, weight, and styling.
• Match the colour scheme precisely by specifying the same colour values in CSS.
• Integrate any images from the prototype as needed, ensuring they are displayed in the correct positions and sizes.
• Pay attention to responsiveness and adapt the layout if necessary to ensure it looks and functions correctly on different screen sizes (e.g., desktop, tablet, mobile).

Outcome:

The final result should be a web page created using HTML and CSS that faithfully reproduces the original design prototype's layout, typography, colour scheme, and imagery, ensuring a consistent and accurate representation.

---

Project 2

Figure 1.

Layout:

The resume has a simple and clean layout. It is divided into two columns: contact information and skills on the left and education and experience on the right. The sections are clearly separated by white space and headings.

Typography:

The typography is consistent throughout the resume. The headings are in a bold font, while the body text is in a regular font. The font size is large enough to be easily readable but not so large that it is overwhelming.

Color scheme:

The colour scheme is also consistent throughout the resume. The primary colour is black, and the secondary colour is white. The headings are in a contrasting colour, such as blue or green.

Imagery:

The only image on the resume is the candidate's name and contact information at the top. The image is small and does not distract from the rest of the resume.

Finale version:

Figure 2.

The link to the site: zoenelson-project2.netlify.app

Reference:

Figure 3.

Summary

Figure 4.

Figure 5.

I've structured the HTML code quite neatly, with appropriate nesting of headings and content. In my project, I've used external links to Google Fonts and a separate CSS file called "style.css." I've organized the webpage into various sections such as "About Me," "Education," "Experience," "Skill Set," and "Projects," and wrapped it up with a "Contact" section in the footer.

On the CSS front, I've ensured that the CSS file is correctly linked to my HTML file. To give my webpage a polished look, I've defined styles for different elements, including headings, fonts, and backgrounds. I've initiated a responsive design approach using media queries to make it more user-friendly. However, please note that I need to fill in the content for smaller screens, which I've indicated with the empty @media (max-width:992px) section. I've specified fonts and styles for various elements like headers, images, and the footer to personalise the look and feel. My intention was to create a simple and clean design.

Figure 6.

Figure 7.

Nonetheless, there's room for improvement. I must ensure that my webpage is fully responsive for all screen sizes, and I need to fill in the content for smaller screens. Additionally, I should double-check that all file paths are accurate for image resources and external links to ensure a smooth user experience. In summary, my code is functional for building a personal webpage, but there's still some work regarding responsiveness and content display across different devices.