Zoe Wong Zen Yee (0336770)
Interactive Design
Project 2

---

Lecture Notes

Lecture 8: Bootstrap

Fig 1.0 Screenshot of the Bootstrap website

---

Instructions

---

Project 2: Micro Site 

After the moodboard is done, I'm still lost in the direction I should go. However, after looking through YouTube of what they did using Bootstrap, I have a rough idea what I want my page to be.

Then, I started to sketch out the wire frame of the site.

[Pic of wire frame]

With help from a tutorial, I was able to understand how bootstrap works. Below is the video I watched.

I chose to follow this tutorial as it is modern, interactive as well as responsive. Even though this is really different from my original planned color scheme, which doesn't really work out when I experiment it. However, with the black theme, I think it suits the image of Troublemaker more. On the other hand, it is able to create a contrast with my key artwork.

I then start to do the coding on Dreamweaver.

Fig 1.0 Screenshot of progress done in Dreamweaver

Fig 1.1 Screenshot of progress done in Dreamweaver

I used the social media icons from Font Awesome in my footer. Other than that, the background images used were downloaded from Pexels.

Fig 1.2 First outcome of the micro site

The link for the first attempt: https://troublemakersmanifesto.netlify.com/

After consulting Mr Shamsul and Mr Lun, they asked me to change the font of the title of each section to be similar with the typeface I used for 'Troublemakers' in my key artwork. Other small changes is also to be done.

While making the changes, I faced difficulties in tweaking the spacing between sections. After consult Mr Lun for it, I manage to make those changes to what I want.

Fig 1.3 Final outcome

The link to the final outcome: https://troublemakers.netlify.com/

---

Feedback

Week 9
Feedback were given regarding to our layout exercise. Project 2 has yet to start at this point.

Week 10
No feedback due to Hari Raya.

Week 11
No feedback as I am still working on the site.

Week 12
The composition of the website is good. Mr Shamsul suggested to make the key artwork and the contents below it side by side. Other than that, the background of the navigation bar when in mobile size should be in black. He also suggested that the font of the title of each section can be changed to similar of the typeface used in my key artwork. The font size of the footer should also be smaller.

---

Reflection

Experience

Observation

Findings