Website design Creation

Screen Shot 2013-05-16 at 11.51.40

To begin with I started by adding a general framework to the page to make sure that the buttons and name of the site are consistently the same on each page which was easily achieved as everything in the top and bottom middle section of the page is replicated on all the pages which is fine for the buttons but it meant that I couldn’t place the logo design at the top because I planned to use it on other pages and I think it would have been strange for it to be seen twice on one page so I designed a title for the website using the different typefaces that I collected. For the buttons I made sure that they were written in a clear typeface with lines separating the buttons from each other. Under the buttons and heading and above the bottom section I placed a line to beak up the main focus of the page to the pieces of the page that are on all pages. There social icons that i placed at the bottom of the page and linked them to my WordPress and the websites twitter.

Screen Shot 2013-05-16 at 11.43.59

For the buttons they become grey when in use and the home button has a thinner typeface so that it is easier to identify when people want to quickly using the website. The colour palette that I used for the website was created so that the background colour behind the drop down menu is a grey to contrast the white background, the headings for the drop down menu are all centred and if there were more sections to the drop down menu then I would make it so that the list could be expanded horizontally instead of having the drop down menu being really long and continuing down the page.

Screen Shot 2013-05-16 at 11.50.03For the main work page it features images of all the pieces of work for the client to see,when scrolling over each of the images basic information about the topic and what is featured in the image and also a link to the page for that specific topic with information on it also. This page also features a ‘Show More’ link at the bottom which expands the page vertically so that all the other images of other topics can be seen.

Screen Shot 2013-05-16 at 18.06.00

For the actual topic pages I added a scrolling gallery that changes to the different pages of the topic and the image are timed so that people who are on the page do not have to manually scrolling through the images. Similar to the initial sketches the text on is on the right of the image which will describe what the images contain and about the topic.

Screen Shot 2013-05-16 at 11.51.10

On this page I have made it so that the Twitter, Linkedin and WordPress to be linked to the corresponding sites linked to this website. I also use the logo as a placeholder image for anything that doesn’t yet have an image or is coming soon.

Screen Shot 2013-05-16 at 17.58.30

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: