Project 3 - Final Project
1/11/2018 - 22/11/2018 (Week 10 - Week 13)
Ng Jia Jin (0331589)
Interactive Design
Final Project
Instructions
Exercises
1/11/2018 (Week 10)
Since there's no more lecture notes because Mr Shamsul and Mr Lun have covered pretty much what we need to know to create a visually pleasing web design. They started off this week's class by giving a final assignment brief to all of us. For our final assignment, we need to team up with a person in class and create a professional website for them. Your partner for this final assignment should act as your "client". For the website, it can be anything from portfolio, a business website or just a blog as long as it suits your partner's need.
I teamed up with Isaac. To start this assignment, we gathered each of our information that we need for our website since I need to create his website and he has to create mine. We exchanged our contents and also some web design sketches.
8/11/2018 (Week 11)
It's E-learning week so I continued my work at home. Me and Isaac finalized our contents for our respective websites. We finalized our contents, wire frames and also information that we want for our websites. I also did some sketches for Isaac's website. He told me that he wants his website to be his main portfolio for his photography and also artworks that he did from the past. Some requirements is that he wanted a minimal vibe to his portfolio and just some basic information about himself.
Here are the his photography and artworks that he sent to me to be included in his portfolio.
15/11/2018 (Week 12)
For this week, I gathered all the necessary information that I need for Issac's website, I then went on to find for a suitable template to start of his website because Mr Shamsul allowed us to use template as a base.
After going through some templates, I finally found one to start off with.
After finding the suitable template for Isaac's website and also the information, I went on to Adobe Dreamweaver to start off. For the Adobe Dreamweaver, I started off by changing the images and also some of the layout for my Dreamweaver. Since we need 5 pages in total for the website, I used the template for the 5 pages for Isaac's portfolio website.
22/11/2018 (Week 13)
Submission Links
Ng Jia Jin (0331589)
Interactive Design
Final Project
Instructions
Exercises
1/11/2018 (Week 10)
Since there's no more lecture notes because Mr Shamsul and Mr Lun have covered pretty much what we need to know to create a visually pleasing web design. They started off this week's class by giving a final assignment brief to all of us. For our final assignment, we need to team up with a person in class and create a professional website for them. Your partner for this final assignment should act as your "client". For the website, it can be anything from portfolio, a business website or just a blog as long as it suits your partner's need.
I teamed up with Isaac. To start this assignment, we gathered each of our information that we need for our website since I need to create his website and he has to create mine. We exchanged our contents and also some web design sketches.
8/11/2018 (Week 11)
It's E-learning week so I continued my work at home. Me and Isaac finalized our contents for our respective websites. We finalized our contents, wire frames and also information that we want for our websites. I also did some sketches for Isaac's website. He told me that he wants his website to be his main portfolio for his photography and also artworks that he did from the past. Some requirements is that he wanted a minimal vibe to his portfolio and just some basic information about himself.
Here are the his photography and artworks that he sent to me to be included in his portfolio.
Personal Pictures
 |
| Fig 1.0: Personal Picture #1 |
 |
| Fig 1.1: Personal Picture #2 |
Artworks
 |
| Fig 1.2: Artworks #1 |
 |
| Fig 1.3: Artworks #2 |
 |
| Fig 1.4: Artworks #3 |
 |
| Fig 1.5: Artworks #4 |
 |
| Fig 1.6: Artworks #5 |
Photography
 |
| Fig 1.7: Photography #1 |
 |
| Fig 1.8: Photography #2 |
 |
| Fig 1.9: Photography #3 |
 |
| Fig 2.0: Photography #4 |
 |
| Fig 2.1: Photography #5 |
 |
| Fig 2.2: Photography #6 |
 |
| Fig 2.3: Photography #7 |
 |
| Fig 2.4: Photography #8 |
 |
| Fig 2.5: Photography #9 |
 |
| Fig 2.6: Photography #10 |
 |
| Fig 2.7: Photography #11 |
15/11/2018 (Week 12)
For this week, I gathered all the necessary information that I need for Issac's website, I then went on to find for a suitable template to start of his website because Mr Shamsul allowed us to use template as a base.
 |
| Fig 2.8: Templates Online |
After going through some templates, I finally found one to start off with.
 |
| Fig 2.9: Template Page #1 |
 |
| Fig 3.0: Template Page #2 |
 |
| Fig 3.1: Template Page #3 |
After finding the suitable template for Isaac's website and also the information, I went on to Adobe Dreamweaver to start off. For the Adobe Dreamweaver, I started off by changing the images and also some of the layout for my Dreamweaver. Since we need 5 pages in total for the website, I used the template for the 5 pages for Isaac's portfolio website.
 |
| Fig 3.2: Coding Process on Dreamweaver |
 |
| Fig 3.3: Coding Process on Dreamweaver |
 |
| Fig 3.4: Coding Process on Dreamweaver |
22/11/2018 (Week 13)
For this week, I continued to work on Isaac's website and also added more contents to it. I changed the padding size and also some of the animation that I want for his pictures.
29/11/2018 (Week 14)
 |
| Fig 3.5: Coding Process on Dreamweaver |
 |
| Fig 3.6: Coding Process on Dreamweaver |
 |
| Fig 3.7: Coding Process on Dreamweaver |
 |
| Fig 3.8: Coding Process on Dreamweaver |
 |
| Fig 3.9: Coding Process on Dreamweaver |
29/11/2018 (Week 14)
It's Week 14 and it's submission week for our final Interactive Design project. By Week 14, I'm almost done with my final project and I only had to tweak a little bit for Issac's portfolio.
 |
| Fig 4.0: Uploading Files to Webhost |
 |
| Fig 4.1: Published Website (Home) |
 |
| Fig 4.2: Published Website (Photography) |
 |
| Fig 4.3: Published Website (Artwork) |
 |
| Fig 4.4: Published Website (Contact) |
 |
| Fig 4.5: Published Website (About Me) |
Submission Links
Here is the link to Isaac's portfolio: Isaac's Portfolio
22/11/2018 (Week 13)
Specific Feedback: For my final project which is to create a website for Isaac, Mr Shamsul told me that I should create a logo for Issac because it will make his website more professional.
29/11/2018 (Week 14)
Specific Feedback: Mr Lun and Mr Shamsul told me to add more photos and more information to Isaac's portfolio because they said that his artwork page is quite empty.
Reflection
Experience
1/11/2018 (Week 10)
For this week, I only started gathering information from Isaac for his portfolio. We mostly discussed about what do we want for our respective websites.
8/11/2018 (Week 11)
I started to draw some sketches and the wireframe for Isaac's portfolio. I also finalized all the information needed for his portfolio including the pictures and artworks that he wants to be published.
15/11/2018 (Week 12)
I started my final project off by using a template that I found online. After that, I went on to consult with Isaac to make sure that he's satisfied with the overall layout and design for his website.
22/11/2018 (Week 13)
This is week is pretty hectic because I received some feedback from Mr Shamsul regarding to my final project. He gave me some positive feedback and then I continued with my final project with some minor changes to make.
29/11/2018 (Week 14)
For this week, I'm almost done with my final project, I went on to ask for Isaac's opinion and he said he's satisfied with the overall layout and also the animation of the pictures. I then carry on to add the remaining details to the website and also tweak some animation errors.
Observation
1/11/2018 (Week 10)
I didn't observe anything except from anyone being busy collecting information and data from their own partners. I only observed that while collecting data, one need to be very precise in their information and also be very informative.
8/11/2018 (Week 11)
For this week while doing some rough sketches for Isaac's website, I observed that it's important to discover different layout styles and also different types of wireframes.
15/11/2018 (Week 12)
Everyone is busy coding their respective templates and for me, I found a lot of template that I can use online that are very similar to my sketches. I chose one and decided to code from the template.
22/11/2018 (Week 13)
I observed that the more I code the more familiar I am when it comes to coding. At first, I was struggling to code for my first page but when it comes to the third page, I felt that I've gotten smoother and more clearer in coding.
29/11/2018 (Week 14)
For this week I only had to do some minor changes because I'm almost done with Isaac's portfolio. I observed that my website is more minimalist than anyone's because that is what Isaac wants.
Findings
1/11/2018 (Week 10)
I find myself a little confused at times for the final project because I'm still not that familiar with coding and especially when I need to have 5 pages in a website.
8/11/2018 (Week 11)
I find it pretty interesting when it comes to planning for a website because you get to use the layout that you want for your partner's website and also able to include any information that your partner wants.
15/11/2018 (Week 12)
For this week, I find out that reading HTML books help a lot when it comes to coding because each books teach you various knowledge and rules that one need to apply when it comes to HTML coding.
22/11/2018 (Week 13)
As I'm going through more coding process on Dreamweaver, I'm starting to get used to coding and also getting better at it.
29/11/2018 (Week 14)
At the end of the project, I'm truly thankful because I'm sure this knowledge will come in handy in my future and I also find this project pretty interesting because being able to code a portfolio for someone else sets a good foundation in the working environment in the future.
Further Reading
29/11/2018 (Week 14)
Specific Feedback: Mr Lun and Mr Shamsul told me to add more photos and more information to Isaac's portfolio because they said that his artwork page is quite empty.
Reflection
Experience
1/11/2018 (Week 10)
For this week, I only started gathering information from Isaac for his portfolio. We mostly discussed about what do we want for our respective websites.
8/11/2018 (Week 11)
I started to draw some sketches and the wireframe for Isaac's portfolio. I also finalized all the information needed for his portfolio including the pictures and artworks that he wants to be published.
15/11/2018 (Week 12)
I started my final project off by using a template that I found online. After that, I went on to consult with Isaac to make sure that he's satisfied with the overall layout and design for his website.
22/11/2018 (Week 13)
This is week is pretty hectic because I received some feedback from Mr Shamsul regarding to my final project. He gave me some positive feedback and then I continued with my final project with some minor changes to make.
29/11/2018 (Week 14)
For this week, I'm almost done with my final project, I went on to ask for Isaac's opinion and he said he's satisfied with the overall layout and also the animation of the pictures. I then carry on to add the remaining details to the website and also tweak some animation errors.
Observation
1/11/2018 (Week 10)
I didn't observe anything except from anyone being busy collecting information and data from their own partners. I only observed that while collecting data, one need to be very precise in their information and also be very informative.
8/11/2018 (Week 11)
For this week while doing some rough sketches for Isaac's website, I observed that it's important to discover different layout styles and also different types of wireframes.
15/11/2018 (Week 12)
Everyone is busy coding their respective templates and for me, I found a lot of template that I can use online that are very similar to my sketches. I chose one and decided to code from the template.
22/11/2018 (Week 13)
I observed that the more I code the more familiar I am when it comes to coding. At first, I was struggling to code for my first page but when it comes to the third page, I felt that I've gotten smoother and more clearer in coding.
29/11/2018 (Week 14)
For this week I only had to do some minor changes because I'm almost done with Isaac's portfolio. I observed that my website is more minimalist than anyone's because that is what Isaac wants.
Findings
1/11/2018 (Week 10)
I find myself a little confused at times for the final project because I'm still not that familiar with coding and especially when I need to have 5 pages in a website.
8/11/2018 (Week 11)
I find it pretty interesting when it comes to planning for a website because you get to use the layout that you want for your partner's website and also able to include any information that your partner wants.
15/11/2018 (Week 12)
For this week, I find out that reading HTML books help a lot when it comes to coding because each books teach you various knowledge and rules that one need to apply when it comes to HTML coding.
22/11/2018 (Week 13)
As I'm going through more coding process on Dreamweaver, I'm starting to get used to coding and also getting better at it.
29/11/2018 (Week 14)
At the end of the project, I'm truly thankful because I'm sure this knowledge will come in handy in my future and I also find this project pretty interesting because being able to code a portfolio for someone else sets a good foundation in the working environment in the future.
Further Reading
5/11/2018
HTML 5: Second Edition
This book is published by Focal Press and the author of the book is Matthew David. The book mainly focus on the history of web design from the past 20 years also also the introduction of HTML5 to the web design industry. It also explains the use of JavaScript, CSS and also the HTML in general. It also teaches you how to make it interactive so that your website can be viewed from different devices such as smartphones, iPad and also from various devices.
In my opinion, I find this book very helpful for me especially for my final web design project because it teaches me how to enhance my JavaScript with Jquery and also how to embed different contents into my website. Overall, I find this book very helpful because it mainly teachers you how to enhance your website's look and also the overall feel to it.
16/11/2018
Responsive Web Design by Example
16/11/2018
Responsive Web Design by Example
This book is published by PACKT Publishing and the author of the book is Thoriq Firdaus. This book mainly focus on teaching startup web design students to create a Responsive Web Design by Example. Although I didn't read through the whole book, I did go through some useful information that helped me a lot throughout doing my final project.
In my opinion, some useful information that I find is that throughout the whole book, there're plenty of useful codes such as how to style the navigation bar in CSS and also how to have a border and so on. For me, it's very useful to have it because I tend to forget the codes easily and I have to go through everything again just to find the code. I also like how they gave us certain types of typeface that are suitable for the website because of visibility factors.
Overall. I think web design students and also web starters will find it very useful as this book it packed with a lot useful information that are very essential for us when it comes to coding a website.
Comments
Post a Comment