Interactive Design | Task 2: Working Web Page
19/6/24 - 29/6/24 | Week 9 - 10
Iman Mikudim | 0338004 | Section 1
Interactive Design | Bachelor of Design (Hons) in Creative Media
Task 2: Working Web Page
SECTIONS
INSTRUCTIONS
Brief
The objective of this
assignment is to transform our
static prototype from Project
1 into a fully functional and
interactive web page. We will
apply our knowledge of web
layout class to create a
working website that closely
aligns with our original
prototype.
Process
Fig 1.1 Prototype
Design (Initial &
Updated) | Week 9
(20/6/24)
Before getting
started on the
website, I planned
it out and looked
for references
where I could use
HTML and CSS
throughout.
Unfortunately, as
I progressed, I
encountered only
minor issues with
the creation of
the slider in the
projects section,
so I decided to
display the images
in 2x3 row column
format instead.
With more
practice, I hope
to revisit my
website one day
and not only add
the slider, but
also update and
feature more
interactions.
Fig 1.2 Font Pairing |
Week 9 (20/6/24)
I wanted to keep my
fonts simple and
consistent, so I chose
Jost and Raleway from
Google Fonts: Raleway
for headings, and Jost
for body/paragraph
text.
Fig 1.3 Images &
Icons | Week 9
(20/6/24)
For my images and
icons (https://icons8.com/icons), I made sure to
scale/crop images
from their
respective
sections to the
same size
beforehand,
resulting in less
CSS work later
on.
Fig 1.4
'Introduction' Section |
Week 9 (22/6/24)
For the introduction, I
wanted a unique welcome
message for users. I've
seen a lot of people use
this typewriter effect as
an introduction on their
websites, and I wanted to
use it as well. For the
typewriter effect, I
watched a
YouTube
video, learned how
animations worked, and
then used it in the next
two lines of the message
as well.
Fig 1.5 'About' Section | Week
9 (22/6/24)
Fig 1.6 'Education &
Experience' Section | Week 10
(24/6/24)
Fig 1.7
'Skills' Section | Week 10
(24/6/24)
For the skills section, I
also had to refer to
another
YouTube video to do the
progress bars, and it was
something new that I had
learned: the
'--percentage' CSS
variable. It sets the progress
value for each circular
progress bar. It's defined
in the HTML for each
circle and used in the CSS
to create a gradient that
fills the circle based on
the percentage. This makes
it easy to update the
progress values directly
in the HTML.
Fig 1.8 'Projects' Section |
Week 10 (26/6/24)
For the project section,
I created a simple hover
transition animation in
which the images were
initially desaturated, but
when hovered over, the
actual colours of the
images were
revealed. I also included figure
captions below each image
to indicate which projects
came from which
modules.
Fig 1.9 'Contact' &
'Footer' Section | Week 10
(26/6/24)
Before getting
started on the
website, I planned
it out and looked
for references
where I could use
HTML and CSS
throughout.
Unfortunately, as
I progressed, I
encountered only
minor issues with
the creation of
the slider in the
projects section,
so I decided to
display the images
in 2x3 row column
format instead.
With more
practice, I hope
to revisit my
website one day
and not only add
the slider, but
also update and
feature more
interactions.
I wanted to keep my
fonts simple and
consistent, so I chose
Jost and Raleway from
Google Fonts: Raleway
for headings, and Jost
for body/paragraph
text.
For my images and
icons (https://icons8.com/icons), I made sure to
scale/crop images
from their
respective
sections to the
same size
beforehand,
resulting in less
CSS work later
on.
For the introduction, I
wanted a unique welcome
message for users. I've
seen a lot of people use
this typewriter effect as
an introduction on their
websites, and I wanted to
use it as well. For the
typewriter effect, I
watched a
YouTube
video, learned how
animations worked, and
then used it in the next
two lines of the message
as well.
For the skills section, I
also had to refer to
another
YouTube video to do the
progress bars, and it was
something new that I had
learned: the
'--percentage' CSS
variable. It sets the progress
value for each circular
progress bar. It's defined
in the HTML for each
circle and used in the CSS
to create a gradient that
fills the circle based on
the percentage. This makes
it easy to update the
progress values directly
in the HTML.
For the project section,
I created a simple hover
transition animation in
which the images were
initially desaturated, but
when hovered over, the
actual colours of the
images were
revealed. I also included figure
captions below each image
to indicate which projects
came from which
modules.
Final Working Web Page
Fig 1.10 Full Website
Screengrab (PNG) | Week
10 (28/6/24)
Fig 1.11 Full Website
Screengrab (PDF) | Week 10
(28/6/24)
REFLECTIONS
I really enjoyed this task
because it allowed me to
practice the use of flexbox
taught in our tutorial
classes, as well as other
things like animation
transitions, as well as learn
new things taught outside of
class by referencing YouTube
videos and so on. This task
also made me realize how much
I had forgotten about HTML and
CSS, allowing me to
familiarize myself with it.
