Interactive Design / Project 2
16/10/2023 - 24/10/2023 / Week 8 - Week 9
.jpg)
.png)
After I placed all the text and images, I went to Google Fonts and added in
'Nunito' and 'Overpass Mono'. Then I applied Nunito to the whole body. I also
started formatting each div starting from the first section to the last.
.png)
Afterwards, I added a hover effect so the thumbnails zoomed in slightly when
your cursor was sitting above it. Additionally, I also made it so the titles
changed colours as well when you hovered over them.
.png)
.png)
Lastly, I added in href links to jump to the specific section you wanted to
look at and also added hover animations and linked the back buttons in each
section.
Iman binti Kamarudin / 0364014
Interactive Design / Bachelors in Design (Hons) in Creative Media
Project 2
.jpg)
INSTRUCTIONS
First, I created a layout using divs in Adobe Dreamweaver. Afterwards, I
placed all the images and text in their respective divs.
Fig 1.1- Div Layout
Fig 1.2 - Div Layout pt.2
Fig 1.3 - Initial Information
.png)
Fig 1.4 - Resume Screenshot #1
Fig 2.1 - Linked Google Fonts
Fig 2.2 - Homepage Formatting
For the software skills and experience, I screenshotted the original design
and imported it as an image.
Fig 2.3 - Resume Screenshot #2
I decided to get rid of the horizontal lines sitting directly next to the
text and instead just coloured the bottom of the borders. I also removed the
image for the software skills and replaced it with numbers instead since it
had a problem when the browser was resized.
.png)
Fig 3.1 - Resume Screenshot #3
Then, I placed all the thumbnail pictures as well as titles and used display
flex to line them up in 3 columns. I also justified the elements to have
space between them.
Fig 3.2 - Project Section Code
Fig 3.3 - Project Section CSS
Fig 3.4 - Project Section Screenshot
Fig 3.5 - Project Section CSS pt.2
And here began my struggle to add in a carousel. Most of the top answers
that came up when I googled how to add a carousel included using JavaScript
and since I didnt't know anything about it I had to look for an alternative
method.
I ended up following a youtube tutorial and adjusting everything to fit my
vision. It was a very humbling experience to say the least but I'm glad I
persisted to include the carousel.
.png)
Fig 4.1 - Resume Screenshot #4
It was really hard trying to figure out how to keep the image in the center
and also have the height of the carousel adjust as well when resizing the
window/browser. What I did was make every image of the carousel the exact
same height and width and joined multiple artworks in one image using
Photoshop.
.png)
Fig 4.2 - Resume Screenshot #5
Fig 5.1 - Project Section Links
Fig 5.2 - Back Button CSS
FINAL PROJECT 2
REFLECTION
This was by far the hardest thing i've had to do in this class so far but it
was really fun trying to figure out how to implement the elements from my
prototype. I definitely think I could have done better but I am really
satisfied with how it turned out. Looking back, I do wish that I had made a
simpler prototype but I really like making things more difficult for myself
ahah.
Comments
Post a Comment