Interactive Design - Project 2 / Working Web Page
5.9.2023 - 3.10.2023 (Week 4 - Week 6 )
Chong Hui Yi / 0363195
Interactive Design / BDCM
Chong Hui Yi / 0363195
Interactive Design / BDCM
Project 2 / Working Web Page
INSTRUCTIONS
<iframe src="https://drive.google.com/file/d/19K7sai7Rdfy3_GxqSVJlxpkQ_RCjyOUe/preview" width="640" height="480" allow="autoplay"></iframe>
Project 2: Working Web Page
Part 2: Final Design - Creating a Digital Resume/CV
"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."
I documented the font choices, font sizes, spacing, colors, and
other details for my previous prototype to make it easier for future
reference.
Fig. 1.0 Prototype, week 6 (3/10/2023)
.png)
Fig. 1.1 Selecting Antic Didone & Raleway Fonts, week 8
(23/10/2023)
I created a new HTML and CSS file, dividing it into different
sections using 'div.' There are mainly seven sections (referred to
in Fig. 1.2) which are header, profile, education, skills, projects,
experience, and contacts.
.png)
Fig. 1.2 Basic structure, week 8 (23/10/2023)
I started by working on the HTML and CSS for the header and profile
sections first before proceeding with the others. I was worried that if
I completed all the HTML at once, I might discover many errors later.
The first challenge I encountered was not knowing how to code to achieve
the header background with the title misalignment. The second difficulty
was figuring out how to place my portrait image behind the 'PROFILE'
text. I spent a lot of time searching online tutorials to solve these
issues.
# I actually made a mistake here. If I want to create a responsive
website that works on different devices, I should have used relative
units like %, em, rem, etc., instead of using 'pt.' Unfortunately, I
only realized this issue near the end of my project.
(TT ^ TT)
Fig. 1.3 Header & Profile CSS, week 8 (23/10/2023)
Fig. 1.4 shows the current result after completing the CSS, comparing
it to the previous state.
.jpg)
Fig. 1.4 Before & after, week 8 (23/10/2023)
In the education section of my prototype, there was a timeline
running between the dates and schools. However, I didn't know how to
code it, so I decided to remove the line. Although it looks somewhat
empty, I can live with it.
Fig. 1.5 Education section, week 8 (23/10/2023)
I downloaded icon images from Figma because it was difficult to
find identical icons on other websites that were also
colour-customizable.
Fig. 1.6 Icon images downloads from Figma, week 8
(23/10/2023)
I learned how to create a progression bar for the 'SKILLS'
section from the internet, and I found it quite interesting.
Initially, I thought I had to create rectangles manually,
but it turned out not to be that complicated. I struggled
for a while on how to position the content and title blocks
within the 'SKILLS' section. I was fixated on matching the
width and height in pixels according to the prototype, which
caused some confusion, but I later adjusted my approach.
.jpg)
Fig. 1.7 Skills section, week 8 (23/10/2023)
I realized that my skills weren't sufficient to achieve
the complex animation effects I wanted in my prototype,
so I had to simplify by removing some of them, leaving
only three images.
Fig. 1.8 Projects section, week 8
(23/10/2023)
For the content in the 'EXPERIENCE' section, I used
an unordered list and then removed the bullet points
using 'list-style: none'
Fig. 1.9 Experience section, week 8
(23/10/2023)
Fig. 2.0 Contacts section, week 8
(23/10/2023)
Refining Units in My CSS: Switching from
pixels to em & %
I began the process of changing my pixel units
to relative units. Additionally, I altered the
'PROFILE' section by switching from using a
separate div with an image as a background to
directly adding a background image within the
'PROFILE' title div. This approach made it
simpler.
Fig. 2.1 Switching from Inserting
<img> to using background
images, week 9 (24/10/2023)
In the 'SKILLS' section, I changed the
method for creating the background.
Previously, I was using 'position:
absolute,' which I didn't fully
understand, and it was challenging to
control.
Fig. 2.2 Simplifying title
background creation, week 9
(24/10/2023)
Different Devices
Next, I need to create CSS to
ensure that the webpage functions
properly on different devices. In
Fig. 2.3, before making adjustments,
the webpage's appearance on other
devices was very poor, with text
cramped together, elements
overlapping, and various other
issues.
Fig. 2.3 Challenges when screen
shrinks, week 9
(24/10/2023)
I changed the 'display: flex' to 'display: block,' causing the elements to stack vertically. This helps ensure that the content doesn't get squeezed horizontally, making it easier to read.
Fig. 2.4 Setting to Display:
Block, week 9 (24/10/2023)
I want to implement 'max-width: 992px'
and '768px' to target medium-sized
devices and smartphones, respectively.
I changed the layout of the 'SKILLS'
section from a left-right orientation
to a top-bottom one and scaled down
the skills' background. As shown in
Fig. 2.5, I attempted to arrange the
content into two rows because there
was ample space. However, due to an
odd number of items, I wasn't sure how
to move the extra one to the left, so
I reverted to the previous
single-column design.
Fig. 2.5 Design process for the
skills section on
tablets, week 9
(24/10/2023)
At this point, I discovered a relative
unit in CSS called 'vw' (viewport
width), which is well-suited for
responsive design. It allows elements
to automatically adjust their size
based on different devices and
viewport sizes, as demonstrated in Fig
2.7. I regret that I didn't realize
its usefulness earlier.
Fig. 2.6 Modifying CSS &
changing units to "vw", week
9 (24/10/2023)
Fig. 2.7 Icons & progress
bars resize with
scaling, week 9
(24/10/2023)
Fig. 2.8 represents the CSS for
medium-sized devices, consisting of
five sections. The CSS for mobile
devices is quite similar, with minor
size adjustments, so I haven't
included a screenshot for it here.
Fig. 2.8 CSS for
tablets, week 9
(24/10/2023)
Fig. 2.9 The appearance on
different devices, week 9
(24/10/2023)
Final Outcome:
Digital Resume Link: https://chonghuiyi-project2.netlify.app/
FEEDBACK
-
REFLECTION
Comments
Post a Comment