After finishing building a replica of the wireframe, I realised that Page3 and Page2 looked quite similar. Hence, I decided to do a bit of remodelling. I had a few options, in which I would have to redesign the layout:
- Remove the text
- Make the page a slider
- Add a hyperlink
- Change the box shape
- Change the box size
To avoid complicating things, I decided to remove the text and put it inside the image. Using the :hover Pseudo class on the image class, I created an animation that would darken the image, lower the opacity, and display the text information.
Effectively what I did was that I created a box inside a box, horizontally and vertically aligned the text, and then changed it's opacity to 0. The opacity of the box would turn back to 1 when the mouse hovers over it and would go through an animation of 0.4 (slow but not too slow).
I also changed the font-family and size to Raleway in order match up with the rest of the website
The end result looked rather nice, took less space than the previous model and overall improved the aesthetics of the website.
Effectively what I did was that I created a box inside a box, horizontally and vertically aligned the text, and then changed it's opacity to 0. The opacity of the box would turn back to 1 when the mouse hovers over it and would go through an animation of 0.4 (slow but not too slow).
I also changed the font-family and size to Raleway in order match up with the rest of the website
The end result looked rather nice, took less space than the previous model and overall improved the aesthetics of the website.
No comments:
Post a Comment