For the final project, we were to design a website with at least 5 HTML pages based on our clients, which in this case, our partnered classmate's needs. I paired up with Lee Yu Hui. 

Later, we start to clarify what we want each other to do. She wanted me to create a portfolio website for her photographs. I can go with any style as long as it's simple. Therefore, I decided to go with a more vintage, with tinge of modern after I saw the photos she chose to be in her portfolio. 

After I have decided a direction, I move on searching for reference on Pinterest for inspirations for the layout.

Fig 1.0 Reference (1)

Fig 1.1 Reference (2)

Fig 1.2 Reference (3)

Fig 1.3 Reference (4)

Based on Yu Hui's given photos, I decided to go with a more brownish color scheme.

Fig 1.4 Color scheme

Fig 1.5 Screenshot of contents given via Google Drive

I then start to create sketches of wireframes.

Fig 1.6 Wireframe for 'Home'

Fig 1.7 Wireframe for 'About' and 'Gallery'

Fig 1.8 Wireframe for 'Contact' and 'Book Online'

As I browsed through various YouTube videos for CSS inspirations, a video about loading screen inspired me to do one. With the help from the video, I proceed to code the pre-loading screen. HTML, CSS and Javascript were used.

Fig 1.9 Screenshot of progress done in Dreamweaver for the pre-loading screen

Fig 1.10 Screenshot of the outcome of pre-loading screen

I then started to do the other layouts for all pages. For the navigation bar, background color, and footer, I used a master CSS in which I can link to all pages. This enables me to save a lot of time. Bootstrap was also used while creating the website.

Fig 1.11 Screenshot of progress for 'Home'

Fig 1.12 Screenshot of CSS for nav bar, background color, and footer

Icons from Font Awesome were used. I also created a simple favicon for the site. All background images were taken by Yu Hui herself. Templates were only used for the 'Gallery' page. Others are basically done from scratch. The website is also fully responsive.

Fig 1.13 Favicon for the website

Fig 1.14 Homepage

Fig 1.15 About page

Fig 1.16 Gallery page

Fig 1.17 Online Booking page

FIg 1.18  Contacts page

Final Outcome: https://leeyuhui.netlify.com/

Week 13

Mr Shamsul commented that it should be okay to use serif fonts as to resemble the vintage feel from Yu Hui's photos. 

Week 14

For the navigation bar, Mr Lun commented that the menu icon might be behind the banner in small window. I can adjust by using the z-index. 

Week 12
I'm a bit nervous that I wouldn't be able to complete 5 HTML pages in time as there's a lot of deadlines to rush. As Yu Hui allowed me to go with any styles for her page, I can work smart to achieve what I have in mind.

Week 13
After being asked a lot of questions regarding the final project for Video and Sound Production by both lecturers, I was once again being reminded the importance of working smart, especially when there's tons of deadlines. I am quite satisfied with the pre-loading page done.

Week 14
It's the last week, and I breathe a sigh of relief when Mr Shamsul said the deadline is next Monday. It is quite fun to design a web page, especially that it reminded me those fond memories of junior high, back when Blogger was the trend, and everyone has those cool customisations. 

-----

Week 12
I observe that a lot of people had already started with their mock ups and wire frames. I should worl faster as to not lag behind.

Week 13
Bootstrap isn't as hard as it seems once you started getting used to it. It has saved a lot of time, especially in creating a slideshow. All I have to do is to just insert a carousel html and images into it.

Week 14

I observe that once I am done with the navigation bar and footer, I am halfway done for the whole website as I only need to copy and paste them when I needed them.

-----

Week 12
The given content really determines most of the direction of the style of the website goes. Especially the color scheme.

Week 13
After Mr Lun teaching me about the layer of <div> tag in Bootstrap, it is so much easier and faster in creating a responsive website.

Week 14
I found out that I really have to take note of which version of Bootstrap, Font Awesome CDN and such that I'm using when searching for tutorials online as it will affect the end results a lot.

Best Practices for Minimalist Design by Nick Babich

As minimalist design seems to be the trend now, I decided to read this article. In this article, it shows how a designer can achieve a minimalist design in apps or websites. Some of the tips introduced includes:

1. Remove all extra elements

2. Create a single focal point per screen

3. Simplify color scheme

4. Use generous white space

The author then concludes the article by highlighting that minimalist interfaces is certainly a way to achieve good design, but it's not the goal as form follows function.