Interactive Design Project 2 - Working Web Page

on

19th June - 29th June 2024 (Week 9 - Week 10)

Sin Jun Ming 0364638

Interactive Design / Bachelor of Design in Creative Media / Taylor's University

Project 2 - Working Web Page
INSTRUCTIONS


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. We need to apply our knowledge of web layout class to create a working website that closely aligns with our original prototype. We will
review our static prototype from Project 1 and analyze its layout, typography, color scheme, and imagery.

Requirements:
  1. Use HTML and CSS to translate the design elements into code, ensuring a faithful representation of the original prototype.
  2. Aim for pixel-perfect precision while maintaining responsive design principles to ensure compatibility across different devices and screen sizes.
  3. Upload the file in Netlify, update the e-portfolio with all the processes documented in the blog, and submit the link as a submission.

Part 1: Desktop Viewport

First, before writing the HTML and CSS code, I opened Figma to review the static prototype from Project 1.

Fig 1.1 Figma prototype file

Based on this prototype, I started to write the code in Adobe Dreamweaver. The first step to do is to settle the head section including title, favicon, font links, css file etc. 

Fig 1.2 Head section of HTML

For the header of my webpage, I added a logo on top left, which is a wordmark I created in a task of Advanced Typography, I really like it so I intended to use it here, for better visualization to differentiate the white text on my webpage, I applied grey color on the logo.


Fig 1.3 My logo

The favicon is also a logo derived from my wordmark, it is used to display in a very small available space. 

Fig 1.4 My favicon

I wrote the HTML code based on the prototype, and also the CSS code exactly everything the same shown in Figma. 

Fig 1.5 Header of the webpage

Fig 1.6 CSS code

In the navigation bar, I added hover and visited effect on it using CSS code like bottom-border with transition. 

Fig 1.7 Navigation bar

Fig 1.8 Personal details

For the content below, I used a container to store them and separate them into two columns, and inside both columns, I created new container class because there is information needed to be separated in both columns. 

Fig 1.9 A container inside a container

Fig 1.10 IDs link to navigation bar

The full HTML and CSS file can be seen below, I will not show very detail progress because it will take a lot of space here. 

Fig 1.11 The containers' columns

For the footer, I used <a> to wrap the icons I found on FontAwesome, so that when users click on the social media icons, they can be linked to the page. 

Fig 1.12 Footer with icons that can be linked

I also added my logo down below on my web page, it is also clickable, it will take the user back to the top of web page when it is clicked. 


Part 2: Mobile Viewport

After settling down the desktop viewport, I started to do the layout for mobile viewport. I selected the size of iPhone 12 Pro, 390x844px.

Since my main content has two columns, to provide better visual experience to the users, I combined the two columns into a single column and justify the content in the center.

Fig 2.1 CSS code for mobile viewport

I reduced the font sizes for mobile viewport and use a new background image which is longer in height. I remained the navigation bar function in mobile viewport also.

Fig 2.2 Mobile viewport with single column

The content is aligned at the center, for better visual experience. For the footer, the icons are remaining the same but with smaller size and wider gap.

Fig 2.3 Footer with icons



HTML file:

CSS file:


REFLECTION

Overall experience is cool, although it could be hard sometimes to figure out which properties to use in HTML and CSS to achieve the desirable result. To be honest, I faced a lot of problems doing this task, I do not know whether it is the browser problem or the Adobe Dreamweaver problem, like the webpage shown in browser can be different sometimes even I did not change the code. Other than that, I think coding is fun and playful because I get to deploy a website done all by myself onto the internet.  


Comments

Post a Comment