Design for Web // Mock Site Designs

From my final scamp and wireframe, i have designed a mock up of the website, this is the homepage and one of the linked pages. This shows what the content and layout of the website will actually look when properly designed.

Initial design of the wireframe of the site, here you can where the logo, content and links will be placed within the layout.

Initial design for the linked pages, again this shows the logo, content and links. See how i have used the main content area from the homepage to hold the content for the linked pages, this makes everything consistent and flow across the website.

Actual Design of Homepage

This is the design of the homepage for the website, with the correct content and logo etc. For now i am going to use the links at the bottom as they are, but i dont particularly like them because i think they are abit bland and boring, but id rather get it coded and working then i can think about changing them after.

Actual design of linked page

Here you can again see the design of one of the lined pages. the logo stays in the same place and the main image changes to become the content area. This will hold content on each model within the range which will change by using the arrows at the side. As you can see i have also tried a variant link button at the bottom, which is the shape of each model series. But i think this is too much for the links and it takes away your eye from the main content in the middle of the page. Its makes it too complicated and over crowded - your eye doesnt know where to look.

After changing the link buttons back to being the solid colour, i think think this works alot better, it may be simple and not be very creative, but it works well for the navigation purpose and does fit in aesthetically with the design of the website. 

Once you have clicked on the link button and are taken to that page, a rollover on the button will reverse the colour out when you are on the page, this is to show which page you are actually on and to make it easier to navigate.

After looking at the design in more detail, i felt that the arrows which will flick through the different vehicle models within each generation look too close and cramped within the content area, so i have moved them outside this and place them vertically centered in the two coloumns each side of the content area, this gives more room within the content area and looks more balanced on a whole. 

Logo Design

Initial ideas of logos for the website, but i found these too boring and lack of design to them.

These started to interest me more, but i didnt like the use of the yellow, well im unsure about it yet, i did another version with a lighter blue, which i think works well, but its hard to see against the white background, so im not sure which to use at the minute, but i like the design of them and think they will fit and look good on the website page.