Website – Redesign

25 Mar

Along side all of the mini project briefs over the past few weeks something else that I have been focusing my time on was a complete redesign of my website. The reason for the full redesign was that my first hand in for my website was after I had few hours of coding experience, now that I spent many hours playing around with HTML 5 and  CSS 3 I have improved my overall skills. So I began to do some hand drawn ideas for a new site, I decided on producing a presentation/slide based site, with a colourful minimalistic style. As this referrers back to the first site I built,  which after looking at in depth and talking to peers just contained to much information and was to cluttered.

First website desig

First website design

My idea for the slide based site was to almost tell a story, this story was about me and my work. To do this I focused on a 5 page site. Starting with (home) this was who I am, (about) what I’m doing/interested in life, (blog) further detail can be found on my blog, (portfolio) this shows of all the creative work that I have produced and finally (contact) where people can send me an email if they want to find out more about me or just want to ask a question.

This time round I wanted to make sure that my website would be responsive for all different types of screen sizes. To ensure this I implemented the @media queries function within my css styles to make sure that all content was easily viewable on a range of devices sizes such as mobile, tablet, laptop and desktop. For example font sizes had to be reduced for the mobile size of the site as the original size didn’t work. Another plan I stuck to was to have it so the site wasn’t scrollable, the reason for this was that all content loaded centrally and can be seen with the most ease without spending time searching for it.

Home Page

Home Page

About Page

About Page

Blog Page

Blog Page

Portfolio Page

Portfolio Page

Contact Page

Contact Page

My website can be viewed at http://www.joshhawes.com

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

%d bloggers like this: