HTML and CSS mock up

I have created an HTML and CSS mock up of the website as i previously said i would in blog posts. After more research into the Gaming websites i come across an intresting WP template with Gaming websites. The WP theme is good and uses the common colour within the gaming genre with tweaking and my own spin i think the general layout would suit the clan nicely and would also help me from a learning designer perspective. The website theme can be found here.. http://wordpress.org/extend/themes/gamepress.

 

From looking at it you can see a lot of similarities with colour and layout. The sidebar was the biggest problem with this theme no background to it and blends in with the background. I took my favorite elements mainly the blog format and layout including the little image that’s repeated at the bottom of each post that’s a little horizontal line. combined it with the need of the clan tried to improve the typography using a font that had more weights and was able to be flexible and light with the header.

The mock up also took inspiration from some resources i found online. The background image that is repeating is supposed to be carbon fiber and was in a package of 30+ web texures which where free to use online. I took colour samples from this and built the site around it.

I am impressed with my Mock up and i hope that i am able to take this over to expressionengine without too much trouble it taken a little time and effort for the HTML and CSS but overall i haven’t had too many issues plus i got posative feedback from the owned of SOL who i showed this too. The biggest thing the Client liked was the coustum made buttons for Twitter and Facebook i made these using background gradients and font awsome graphics. I have included at the bottom of the page images of the website textures plus web graphics i created.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s