I've begun to work on the secondary pages of the website. I started with the portfolio page, as it would be considered as the main content page of the website, as it's typically what a user would come to see.
I needed to subdivide my grid system slightly to incorporate the four columns used in the wireframes, which the client liked. I added an additional two gutters within the centre of two columns as seen below, which will allow the thumbnails to sit accurately.
You can see how the images fit into the new column system. I've also begun to work using clipping masks within my web desig. Which allows a more flexible, non-destructive method of design. If I wanted to edit the images in any way, in terms of this composition, I can just edit the image file without moving the base shape which the image is masked to.
I also wanted to demonstrate how the rollover system will work on the website. Similar to how it works on the homepage of the website, however I've added buttons. Buttons which allow the user to quick look at the image or to favourite it.
I created the roller over using another clipping mask within the existing clipping mask. If this project gets handed over to a developer in the end, which is unlikely, I need to assure it's organised to he or she able to interpret the content correctly.
I've added a cursor to show that the rollover is active. I picked this up during my placement at Bloom. It allows the client to interpret the different states easily.
I also wanted to add a further rollover, which shows the selected button highlighted. I duplicated the rollover group, and changed the state of the the desired button. Inverting the colours, which uses the contrast of hue and saturation to allow the button to stand out amongst the image.
I also added a further cursor to the design to show the active state of the button. For the same reason as stated above.
Which you click the button it previews the project image in full screen, fading the background slightly which draws attention to the image. My research has shown a vast majority of websites which presenting feature imagery do this.
Below is a final shot of the page, which will be submitted to the client along with the other secondary pages. As per the rest of the website I've been using a large amount of white space around the imagery and type. I'm doing this as white space suggests the significance of the content. It stands out, it's more dominant within the page - as sense of importance.
Leave your comment