Commencing Page 3

Using the wireframe as my guide again, I decided to try and build the third section of the website.

On the wireframe, it shows 3 boxes perfectly side by side. By adding the class "col-md-4" to all 3 boxes (so that the total would be 12), this section of the page would be properly aligned. The thing is, with Bootstrap, there are automatically paddings and margins that come along with the class.

For the main image, I simply added it into the div with the class "col-md-4". This way, the images would fit perfectly into the divs.

1st attempt of redesigning website

For the button there are two classes: one being the main one and the other one being a pseudo class (:hover). For the buttons, I reduced the border to give it a bit of a more minimalistic look. I then added a 0.5 sec animation that would change the background color and content inside the button. When the mouse hovers over the button, a large arrow slowly fade in.

Animated hover button was added for aesthetical purposes

Page 2 (Final Model)

Once I got the responsive elements to work, I decided to change the entire look of the website due to the client's request. Instead of following the vertical column structure as depicted on my wireframe, I went to design a horizontal column structure.

Responsive 'Page2'

After showing the client, they wondered if I could add a title.

Tittle added

Extra area created to add a subtitle

Bootstrap

As I got into building my website, I noticed a problem. At home when I was using my desktop at home, the resolution was different to that of my laptop. Hence, when I'd import the project to my laptop, the boxes and objects would mess up.

Before:

After

The font size, boxes and image were not proportionate to the window size

After looking into this issue, I found out that there was this free CSS, Javascript plugin called Bootstrap that solved this issue. By including the files into my project and assigning main divs certain class names, Bootstrap will automatically re-scale the objects when the window size is modified.


Pros

• Great standardised platform with all the basic styles and components needed (layout grid, panels, tables, buttons, modals, form styles, etc) to build on which saves a lot of time.
• Support for all major browsers and fixes CSS compatibility issues.
• Consistent UI that looks good out of the box.
• Designed with responsive structures and styles for mobile devices.
• Icons included (now as a font file for infinite scaling).
• Good documentation and community support.
• Lots of free and professional templates, themes and plugins.

Cons

• Javascript is tied to jQuery (it's by the far the most common Javascript library though and the plugins can just as easily be left unused).
• Can require lots of overriding styles or rewriting their files if you have lots of customisation or want to deviate from Bootstrap structure.
• Websites can start to look the same if you don't customise the styles and colours much.

Learning bootstrap wasn't too hard. Basically, Bootstrap would split the page into 12 columns. All I had to do was add the class "col-md-number" (number between 1 -12) to an element. Once that was done the element would become responsive.

Remodelled Page 2

Despite not looking very aesthetically pleasing, it was responsive.

Page 2

After finishing the first page, I started working on the second page.

The first I did was try to replicate the framework using basic HTML and CSS.

Wireframe

Using pixel measurements, I created a row that fit perfectly, and multiplied it three times.

First Draft

Since the structure looked similar to that of the wireframe, I decided to add additional CSS to see how it would look like.

Second Draft

Keep in mind, this was all done on my desktop. When I moved the files to my laptop, as I was using pixel measurement, I discovered that the images and text boxes would no longer be proportionate. This resulted in the mess displayed below.

The entire page was misaligned

Misaligned page

To resolve this issue, I looked into Bootstrap, a plugin that would make elements proportional with the use of 12 columns. 

First Page

After looking at my original drawings, I decided to start off with actually making the first page. Luckily for me, in the template I decided to use, it basically had everything I was looking for.

Original Template

From there, I modified the buttons, backgrounds, and text to suit my own needs.

Wireframe

Modified Template

While it doesn't look as great as the previous template, I'm mainly focusing on the framework and functionality. If the client wants a change in background of font colour in the future, those aspects can be modifiable. I also created a hover animation that changed the colour of the button.