Interactive Design / Project 2

9.6.2022- 22.6.2022 (Week 11 - Week 13)
Cheryl Voo Yie Qi / 0349878
Interactive Design / Bachelor of Design in Creative Media
Project 2 / Working Landing Page

---

Links to other projects:

• Exercises
• Project 1 / Landing Page Design
• Final Project 

---

INSTRUCTIONS

Week 11
We are going to turn our landing page (Project 1) into a working landing page.

I started it by searching for photos and downloading them from pexels.com, here are some of them:

Fig 1.1, Photos

Then I started using bootstraps for Navbar:

Fig 1.2, Navbar

And for the carousel, I wanted to have a small carousel on the right like Project 1 at first, but in the end, I felt like a whole carousel would be nicer, so I added a gradient on the photos then added text and a button on the left.

Fig 1.3, Carousel

And at this part, I was having trouble aligning them like this, then I figured out to use columns for this outcome, I was really happy when I did it.

Fig 1.4, Newsletter Subscription part

For the buttons, I added colour when hovering over it:

Fig 1.5, Navbar (become white and underlined when hovering over it)

Fig 1.6, The search button (become black background with the underlined khaki coloured word)

Fig 1.7, The shop now button (become black background with the underlined khaki coloured word)

Then, others were just adding photos, texts and some buttons. But I was struggling to align things, but in the end, I did it by asking friends, searching online and listening back to class recordings.

And here's my final outcome (uploaded to netlify):
https://project2-cherylvooyieqi.netlify.app

---

REFLECTION

My brain felt exhausted after this, especially when codes weren't working. And I was very happy when I found out the solution or found out it was my mistake, the moment when the codes are working was very relieved. Coding is fun when it is working :)
But overall it was okay for me, and it is interesting to learn making websites.