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
- Exercise
- Lectures: All lectures in Project 1/Prototype Design
- 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 DurationObjective:
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.
4. Adding all details (Education, Experience, Skills and Project):
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.
Instructions:
2. Make profile picture as circle shape and cover it above circle shape:
- Review your static prototype from Project 1 and analyze its layout, typography, color 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.
- 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)
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)
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
Netlify Link:https://kongcaiyi-project2.netlify.app/
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
Comments
Post a Comment