I’ve made a few changes to the site layout/design since the initial creation. First off I’ve created a more fitting header image – changing the logo from Comic News to Comedy News, incorporating it into a psd file with a couple of accompanying images to create a more bulked out, attention grabbing header. The logo has changed slightly too – I’ve gotten rid of the outer glow behind the words and added a 2px stroke around the outer edge to make it stand out more in front of the other images. You will also notice the RSS feed logo is underneath the search bar. I did try to configure a feed for my website, however it didn’t seem to work properly. I’ve left it there with the link in the hope that it may just randomly work at some point.

I’ve added a background image with an opacity of about 15% to the container – this gets rid of the blank space, and provides me with something other than a flat colour to sit behind the main content of the page. I like the overall effect it gives the page. I used a comic strip to keep with the theme of the site.

As for the navigation, I’ve gotten rid of the rounded corners and toned down the drop shadow by a significant amount. I’ve also changed the borders from solid black, to a thinner grey border for more subtlety. I didn’t want the navigation to be the most attention seeking area of the website and quite frankly the massive borders and large shadows didn’t really help. I’ve pretty much repeated this process around every border-radiused and bordered divs. It does give a much cleaner effect to the site.

windows8

The colour scheme has changed slightly too. I was advised to choose colours that were of the same saturation and brightness as they would go well together rather than two completely random colours, whether or not they compliment each other. I looked at the Windows 8 UI, which is relatively flat but effective, using colour well to divide attention across the page. I’ve matched the colour of the logo to the other orange areas as well, because originally the shade of orange being used was one that did not appear in the site anywhere else.

updated website - top half

As for the footer, I’ve not really done anything. I’ve simply applied the font being used around the site to the p tags, and floated the validation logos to the right to stop them spilling out of the footer.

updated footer

Advertisements