Interactive design-Project 2/Working Web Page

Start From 21.10.2023

2.10.2023 - 16.10.2023/Week 6-Week 8
Kong Cai Yi / 0363862 
Interactive design / Bachelor of Design (Hons) in Creative Media 
Project 2: Working Web Page 



INDEX
  1. Exercise
  2. Lectures: All lectures in Project 1/Prototype Design
  3. Project 2/Working Web Page

INSTRUCTIONS
<iframe src="https://drive.google.com/file/d/131kfj0FzZefJeIRNVXvbSKwWB1m6VhnZ/preview" width="640" height="480" allow="autoplay"></iframe>


Project 2/Working Web Page 
Part 2: Final Design - Creating a Digital Resume/CV Duration
Objective:
In this second part of the assignment, you will build upon the UI design prototype created in Part 1 to develop the final visual design of your digital resume or curriculum vitae (CV). You'll focus on refining the visual aesthetics, enhancing user interface interactions, and ensuring a polished user experience.

Instructions:
  1. Review your static prototype from Project 1 and analyze its layout, typography, color scheme, and imagery.
  2. Use HTML and CSS to translate the design elements into code, ensuring a faithful representation of the original prototype.
  3. Aim for pixel-perfect precision while maintaining responsive design principles to ensure compatibility across different devices and screen sizes.
  4. Upload the file in Netlify and submit the link here. Update your e-portfolio with all the processes documented in the blog

Prototype Design (Project 1):
Fig 2.1 Prototype Design (2.10.2023-Week 6)

1. Creating rectangle and circle shape for background of profile picture:

CSS
.rectangle {
  width: 150px;
  height: 90px;
  background-color:#3F2305;
  position:absolute;
  top:70px;
}

.circle {
  top: 20px;
  left: 50px;
}
Fig 2.2 Create two shape (12.10.2023-Week 7)

2. Make profile picture as circle shape and cover it above circle shape:

CSS
.circle {
  width: 170px;
  height: 170px;
  background:url("me.jpg");
  background-size: cover; 
  border: 15px solid #3F2305;
  background-color:#3F2305;
  border-radius: 50%; /* Makes the square div look like a circle */
  position:absolute;
}
Fig 2.3 Add profile picture (12.10.2023-Week 7)


3. Create display as flex, make two row for filling in all content:
CSS
.aside-left{
min-width: 10%;
min-height:400px;
box-sizing: border-box;
margin-right: -100px;
}

.main{
display:flex;
}

.aside-right {
min-height:400px;
box-sizing:border-box;
padding: 1%;
margin-bottom:300px;
margin-left:100px
}

Fig 2.4 Distribute to two column (16.10.2023-Week 8)


4. Adding all details (Education, Experience, Skills and Project):
HTML
<div class="nav1">
    <ul class="navi1">
         <li><a href="#"><b>Modelling (Hera Label) </b></a></li>
<p><i>currently working</i></p>
        <li class="hi"><a href="#"><b>Content Creator (Hera Label) </b></a></li>
        <p><i>Feb 2023- May 2023</i></p>
<li class="hi"><a href="#"><b>Digital Marketing <br>(Euphony Musical Sdn Bhd)</b></a></li>
<p><i>June 2023- Aug 2023</i></p>
    </ul>
</div>

Fig 2.5 Add Details (16.10.2023-Week 8)

PROJECT 2 FINAL OUTCOME

Fig 2.6 Project 2 Final Outcome (16.10.2023-Week 8)

Fig 2.7 Project 2 HTML-PDF (16.10.2023-Week 8)

Fig 2.8 Project 2 CSS-PDF (16.10.2023-Week 8)


REFLECTIONS
Experience
I created a very classic resume, thinking that a resume should be just one page. However, after several consultations, I discovered that many classmates have opted for a website format, and even the teachers accept this format. I was torn at that time because the teacher mentioned that both formats are acceptable, but a website format is obviously more impressive and attractive. I initially planned to redo my resume in the website format, but time is extremely limited, with the deadline for submission the next day. So, I feel a bit regretful, but I am determined to excel in my final project.

Findings
The biggest challenge of this project is that the content on the left and right sides is different, requiring adjustments to balance the shapes and sizes on both sides. This poses a challenge for me, especially since I have placed them all within a single container. Consequently, ensuring responsiveness becomes a significant challenge as well.

Comments

Popular Posts