Week 13 : Final Project Submission

      After 13 week of studies and learning, we have learn how to use bootstrap and how to create a website using bootstrap software. Although we are not good in bootstrap but at least we are able to create a basic website with bootstrap.

      As I mention before, we face a lot of challenges while we doing this project. Time management is very important for you to do your work. Our weakness in this project is too focus on a single page and put a side others page. This action almost bring us to the hell, but fortunately we are still able to complete the project on time.


      Teamwork always is the important fact that when you having a group work. We have to choose wisely of our member, teamwork may make you success but at the same time. It also might lead you to the hell. This is what I have get or learn in these 13 week. Thank you.      

Finally all pages is complete

Week 12 : Final consultation before submission

      The week is the week that we have to rush. Because we have wasting too much time do do coding for our homepage. We realize that we have to rush on and follow up the coding for other page also. We decided not to let one people doing the coding but all of our member.

      But at the end of the day, we facing a huge problem, which is our members don't know how to using a set of bootstrap file to support all the html. We facing a huge problem, because of the page that done by him cannot put into our files. When we put the files and his style into our folder, all the thing mess up. We have try our very best to solve this problem but it seem like it cannot been solve.

The page not function after I move it into our folder

      We put this issue at side and continue our work on other page. Hopefully this issue can be solve before next week submission

Week 11 : Progression of the Website

      Our submission is on week 13, in this week basically we learn about to to create a navigation bar by using bootstrap default settings. We can change the bootstrap default setting color on their website. This is very special software that I first time working on it.

      For my opinion, i think the way that bootstrap change thee design is too complicated because i need to change the colour online and download it then replace with my original files. This sometimes might cause coding problem and will cause file missing.

      

Sample of our design(About Us)

Week 10 : Peer Review Report

      I have submitted the peer review report on last week. The reason that my tutor want us to complete the peer review report is to let us giving critic to others with implement the design principle. We have learn a few principle/ law during lecture class.

     Overall this week I have started to do Project Part 2, which is to make the whole website to be responsive & functional. Although we learn how use bootstrap during previous practical class, but when we started to do our webpage. It still encounter a lots of problem, for example: we don't know how to create a basic layout for our design.

      We have ask our tutor to teach us how to do a basic layout for our design. After an hour of teaching, we have already recalled back what we have learn in previous week. I started to separate the work to other team members. When we do our website, we did a little bit changes because of some of the comment that give by other group during our presentation last week.

     

The screenshot of the group that I review

The comment that I give

The comment that I give

Week 9 : Presentation of Project Part A

      Today we are having group presentation for our group Project Part A, before we started our presentation we did some research of some of the principle. Although we have apply some of the design principle while we designing the website, but we didn't have a clearer explanation about what we want to present. So we do a few research to help us explain more on our design. Those website are LINE 25, Smashingmagazine and Shortiedesigns.

     After we do these research, I realize that our design was not perfect and we left out some of the principle in the design and we will do some minor changes on our design.  

Some of the point that included in our slide

Some of the point that included in our slide

      After we done our research, I found that sometimes basic principle will make design look good. While we designing the website we have to know about what is the purpose of the website. Then, we have to think how to bring out a better communication system in the website. Other than that, typeface, color and image is the things that we have to play with it. With these element that I found in research, i think that you are almost success to design a simple, basic and convince web design. 

Week 8 : Bootstrap adding image

      Today practical class, I have learn how to add in image and edit the style without using the traditional way. I have learn how to make the image look circle, rounded shape and in thumbnail size. At the first, we need to create a New CSS rules, then we need to change the border-radius of the image to change the size and shape.

      But with the bootstrap system, we just need to change the class details. Because the system already created the class for you, all you need is call out the function. for example, if you want it to be circle, u need to add in class="img-circle" at the end of the images code. Then it will show something like below.

      Before we end our class, I also learn that how to create hover table & table bordered.

Image in circle

Learning to change the size

Week 7 : Submission of The Proposal

      I have learn how to create a responsive website by using the bootstrap system. It's a little bit complicated with the code, but I think i could adding this into our Final Project. Finally at this week, we had come out our final design for the SPCA-Penang website. We believe that this design with the concept that we put in can attract more people attention while they are visiting the site.

Visual Design

Visual Design

Week 6 : Wireframe

      This week practical class, I have learn how to create a form by using html 5. I found out that, it's not that difficult to insert a form when using Adobe Dreamweaver. All you need is you have to understand what you want and which selection can do the effects that you want. 

      For the progression of the proposal, this week my group are working on the wireframe. After a few discussion on previous week, we have come out the basic concept and idea for our website redesigning. 

Wireframe for About Us

Overall wireframe

Overall wireframe

Week 5 : Analyzing the website

      In this week my group have to show some progression regarding the Part A of the Project. Which is the progression of the proposal. Our group will mainly focus on the objectives of we doing the project. Then, we need to started to analyze the website. What is the problem with the current website and how to solve the problem. In this week practical class, we also ended our recall lesson. Which what we learn while we are in semester 2.

      During the discussion that held by my leader, Vincent in this week. We had found out some design in the website which not suitable anymore. Our group had decide to remove some of the page in the website, because it make the website look complex. 

The sitemap of the current website

The sitemap of the website after redesign

Week 4 : Starting to write our proposal

      Our leader has decide to start working on our proposal for the project. During this week class, our tutor Mr. Yong has continue the lesson that he left last week. Which is a recall lesson for us to recall back how to create css style base on class, id & tag. Although I have some confusing about what had been teach by my tutor. But I had do some extra research regarding the css style to let myself understand more on it. I found that this website will be useful for you guys to create website HTML CSS. At the end of the class, our group has decide to use SPCA Penang website as the website for us to rebranding and redesign.

Home Page Of SPCA-Penang

About Us

Contact