(PROJECT 2) Web Design and New Media 2018

16th of May '18 - 17th of May '18 (Week 8)
Jaslyn Tjhai (0333039)
Web Design and New Media
Project 2

Week 8
16th of May 2018

On the eighth week, since we had holidays the last few weeks, we were kind of behind schedule on Project 2 therefore Mr. Shamsul gave us an exercise in class for us to get familiarized with layouts for HTML to prepare us to work on our second project the next day. Then we were asked to try and gather all the information for our web page so that all that's left tomorrow is putting everything together. I drew a few wireframes for project 2 after class.

Fig. 1.a. Wireframes for web page

After looking through which one looks good, I decided to try and go with wireframe number 10. Below are my moodboards/color schemes, and references. I looked up some references on Pinterest to give me an idea on how I wanted my web page to look.

Fig. 1.b. Web references

Fig. 1.c. Color schemes for web page

I decided to use color blue as my main color because I really like color blue. I also decided to combine it with a little bit of pinkish and yellow to show some sort of warmness from the coldness of blue. The colors I used are mostly pastel colors.

Week 8
17th of May 2018

During class, while doing my web, I'm still not satisfied with my design and there are still a few things that I'm not sure of, so after class, I decided to redo my design and redo the html. Mr. Shamsul extended our deadline till the end of this week so that gave me more time to do better on my web design. I redrew a wireframe for my web page but I still decided to follow my blue color scheme except I decided to only combine blue and white color in the end to make it look cleaner.

Fig. 2.a. Final wireframe chosen for the web page

As for font, I was planning to use Bad Script for my header and Pavanam for my other content at first. But then the font for my header doesn't look good on the web page so I decided to just stick with Pavanam.

Fig. 2.b. Choices of fonts for web page

I wanted to try and arrange my Skills content like my second choice on the wireframe but I was having trouble with it so in the end I made it inline. I also tried to look for tutorials for side navigation. I also did hover for some of my Artworks and Life section.

Fig. 2.c. Final look of the web page

Fig. 2.d. Header of the webpage

Fig. 2.e. A look on the hover function

Overall it was kind of challenging considering the fact that we're way behind schedule and therefore we have to rush to finish this thing in less than a week but it was a fun process. I definitely came to understand more about the rules in CSS as well as a few other things. I actually wanted to try and use JavaScript but I didn't have any time to try it out and I didn't really wanted to mess up what I already have.

Week 9
24th of March 2018

On the ninth week, Mr. Shamsul gave each of us a feedback on our project. He said that my approach on the navigation is good and my design is clear however it lacks a sense of consistency as some images are round and some are rectangle with different sizes of rounded border. He also said that my section about skills is not clear enough. I then tried to make some adjustment and changes based on Mr. Shamsul's feedback and resubmitted my work.

Fig. 3.a. Final submission after feedback